根据MVC 4中的另一个下拉列表选择值填充下拉列表

Question

I have referred This ans of stackoverflow It is working fine but since i have taken drop down list in forms so when second dropdown list gets populate selected value in first dropdown list is getting effected. How to maintain that value??

Here is my code.

View

@{ Html.BeginForm("Create", "User", FormMethod.Post, new { enctype = "multipart/form-data" }); }
@Html.DropDownList("country", ViewData["Id"] as List<SelectListItem>, new { onchange = "this.form.submit();" })
@{ Html.EndForm(); }


@{ Html.BeginForm("Create", "User", FormMethod.Post, new { enctype = "multipart/form-data" }); }
@Html.DropDownList("state", ViewData["Id1"] as List<SelectListItem>, new { onchange = "this.form.submit();" })
@{ Html.EndForm(); }


@{ Html.BeginForm("Create", "User", FormMethod.Post, new { enctype = "multipart/form-data" }); }
@Html.DropDownList("city", ViewData["Id2"] as List<SelectListItem>, new { onchange = "this.form.submit();" })
@{ Html.EndForm(); }

Controller

 public ActionResult Create()
    {
        FillCountry();
        FillState();
        FillCity();
        return View();
    }
    [HttpPost]
    public ActionResult Create(User ur)
    {
        string str = @"Data Source=DEV_3\SQLEXPRESS;Initial Catalog=DB_Naved_Test;Integrated Security=True";
        SqlConnection con = new SqlConnection(str);
        string query = "Insert into tblTest (Name,Email,MobileNo) values('" + ur.Name + "','" + ur.Email + "','" + ur.MobileNo + "')";
        con.Open();
        SqlCommand cmd = new SqlCommand(query, con);
        cmd.ExecuteNonQuery();
        con.Close();
        TempData["msg"] = "<script>alert('Inserted Successfully');</script>";
        ModelState.Clear();
        FillCountry();
        FillState();
        FillCity();
        return View();


    }
    public void FillCountry()
    {
        string str = @"Data Source=DEV_3\SQLEXPRESS;Initial Catalog=DB_Naved_Test;Integrated Security=True";
        SqlConnection con = new SqlConnection(str);
        string query = "select * from tblCountry ";
        SqlCommand cmd = new SqlCommand(query, con);
        con.Open();
        SqlDataReader rdr = cmd.ExecuteReader();
        List<SelectListItem> li = new List<SelectListItem>();
        li.Add(new SelectListItem { Text = "Select", Value = "0" });
        while (rdr.Read())
        {
            li.Add(new SelectListItem { Text = rdr[1].ToString(), Value = rdr[0].ToString() });
        }
       
        ViewData["Id"] = li;
        
    }
    public void FillState()
    {
        int id = Convert.ToInt16(Request["country"]);
        string str = @"Data Source=DEV_3\SQLEXPRESS;Initial Catalog=DB_Naved_Test;Integrated Security=True";
        SqlConnection con = new SqlConnection(str);
        string query = "select * from tblState where cid='" + id + "'";
        SqlCommand cmd = new SqlCommand(query, con);
        con.Open();
        SqlDataReader rdr = cmd.ExecuteReader();
        List<SelectListItem> li = new List<SelectListItem>();
        li.Add(new SelectListItem { Text = "Select", Value = "0" });
        while (rdr.Read())
        {
            li.Add(new SelectListItem { Text = rdr[1].ToString(), Value = rdr[0].ToString() });
        }
        ViewData["Id1"] = li;
    }
    public void FillCity()
    {
        int id = Convert.ToInt16(Request["state"]);
        string str = @"Data Source=DEV_3\SQLEXPRESS;Initial Catalog=DB_Naved_Test;Integrated Security=True";
        SqlConnection con = new SqlConnection(str);
        string query = "select * from tbl_cities where StateId='" + id + "'";
        SqlCommand cmd = new SqlCommand(query, con);
        con.Open();
        SqlDataReader rdr = cmd.ExecuteReader();
        List<SelectListItem> li = new List<SelectListItem>();
        li.Add(new SelectListItem { Text = "Select", Value = "0" });
        while (rdr.Read())
        {
            li.Add(new SelectListItem { Text = rdr[1].ToString(), Value = rdr[0].ToString() });
        }
        ViewData["Id2"] = li;
    }

and also when I am using only two dropdownlist ie ddlCountry and ddlState and select Country from ddlCountry my ddlSates is getting populated properly but the selected Country from ddlCountry is getting changed.

Answer 1

Did this and it working perfect

Controller

