2

私の見解は

<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

マイコントローラー

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

引用符

私の質問は、国、州、都市のドロップダウン リストをカスケードする方法です。このビューは、データを編集するときに生成されます。データベースから保存されたデータが取得され、コントロールにバインドされますが、ユーザーが州よりも国のドロップダウンの値を変更すると、ドロップダウンもそれに従って入力する必要があります。必要なpkとfkを含む国、州、都市の3つの異なるテーブルがdbにあります

4

1 に答える 1

1

ここでは、Ajax を使用した MVC での国と州のカスケード ドロップダウンのソリューションを
示します。- 最初のドロップダウンはコントローラーでビュー バッグを保持することでバインドし、2 番目のドロップダウンでは 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>

ここで「~/Account/GetState」と指定された json url は、「Account」コントローラーで使用できるメソッド「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;
        }
于 2012-09-03T09:13:09.803 に答える