how to populate second dropdown based on the value of first dropdown in mvc?

See more:

MVC

drop-down

partial-view

The Question in detail is how to populate second dropdown based on the value of first dropdown and what if both the dropdowns are in partial view and calling that partial view to my index page:

My Controller:

public ActionResult _Prepaid()
{
//PrepaidRechargeModel Pre = new PrepaidRechargeModel();
//ViewBag.PrepaidCompanyList = Pre.GetPrepaidCompany().ToList();

List<SelectListItem> li = new List<SelectListItem>();
li.Add(new SelectListItem { Text = "Select", Value = "0" });
li.Add(new SelectListItem { Text = "Aircel", Value = "1" });
li.Add(new SelectListItem { Text = "Airtel", Value = "2" });
li.Add(new SelectListItem { Text = "BPL", Value = "3" });
li.Add(new SelectListItem { Text = "BSNL", Value = "4" });
li.Add(new SelectListItem { Text = "Docomo", Value = "5" });
li.Add(new SelectListItem { Text = "Idea", Value = "6" });
li.Add(new SelectListItem { Text = "Loop", Value = "7" });
li.Add(new SelectListItem { Text = "MTNL", Value = "8" });
li.Add(new SelectListItem { Text = "MTS", Value = "9" });
li.Add(new SelectListItem { Text = "Reliance", Value = "10" });
li.Add(new SelectListItem { Text = "S-Tel", Value = "11" });
li.Add(new SelectListItem { Text = "TataIndicom", Value = "12" });
li.Add(new SelectListItem { Text = "Uninor", Value = "13" });
li.Add(new SelectListItem { Text = "Videocon", Value = "14" });
li.Add(new SelectListItem { Text = "Virgin", Value = "15" });
li.Add(new SelectListItem { Text = "Vodafone", Value = "16" });
ViewData["Company"] = li;

return View();
}

public JsonResult GetProductID(string id)
{
List<SelectListItem> products = new List<SelectListItem>();
switch (id)
{
case "4":
products.Add(new SelectListItem { Text = "TopUp", Value = "1" });
products.Add(new SelectListItem { Text = "Recharge", Value = "2" });
break;
case "5":
products.Add(new SelectListItem { Text = "Flexi", Value = "3" });
products.Add(new SelectListItem { Text = "Special", Value = "4" });
break;
case "13":
products.Add(new SelectListItem { Text = "Flexi", Value = "7" });
products.Add(new SelectListItem { Text = "Special", Value = "8" });
break;
case "14":
products.Add(new SelectListItem { Text = "Flexi", Value = "9" });
products.Add(new SelectListItem { Text = "Special", Value = "10" });
break;
}
return Json(new SelectList(products, "Value", "Text"));

} 

My CSHTML Page:

@model NomzyPay.Models.PrepaidRechargeModel

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="~/Content/control.css" rel="stylesheet" />
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $js = jQuery.noConflict();
$js(document).ready(function () {
$js("#ddln").change(function () {
$js("#ProductID").empty();
$js.ajax({
type: 'POST',
url: '@Url.Action("GetProductID")',
dataType: 'json',
data: { id: $js("#ddln").val() },
success: function (products) {
$js.each(products, function (i, ProductID) {
$js("#ProductID").append('<option value="' + ProductID.Value + '">' + ProductID.Text + '</option>');
});
},
error: function (ex) {
alert('Failed To Retive Products' + ex);
}
});
return false;
})
});
</script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)

<fieldset>
<legend></legend>

<div class="editor-label">
@Html.LabelFor(model => model.CompanyID, new { @class = "lbldis" })
</div>
<div class="editor-field">
@Html.DropDownList("Company", ViewData["Company"] as List<SelectListItem>, new { style = "width:250px", @class = "dropdown1", id = "ddln" })
@Html.ValidationMessageFor(model => model.CompanyID)
</div>

<div id="ndl">
<div class="editor-label">
@Html.LabelFor(model => model.ProductID, new { @class = "lbldis" })
</div>
<div class="editor-field">
@Html.DropDownList("ProductID", new SelectList(string.Empty, "Value", "Text"), "Please Select One", new { @class = "txtbox" })
</div>
</div>

and the index page where i am calling my partial page to index like this

@Html.Partial("~/Views/Recharge/_Prepaid.cshtml")