c# - 绑定(bind)和级联下拉列表 mvc 3

Question

我的观点是

<div id="Countryy">
        <div class="editor-label">
        @Html.LabelFor(model => model.Country, "Country")
    </div>
    <div class="editor-field">
        @Html.DropDownList("Country", String.Empty)
        @Html.ValidationMessageFor(model => model.Country)
    </div>
    </div>

   <div id="Statess">
    <div class="editor-label">
        @Html.LabelFor(model => model.State, "State")
    </div>
    <div class="editor-field">
        @Html.DropDownList("State", String.Empty)
        @Html.ValidationMessageFor(model => model.State)
    </div>
    </div>


    <div id="Cityy">
    <div class="editor-label">
        @Html.LabelFor(model => model.City, "City")
    </div>
    <div class="editor-field">
        @Html.DropDownList("City", String.Empty)
        @Html.ValidationMessageFor(model => model.City)
    </div>
    </div

我的 Controller

public ActionResult Edit(int id)
    {
        Student student = db.Students.Single(s => s.ID == id);


        ViewBag.Country = new SelectList(db.Couns, "ID", "CountryName", student.Country);
        ViewBag.State = new SelectList(db.States.Where(d => d.CountryID.Equals(student.Country)), "StateID", "StateName", student.State);
        ViewBag.City = new SelectList(db.Cities.Where(x => x.StateID.Equals(student.State)), "CityID", "CityName", student.City);


        return View(student);
    }

Blockquote

我的问题是如何级联国家、州和城市下拉列表。当我想编辑数据时生成此 View 。从数据库中保存的数据被检索并绑定(bind)到控件，但是当用户更改国家/地区的值时下拉列表比状态下拉列表也应该根据它填充。我在数据库中有国家、州、城市 3 个不同的表，具有所需的 pk 和 fk

Answer 1

这是使用 Ajax 在 MVC 中国家和州级联下拉列表的解决方案:-
第一个下拉菜单通过 Controller 保留 View 包进行绑定(bind)，对于第二个下拉菜单，我们可以使用 JavaScript/Jquery 根据所选国家/地区填充值。
以下代码用于 cshtml 页面:

     <div class="editor-label">
                @Html.LabelFor(m => m.Country)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(model => model.Country, new SelectList(Model.Country,       "Value", "Text"), "Select Contry", new { onchange = "CountryChange()" })
            </div>
            <div class="editor-label">
             @Html.LabelFor(m => m.State)
            </div>
            <div class="editor-field">
            @Html.DropDownList("state","Select State")
           </div>

我们使用“CountryChange()”javascript 函数根据国家/地区的变化在州下拉列表中获取和填充数据。下面是 JavaScript 函数实现。

   <script language="JavaScript" type="text/JavaScript">
    function CountryChange () {
        var url = '@Url.Content("~/Account/GetState")';

        var ddlsource = "#Country";
        var ddltarget = "#State";
        if ($(ddlsource).val() != "") {
            $.ajaxSetup({ cache: false });
            $.getJSON(url, { Sel_Country: $(ddlsource).val() }, function (data) {
                $(ddltarget).empty();
                $("#State").append("<option  value=''>Select State</option>");
                $.each(data, function (index, optionData) {
                $("#State").append("<option value='" + optionData.Value + "'>" +     optionData.Text + "</option>");
                 });
             });
        }
        else {
           $("#State").empty();
            $("#State").append("<option value=''>Select State</option>");
       }
   }
 </script>

这里指定的json url“~/Account/GetState”是“Account” Controller 中可用的方法“GetState”，用于检索数据并以json格式传递数据。

        public JsonResult GetState (string Sel_Country)
        {
        CountryService db = new CountryService ();
        JsonResult result = new JsonResult();
        var vStateList = db.GetStateList(Convert.ToInt64(Sel_Country));
        result.Data = vStateList.ToList();
        result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
         return result;
        }