Question

我有查看会员详情的视图。里面有一个EditorFor元素，代表成员采取的主题。

 @Html.EditorFor(m => m.Subject)

在编辑器模板中有一个Html.DropDownListFor（），它显示所选主题和删除该主题的按钮

我使用的是Html.DropDownListFor元素：

@Html.DropDownListFor(m => m.SubjectID, Enumerable.Empty<SelectListItem>(), "Select Subject", 
new { @class = "form-control subjects" })

第二个参数（source）设置为空，因为我想从AJAX请求加载源代码;如下所示：

$.getJSON(url, function (response) {
         $.each(response.Subjects, function (index, item) { 
                $('.subjects').append($('<option></option>').text(item.Text).val(item.ID));
            });
         // code to fill other dropdowns
    });

目前，在下拉列表填充之前加载了html。因此，所有主题下拉列表的值都设置为默认值＆＃34;选择主题＆＃34;。有办法解决这个问题还是错误的方法？

注意：此页面中有许多下拉菜单。这就是为什么我更喜欢加载AJAX请求并缓存它而不是放入viewModel并为每个请求填充它。

** 编辑 **

在AJAX调用中，该操作返回一个json对象，其中包含在所有页面中使用的下拉列表。此操作使用[Output Cache]进行修饰，以避免频繁访问服务器。更改了$.each中的代码以反映这一点。

Answer 1

如果您的JSON告诉您他们选择了哪个选项，您可以在填充下拉列表后执行以下操作：

$('.form-control.subjects').get(0).selectedIndex = [SELECTED_INDEX];

其中[SELECTED_INDEX]是您要在下拉列表中选择的元素的索引。

Answer 2

您最初可以将属性的值分配给javascript变量，并在附加选项后使用它来设置ajax回调中所选选项的值。

// Store initial value
var selectedId = @Html.Raw(Json.Encode(Model.Subject.SubjectID))
var subjects = $('.subjects'); // cache it

$.getJSON(url, function (response) {
    $.each(response, function (index, item) { 
        subjects.append($('<option></option>').text(item.Text).val(item.ID));
    });
    // Set selected option
    subjects.val(selectedId);
});

然而，不清楚为什么要进行ajax调用，除非您生成的级联下拉列表似乎并非如此。你在做什么基本上是对客户说 - 这里有一些数据，但我忘了发送你需要的东西，所以浪费更多的时间和资源建立另一个连接来获取其余的数据。不管你怎么想，你都不会缓存任何东西。

另一方面，如果您的Subject属性实际上是对象的集合（在这种情况下，它应该是Subjects - 复数），那么使用EditorTemplate的正确方法是在this answer的选项1中进行了解释。

另请注意，如果Subject是一个集合，则需要修改上面的var selectedId = ..代码以生成SubjectID值的数组，例如

var selectedIds = @Html.Raw(Json.Encode(Model.Subject.Select(x => x.SubjectID)))

然后需要在循环中设置每个下拉列表值

$.each(subjects, function(index, item) {
    $(this).val(selectedIds[index]);
});

使用AJAX源填充MVC DropdownList并绑定选定的值

2 个答案: