How to populate another dropdownlist based on first dropdown

Parth Mashroo

11y1.5k.NET

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 li = new List();
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 products = new List();
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

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)

@Html.LabelFor(model => model.CompanyID, new { @class = "lbldis" })

@Html.DropDownList("Company", ViewData["Company"] as List, new { style = "width:250px", @class = "dropdown1", id = "ddln" })
@Html.ValidationMessageFor(model => model.CompanyID)

@Html.LabelFor(model => model.ProductID, new { @class = "lbldis" })

@Html.DropDownList("ProductID", new SelectList(string.Empty, "Value", "Text"), "Please Select One", new { @class = "txtbox" })

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

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

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Manish Kumar Choudhary11y ago
Go through following example and modify your code

In partial view I have

<div class="form-group">

                    <div class="col-lg-3">

                        @Html.LabelFor(model => model.DeptId, new { @class = "control-label" })

                    div>

                    <div class="col-lg-6">

                        @Html.DropDownList("DeptId", (SelectList)ViewBag.DeptIdList, "-Select Department-", htmlAttributes: new { @class = "form-control" })

                    div>

                    <div class="col-lg-3">

                        @Html.ValidationMessageFor(model => model.DeptId, "", new { @class = "text-danger" })

                    div>

                div>

<div class="form-group">

                    <div class="col-lg-3">

                        @Html.LabelFor(model => model.DigId, new { @class = "control-label" })

                    div>

                    <div class="col-lg-6">

                        @**@

                        @Html.DropDownList("DigId", (SelectList)ViewBag.DigIdList, "-Select Designation-", htmlAttributes: new { @class = "form-control" })

                    div>

                    <div class="col-lg-3">

                        @Html.ValidationMessageFor(model => model.DigId, "", new { @class = "text-danger" })

                    div>

                div>

In the main view I use following scripts

<script type="text/javascript">

    $(document).ready(function () {

        //$("#DigId").prop("disabled", true);

        $("#DigId").empty();

        $("#DigId").append("");

        $("#DeptId").change(function () {

            if ($("#DeptId").val() != "0") {

                var DesignationOptions = {};

                DesignationOptions.url = '@Url.Action("GetDesignations")';

                DesignationOptions.type = "POST";

                DesignationOptions.data = JSON.stringify({ DeptId: $("#DeptId").val() });

                DesignationOptions.datatype = "json";

                DesignationOptions.contentType = "application/json";

                DesignationOptions.success = function (designations) {

                    $("#DigId").empty();

                    $("#DigId").append("");

                    $.each(designations, function (i, designation) {

                        $("#DigId").append(''">' +

                            designation.Text + '');

                    })

                    $("#DigId").prop("disabled", false);

                };

                DesignationOptions.error = function () {

                    if ($("#DeptId").val() != "0") {

                        $("#DigId").empty();

                       // $("#DigId").prop("disabled", true);

                    } else {

                        alert("Error in Getting Designations!!");

                    }

                };

                $.ajax(DesignationOptions);

            }

            else {

                $("#DigId").empty();

                //$("#DigId").prop("disabled", true);

            }

        });

    });

script>

And my josn method is like

public JsonResult GetDesignations(string DeptId)

        {

            List<SelectListItem> designations = new List<SelectListItem>();

            int id = Convert.ToInt32(DeptId);



            designations = db.Designations.Where(x => x.DeptId == id)

                         .Select(z => new { z.DegId, z.DegName })

                              .Select(y => new SelectListItem

                              {

                                  Value = y.DegId.ToString(),

                                  Text = y.DegName

                              }).ToList();

            //designations.Add(new SelectListItem { Text = "-Select Designation-", Value = "0" });

            return Json(new SelectList(designations.OrderBy(x=>x.Value), "Value", "Text"));

           // return Json(designations);

        }

in get request I field the first dropdown.

+1
Parth Mashroo11y ago
Actually the second dropdown isnt getting values based on first one i mean no event is getting generated the json is not getting any value on first dropdown change event.
0
Manish Kumar Choudhary11y ago
what error you are getting ?
0