1

多くのチュートリアルと Cascading DropDownLists へのさまざまなアプローチを確認した後、View の ViewModel を作成し、この投稿に基づいて DropDownLists にデータを入力することにしました: MVC3 AJAX Cascading DropDownLists

ここでの目標は最も基本的なものであり、多くのチュートリアルでカバーされていますが、まだ完全には理解できません... State ドロップダウンの値に基づいて City ドロップダウンを設定することです。

編集：

このリクエストを投稿して以来、私は Firebug を発見しました (そうです、これは私があらゆる種類のプログラミングを行うのに慣れていないためです)。コントローラーを正常に呼び出して、必要なデータを取得していることを確認できました。問題は、ビューにデータを返す JavaScript の後半にあると思います。

これが私の見解です：

    <label>STATE HERE:</label>
    @Html.DropDownListFor(x => x.States, Model.States, new { @class = "chzn-select", id = "stateID" })
    <br /><br />
    <label>CITY HERE:</label>
    @Html.DropDownListFor(x => x.Cities, Enumerable.Empty<SelectListItem>(), new { id = "cityID" })

ビュー内の JavaScript は次のとおりです。結果を取得すると、どういうわけか結果を正しく処理できません。

$(function () {
    $("#stateID").change(function () {
        var stateId = $(this).val();
        // and send it as AJAX request to the newly created action 
        $.ajax({
            url: '@Url.Action("GetCities")',
            type: 'GET',
            data: { Id: stateId },
            cache: 'false',

            success: function (result) {
                var citySelect = $('#cityID');
                $(citySelect).empty();

                // when the AJAX succeeds refresh the ddl container with

                $.each(result, function (result) {
                    $(citySelect)
                    .append($('<option/>', { value: this.simpleCityID })
                    .text(this.cityFull));

                });
            },
            error: function (result) {
                alert('An Error has occurred');
            }
        });
    });
});

JavaScript によって呼び出されるコントローラーは次のとおりです。

public JsonResult GetCities(int Id)
    {
        return Json(GetCitySelectList(Id), JsonRequestBehavior.AllowGet);
    }

    private SelectList GetCitySelectList(int Id)
    {
        var cities = simpleDB.simpleCity.Where(x => x.simpleStateId == Id).ToList();

        SelectList result = new SelectList(cities, "simpleCityId", "cityFull");
        return result;
    }

これは、Firbug からの結果です。これは、DropDownList を正しく設定していないだけで、問題なくデータを構築して取得していることを示しています。

[{"Selected":false,"Text":"Carmel","Value":"IN001"},{"Selected":false,"Text":"Fishers","Value":"IN002"}]

JavaScript がドロップダウンに入力できない理由について何か提案があれば、コメントしてください。

4

2 に答える 2

0

ご協力いただきありがとうございます、

以下のJavaScriptでは、データモデルに関連付けられているsimpleCityIDフィールドとcityFullフィールドを直接参照しようとしていたことがわかりました。

$.each(result, function (result) {
                $(citySelect)
                .append($('<option/>', { value: this.simpleCityID })
                .text(this.cityFull));

代わりに、私はそれを一般的で、値とテキストを参照するJavaScript標準と一致させる必要がありました：

$.each(modelData, function (index, itemData) {
                select.append($('<option/>', {
                    value: itemData.Value,
                    text: itemData.Text
于 2012-07-19T20:11:59.707 に答える
0

私はこれを次のようなもので数回行いました：

部分的に入力するドロップダウン リストを作成します。名前を付けて、ビューのフォルダーにDropDownList入れますShared

@model SelectList     
@Html.DropDownList("wahtever", Model)

作成ビューは次のようになります (無関係な部分はスキップされます)。

<script type="text/javascript">
    $(function() {
        $("#StateId").change(function() {
            loadLevelTwo(this);
        });

        loadLevelTwo($("#StateId"));
    });

    function loadLevelTwo(selectList) {
        var selectedId = $(selectList).val();

        $.ajax({
            url: "@Url.Action("GetCities")",
            type: "GET",
            data: {stateId: selectedId},
            success: function (data) {
                $("#CityId").html($(data).html());
            },
            error: function (result) {
                alert("error occured");
            }
        });
    }
</script>

@Html.DropDownList("StateId")

<select id="CityId" name="CityId"></select>

SelectEmpty item forとatCityIdの呼び出しに注意してくださいloadLevelTwodocument.ready

そして、コントローラーは次のようになります。

public ActionResult Create()
{
    ViewBag.StateId = new SelectList(GetAllCities(), "Id", "Name");
    return View();
}

public ActionResult GetCities(int stateId) {
    SelectList model = new SelectList(GetCitiesOfState(stateId), "Id", "Name");
    return PartialView("DropDownList", model);
}
于 2012-07-19T03:58:17.977 に答える