public ActionResult Index()
    {
        string str = @"Data Source=DEV_3\SQLEXPRESS;Initial Catalog=DB_Naved_Test;Integrated Security=True";
        SqlConnection con = new SqlConnection(str);
        string query = "select * from tbl_country ";
        SqlCommand cmd = new SqlCommand(query, con);
        con.Open();
        SqlDataReader rdr = cmd.ExecuteReader();
        List<SelectListItem> li = new List<SelectListItem>();
        while (rdr.Read())
        {
            li.Add(new SelectListItem { Text = rdr[1].ToString(), Value = rdr[0].ToString() });
        }
        ViewData["country"] = li;
        return View();
    }
    public JsonResult StateList(int Id)
    {
        string str = @"Data Source=DEV_3\SQLEXPRESS;Initial Catalog=DB_Naved_Test;Integrated Security=True";
        SqlConnection con = new SqlConnection(str);
        string query = "select * from tbl_states where cid='" + Id + "'";
        SqlCommand cmd = new SqlCommand(query, con);
        con.Open();
        SqlDataReader rdr = cmd.ExecuteReader();
        List<SelectListItem> li = new List<SelectListItem>();
        while (rdr.Read())
        {
            li.Add(new SelectListItem { Text = rdr[1].ToString(), Value = rdr[0].ToString() });
        }
        return Json(li, JsonRequestBehavior.AllowGet);
    }
    public JsonResult Citylist(int id)
    {
        string str = @"Data Source=DEV_3\SQLEXPRESS;Initial Catalog=DB_Naved_Test;Integrated Security=True";
        SqlConnection con = new SqlConnection(str);
        string query = "select * from tbl_cities where stateid='" + id + "'";
        SqlCommand cmd = new SqlCommand(query, con);
        con.Open();
        SqlDataReader rdr = cmd.ExecuteReader();
        List<SelectListItem> li = new List<SelectListItem>();
        while (rdr.Read())
        {
            li.Add(new SelectListItem { Text = rdr[1].ToString(), Value = rdr[0].ToString() });
        }
        return Json(li, JsonRequestBehavior.AllowGet);
    }

View

@using (Html.BeginForm())
{ @Html.DropDownList("Country", ViewData["country"] as SelectList, "Select Country", new { id = "Country", style = "width: 150px;" })<br />
<select id="State" name="state" , style="width: 150px;"></select><br />
<select id="city" name="City" , style="width: 150px;"></select><br />
}
@Scripts.Render("~/bundles/jquery")
<script type="text/jscript">
$(function ()
{
    $('#Country').change(function ()
    {        
        $.getJSON('/Cascading/StateList/' + $('#Country').val(), function (data)
        {
            var items = '<option>Select State</option>';
            $.each(data, function (i, state)
            {
                items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
            });
            $('#State').html(items);
        });
    });

    $('#State').change(function ()
    {
        $.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data)
        {
            var items = '<option>Select City</option>';
            $.each(data, function (i, city)
            {
                items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
            });
            $('#city').html(items);
        });
    });
});

Answer 2

you can use jquery like below

$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>


<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>

Answer 3

                  <div class="col-md-4">
                    <div class="form-group">
                        <label for="validationCustom04">
                  @Html.LabelFor(model => model.LGAID)</label>
                       <select id="LocalID" name="LocalID" 
                     class="form-control" 
                  data-val="true" 
               data-val-number="Select Local Government">
                           <option value="0">---Select--</option>
                       </select>
                        <div class="invalid-feedback">
                            @Html.ValidationMessageFor(model => model.LGAID, "", new { @class = "text text-danger" })
                        </div>
                    </div>
                </div>

Answer 4

                  $("#State").change(function() {
               var Id = $("#localID option:Selected").val();
             $.getJSON('/ControllerName/ActionName/' + Id, 
           function (data) {
           var AddItem = '<option value="">---select from list--</option>';
        $.each(data, function (i, local) {
            AddItem += "<option value='" + local.LGAID + "'>" + local.LGAName + " 
            </option>"
        });

        $('#LocalID').html(AddItem);
           });
        });

Answer 5

[Route("PersonalData/localGoverntment")]
public ActionResult ActionName(int Id)
{
    DBEntities db = new DBEntities();

    List<LGA> LocalList = db.LGAs.ToList();
    List<LocalGModel> localModel = LocalList.Where(x => x.StateID == Id).Select(x => new LocalGModel { LGAID = x.LGAID, LGAName = x.LGAName }).ToList();

    return Json(localModel, JsonRequestBehavior.AllowGet);
}