1

HTMLに2つのDropdownlistfor、Countryのdropdownlist、stateのdropdownlistがあります。MVCを使用しているので、このような出力になりたいです。選択した国を変更すると、選択した国の状態が状態のドロップダウンリストに入力されます。データベースから国と州のデータを取得しています。州のテーブルには、countryIdのフィールドがあります。手伝ってくれてありがとう。

これがHTMLのサンプルコードです。

            <div class="fieldBlock">
                <div><label>Country</label>&nbsp;*</div>
                <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div>
                @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation)
                <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
            </div>

            <div class="fieldBlock">
                <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div>
                <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305" })</div>
                <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
            </div>
4

1 に答える 1

3

これを試して

ビューで

<script type="text/javascript">
     $(function() {
            $("#ddlCountry").change(function() {
                var selectedItem = $(this).val();
                var ddlStates = $("#ddlState");
                var statesProgress = $("#states-loading-progress");
                statesProgress.show();
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: "@(Url.Action("SomeAction", "SomeController"))",
                    data: { "countryId": selectedItem},
                    success: function (data) {
                        ddlStates.html('');
                        $.each(data, function(id, option) {
                            ddlStates.append($('<option></option>').val(option.id).html(option.name));
                        });

                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert('Failed to retrieve states.');

                    }  
                });
            });
        });
    </script>


<div class="fieldBlock">
    <div><label>Country</label>&nbsp;*</div>
    <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div>
    @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation)
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>

<div class="fieldBlock">
    <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div>
    <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305", @id = "ddlState" })</div>
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>

コントローラ内

public ActionResult SomeAction(string countryId)
{
     //perform your action here
     var states = _stateProvinceService.GetStateProvincesByCountryId(country.Id).ToList();
     var result = (from s in states
                   select new { id = s.Id, name = s.GetLocalized(x => x.Name) }
                  ).ToList();

   return Json(result, JsonRequestBehavior.AllowGet);
}

注：Idがドロップダウンに適切にバインドされているかどうかを確認し、状態を取得するために動作中のダミーコードを記述しました。

于 2012-10-02T07:49:13.377 に答える