Question

我想制作两个级联下拉列表。当用户选择下拉列表中的项目时，此操作将触发：

 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>

该动作成功触发。但是没有什么可以添加到我的第二个下拉列表中：

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

问题是什么？

Answer 1

您只能在构建页面时使用viewbag。一旦浏览器显示页面，就没有更多的视图包。假设您执行以下操作：

ViewBag.MyName = "John Doe";

当您的页面加载时：

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

浏览器唯一看到的是：

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

浏览器不知道页面是如何构建的。它不了解Viewbag，因为这是一个ASP.NET功能，它与浏览器无关。

您需要做的是在StagesList2语句中传递return数据，然后在ajax调用的success回调中处理该数据。

所以你的代码会变成这样：

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

您必须检查字段的名称，我只是使用了一些示例，但我希望您能够了解如何处理数据：）

随意询问是否不够清楚。

将列表绑定到dropdownlistfor

1 个答案: