Combo Box - Load on demand


Dropdown:

About this example


When bind to a large object model collection Combo Box offers the ajax load features.

In this demo, the Combo Box has loaded nothing on page loaded until to dropdown or scroll,it will be load the partical data from server side.

You can use ClientBind method and write an Action to enable the ajax load feature.

1.The ClientBind(string url,Action template) method has two parameters:

  • url - Specified the Action url that gets the paging data (The return must be an Json object.)
  • template - Define the client item template. This template is a jQuery client template in oreder to use the jQuery template you can read this document:"jQuery-templ"

for example:

<% Ajax.Dna().ComboBox("combo1")
            .Bind(Url.Action("GetData"))
            .ClientTemplate(()=>{
            //Your data model must be has Value and Label properties.
            %>
            <li>
              <input type="hidden" value="${Value}" />
              <span>${Label}span> li>
            <%
            })
            .Render();

2.Pass the PagingParam object as your Action paramter,and you could get the paging properties from client request.

After get the data you could use the JsonWrapper(TModel model,int totalRecords) method to wrap your data object model and return a JsonResult.


   public ActionResult GetData(PaingParam _param)
  {
       //Do get data
       ...
       return Json(this.JsonWrapper([YourModeValue],
       [total Records in your model],JsonRequestBehavior.AllowGet);
  }