How to display cascaded dropdownlist using MVC4?

Question

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. While i tried below code, i am getting the same data for country dropdownlist. countryid is primary key in country table and  it is
foreign key in state table. First row country id in state table is 6 which corresponds to North America in country table. It displays the same for all 11 rows in country dropdownlist. Please give me right direction?
  public ActionResult Submit()
           List<Country> allcountry= new List<Country>();
           List<State> allstate = new List<State>();
           using (portalconnectionstring pc = new portalconnectionstring())
                allcountry = pc.countries.OrderBy(a => a.countryname.ToList();
            ViewBag.CountryID = new SelectList(allcountry, "countryid", "countryname");
            ViewBag.StateID = new SelectList(allstate, "stateid", "statename");
             return View();
            [HttpPost]
            [ValidateAntiForgeryToken]
public ActionResult Submit(Feedback s) {
 List<Country> allcountry= new List<Country>();
 List<State> allstate= new List<State>();
 using (portalconnectionstring pc = new portalconnectionstring())
               allcountry= pc.countries.OrderBy(a => a.countryname).ToList();
               if (s != null && s.towerid > 0)
                    allstate= pc.states.Where(a => a.countryid.Equals(s.countryid)).OrderBy(a => a.statename).ToList();
 ViewBag.CountryID = new SelectList(allcountry, "countryid", "countryname", s.countryid);
          ViewBag.StateID = new SelectList(allstate, "stateid", "statename", s.stateid);
 if (ModelState.IsValid)
                    using (portalconnectionstring pc = new portalconnectionstring())
                        using (NpgsqlCommand pgsqlcommand = new NpgsqlCommand("ddltest", conn))
 pgsqlcommand.CommandType = CommandType.StoredProcedure;
 pgsqlcommand.Parameters.Add(new NpgsqlParameter("countryname", NpgsqlDbType.Varchar));
                        pgsqlcommand.Parameters.Add(new NpgsqlParameter("statename", NpgsqlDbType.Varchar));
  pgsqlcommand.Parameters[0].Value = model.countryname;
                        pgsqlcommand.Parameters[1].Value = model.statename;
 pgsqlcommand.ExecuteNonQuery();
                        ViewBag.Message = "Successfully submitted";
                else
                    ViewBag.Message = "Failed! Please try again";
                return View(s);
            [HttpGet]
            public JsonResult GetStates(string countryid = "")
                List<State> allstate= new List<State>();
                int ID = 0;
                if (int.TryParse(countryid, out ID))
                    using (portalconnectionstring dc = new portalconnectionstring())
                        allstate = dc.states.Where(a => a.countryid.Equals(ID)).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
cshtml:
@model mvcdemo.Models.Feedback
    ViewBag.Title = "Submit";
<h2>Submit</h2>
@using (Html.BeginForm("Submit","cascadedddl",FormMethod.Post)) {
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken()
    <fieldset>
        <legend>Feedback</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")
            @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")
            @Html.ValidationMessageFor(model => model.stateid)
        </div>
 <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
                <script type="javascript">
                    $(document).ready(function () {
                        $("#countryid").change(function () {
                            var countryID = parseInt($("#countryid").val());
                            if (!isNaN(countryID)) {
                                var ddstate = $("#stateid");
                                ddstate.empty(); 
                                ddstate.append($("<option></option").val("").html("Select State"));
                                $.ajax({
                                    url: "@Url.Action("GetState","cascadedddl")",
                                    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>

Answer 1

Please post questions related to ASP.NET in the ASP.NET forums (http://forums.asp.net ).