locked
How to populate cascading dropdownlist in MVC4? RRS feed

  • Question

  • Hi, I have two tables in DB to populate cascading dropdownlist. On change of value in first dropdown, second dropdown has to be populated using second table. When i tried below code, both are displaying as normal dropdownlist. I am completely new to MVC. Can anyone direct me in right path?

    Controller:  
    public ActionResult Submit()
            {
                List<Country> allcountryname = new List<Country>();

                List<State> allstate = new List<State>();
                using (portalconnectionstring pc = new portalconnectionstring())
                {
                    allcountryname = pc.countries.OrderBy(a => a.countryname).ToList();

               }
                ViewBag.CountryID = new SelectListallcountryname "countryid", "countryname");
                ViewBag.StateID = new SelectList(allstate, "stateid", "statename");
                return View();
            }


           [HttpPost]
            [ValidateAntiForgeryToken]

            public ActionResult Submit(Test s)
            {
                Country t = new Country();
                List<Country> alltowername = new List<Country>();
                List<State> allstate = new List<State>();

                using (portalconnectionstring pc = new portalconnectionstring())
                {
                    allcountryname = pc.countries.OrderBy(a => a.countryname).ToList();
                    if (s != null && s.countryid> 0)
                    {
                        allstate = pc.states.Where(a => a.countryid.Equals(s.countryid)).OrderBy(a => a.statename).ToList();
                    }
                }
       ViewBag.CountryID = new SelectListallcountryname "countryid", "countryname");
                ViewBag.StateID = new SelectList(allstate, "stateid", "statename");


                if (ModelState.IsValid)
                {
                    using (portalconnectionstring pc = new portalconnectionstring())
                    {
                         NpgsqlConnection conn = new NpgsqlConnection(ConfigurationManager.ConnectionStrings["portalconnectionstring"].ConnectionString);

                    conn.Open();
                    using (NpgsqlCommand pgsqlcommand = new NpgsqlCommand("sp_geographicdetails", conn))
                    {

                        using (NpgsqlTransaction tran = conn.BeginTransaction())
                        {

                            pgsqlcommand.CommandType = CommandType.StoredProcedure;
                            pgsqlcommand.Parameters.Add(new NpgsqlParameter("countryid", NpgsqlDbType.Integer));
                            pgsqlcommand.Parameters.Add(new NpgsqlParameter("stateid", NpgsqlDbType.Integer));
                            pgsqlcommand.Parameters[0].Value = s.countryid;
                            pgsqlcommand.Parameters[1].Value = s.stateid;
                            pgsqlcommand.ExecuteNonQuery();
                            tran.Commit();

                        }

                    }
                    conn.Close();
                }

                        ViewBag.Message = "Successfully submitted";
                    }

                else
                {
                    ViewBag.Message = "Failed! Please try again";
                }
                return View(s);
            }


            public JsonResult GetState(string countryid = "")
            {
                List<State> allstate = new List<State>();

                    using (portalconnectionstring dc = new portalconnectionstring())
                    {
                        allstate = dc.states.Where(a => a.countryid.Equals(countryid)).OrderBy(a => a.statename).ToList();
                    }

                if (Request.IsAjaxRequest())
                {
                    return new JsonResult
                    {
                        Data = allstate,
                        JsonRequestBehavior = JsonRequestBehavior.AllowGet
                    };
                }
                else
                {
                    return new JsonResult
                    {
                        Data = "Not valid request",
                        JsonRequestBehavior = JsonRequestBehavior.AllowGet
                    };
                }
            }

    View:

    @model mvcsample.Models.Test

    @{
        ViewBag.Title = "Submit";
    }

    <h2>Submit</h2>

    @using(Html.BeginForm("Submit", "Test", FormMethod.Post))
    {
        @Html.ValidationSummary(true)
        @Html.AntiForgeryToken()
        <fieldset>
            <legend>Test</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.countryid)
            </div>
            <div class="editor-field">
               @Html.DropDownListFor(model => model.countryid, @ViewBag.CountryID as SelectList,"select country",new { id = "countryid" })
                @Html.ValidationMessageFor(model => model.countryid)
            </div>

             <div class="editor-label">
                @Html.LabelFor(model => model.stateid)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(model => model.stateid, @ViewBag.StateID as SelectList,"select state", new { id = "stateid" })
                @Html.ValidationMessageFor(model => model.stateid)
            </div>

            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }



    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")

         <script type="javascript">
                        $(document).ready(function () {
                            $("#countryid").change(function () {
                              
                                var countryID = parseInt($("#countryid").val());
                                if (!isNaN(contryID)) {
                                    var ddstate = $("#stateid");
                                    ddstate.empty(); 
                                    ddstate.append($("<option></option").val("").html("Select state"));
     
                                   
                                    $.ajax({
                                        url: "@Url.Action("GetState","Test")",
                                        type: "GET",
                                        data: { countryID: countryid},
                                        dataType: "json",
                                        success: function (data) {
                                            $.each(data, function (i, val) {
                                                ddstate.append(
                                                        $("<option></option>").val(val.stateid).html(val.statename)
                                                    );
                                            });
                                        },
                                        error: function () {
                                            alert("Error!");
                                        }
                                    });
                                }
                            });
                        });
                    </script>
                }
                                                                                   
    Wednesday, March 4, 2015 11:02 AM