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

时间:2015-04-29 06:07:32

标签: c# asp.net-mvc-4

我已经提到了stackoverflow的This ans它工作正常但是因为我已经在表单中下拉列表所以当第二个下拉列表在第一个下拉列表中填充选定值时生效。如何保持这个价值?

这是我的代码。

查看

@{ 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(); }

控制器

 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;
    }

当我只使用两个下拉列表,即ddlCountry和ddlState并从ddlCountry中选择Country时,我的ddlSates正在正确填充,但是ddlCountry中的所选国家正在变更

5 个答案:

答案 0 :(得分:1)

这是否完美无缺

<强>控制器

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);
    }

查看

@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);
        });
    });
});

答案 1 :(得分:0)

你可以使用下面的jquery

$("#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>

答案 2 :(得分:0)

                  <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>

答案 3 :(得分:0)

                  $("#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);
           });
        });

答案 4 :(得分:-1)

[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);
}