0

2 つのカスケード ドロップダウンリストを作成したいと考えています。ユーザーがドロップダウンリストで項目を選択すると、このアクションが起動します:

 public SelectList myFunc(string item)
    {
        var query = //Query

        var sItems = new SelectList(query);
        ViewBag.StagesList2 = sItems;
        return ViewBag.StagesList2;
    }

そしてこの私のスクリプト：

<script>
    var isChanged = false;
    $(function () {
        $('#stageOne').change(function () {
                $.ajax({
                    url: "/Shop/myFunc/",
                    data: { item: $("#stageOne option:selected").text() },
                    type: 'post',
                    success: function () {
                     document.getElementById("stageTwo").options.add(ViewBag.StagesList2);
                 }
            });

        });
    });
</script>

アクションは正常に起動します。しかし、私の2番目のドロップダウンリストforには何も追加しません:

    <div class="drop-down-list">
        <%: Html.DropDownListFor(model => model.StageId, Enumerable.Empty<SelectListItem>(),new { id="stageTwo"})%>
        <%: Html.ValidationMessageFor(model => model.StageId) %>
    </div>

何が問題ですか？？

4

1 に答える 1

0

ビューバッグは、ページが構築されているときにのみ使用できます。ブラウザがページを表示すると、ビューバッグはなくなります。次の操作を行うとします。

ViewBag.MyName = "John Doe";

ページが読み込まれると、次のようになります。

<h2>Welcome, <%: ViewBag.MyName %> ! </h2>

ブラウザに表示される唯一のものは次のとおりです。

<h2>Welcome, John Doe ! </h2>

ブラウザは、ページがどのように構築されたかを知りません。Viewbag は ASP.NET の機能であり、ブラウザーとは関係がないため、認識されません。

必要なことは、ステートメントでStagesList2データを渡し、そのデータをajax 呼び出しのコールバックで処理することです。returnsuccess

したがって、コードは次のようになります。

public JsonResult myFunc(string item)
{
    var query = //Query, let's assume this passes a list of items with an ID and a Name field.


    return Json(query, JsonRequestBehavior.AllowGet); //This sends your query result back as a JSON object
}

次に、Ajax のsuccessコールバックは次のようになります。

success: function (myJSONdata) {
    //first, clear the current contents
    $("#stageTwo").html("");

    //Now proces the new items piece by piece        
    var items = myJSONdata.items;

    for(var i=0; i < items.length; i++) {
        var item = items[i];
        var optionhtml = '<option value="' + item.ID + '">' + item.Name + '</option>';

        $("#stageTwo").append(optionhtml); //Appends the above option to the selectlist
    }

    //Done!
    alert("Everything is now correctly processed!");
}

フィールドの名前を確認する必要があります。いくつかの例を使用しましたが、データの処理方法の一般的なアイデアを理解していただければ幸いです:)

それが十分に明確でない場合は、遠慮なく尋ねてください。

于 2013-03-04T10:24:06.770 に答える