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();
}
}