javascript - 在MVC 1.0中动态更新html.listBox？

Question

客户端将从下拉列表中选择一个项目，然后这个新选择的值将用于查找链接到该所选项目的 Assets ，然后这些 Assets 将被加载到列表框中。

这听起来很简单，而且我知道我可以使用部分 View ，但仅更新表单上的一个组件似乎有点过分了。

任何

Answer 1

我自己在 MVC 1.0 中做到了这一点。我在第一个下拉列表中使用了 onchange，它使用所选值调用了一个操作。该操作返回 JSON 结果。然后调用该操作的 jQuery 脚本使用 JSON 填充第二个下拉列表。

这些解释是否足够，或者您需要帮助编写 javascript、操作或两者？

在您的 View 中:

<%= this.Select("DDLName").Attr("onchange", "NameOfJavascriptFunction();") %>
<%= this.MultiSelect("ListBoxName") %>

JavaScript 将如下所示:

function NameOfJavascriptFunction() {
    var ddlValue = $("DDLName").val();
    jQuery.ajax({
        type: 'GET',
        datatype: 'json',
        url: '/Controller/Action/' + dValue,
        success: updateMultiSelect
    });
}

function updateMultiSelect(data, status) {
    $("#ListBoxName").html("");
    for(var d in data) {
        $("<option value=\"" + data[d].Value + "\">" + data[d].Name + "</option>">).appendTo("#ListBoxName");
    }
}

最后，操作是这样的(将其放入第一个 javascript 中的 Controller 和操作中):

public ActionResult Action(int id) //use string if the value of your ddl is not an integer
{
    var data = new List<object>();
    var result = new JsonResult();
    this.SomeLogic.ReturnAnEnumerable(id).ToList().ForEach(foo => data.Add(new { Value = foo.ValueProperty, Name = foo.NameProperty }));
    result.Data = data;
    return result;
}

如果您需要更多解释，请随时提出后续问题。