Sunday, February 27, 2011

Cascading dropdown in asp.net mvc

     First in the view page “Index.aspx”  need  to write the JQUERY  codes to generate cascade dropdown list as follows:
<script type="text/javascript" >
   $(document).ready(function()              //This will load fuction in page load itself
   {
      $("#Category").change(function()      //First dropdown function on change
         {                
            LoadSecond($("#Category").val());    //Function to load second dropdownlist
                 }).change();
             });
             function LoadSecond(name)                      
                        {
                            var url = "/DDL/DDL";                 //Controller/action name
                            $.getJSON(url, { Division1: name }, function(data) {
                                $("#Division").empty();
                                $("#Division").append("<option value" + "%" + ">" + "Select" + "</option>");
                                $.each(data, function(index, DDL) {                                   
                                    $("#Division").append("<option value='" + DDL.value + "'>" + DDL.Text + "</option>");
                                });
                            });           
                       }          
   </script>

// Division-name of second dropdown
// data-Parameter name given in the function
// Division1-Parameter name given in the controller

The second dropdown need to be in "select" tag not html dropdown
<div>
   <%=Html.DropDownList("Category")%>         
 
   <select id="Division" name="ddlCamDivision" style="width:100px">

</select>
 </div>
The controller function code will be of the following:
  public ActionResult DDL(string Division1)
        {
            try
            {
                 var w = (from m in CE.seconddd
                        where m.categoryname ==Division1
                        select m.items);

                SelectList Division = new SelectList(w);            
                return this.Json(Division, JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            {
                return View();
            }
        }

No comments:

Post a Comment