Question

我是asp.net mvc的新手，现在我正在使用dropdownlist来解决这个问题。对不起，如果我问一个愚蠢的问题。

我有一个主视图AbcView，它绑定到一个控制器AbcController，它将AbcModel传递给视图。

我在AbcView中有2个部分视图，这些视图是按下按钮点击的。

在第二个局部视图中，我有这个代码：

@Html.DropDownListFor(model => Model.TrajectoryName, new SelectList(@Model.Trajectories, "Value", "Text"),
                        new { @class = "dropdown-leftandright", id = drpTrajectory" })

在第一个局部视图中，我有一些数据正在添加到数据库中的某个按钮点击如下：

function deleteAction(trajID) {
$.ajax({
    type: "POST",
    url: "/AbcView/DeleteAction",
    data: JSON.stringify({ deleteTraj: trajID }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,
    success: function (data) {
        // I want to update the drpTrajectory dropdownlist here
    },
    error: function (e) {
        return "error";
    }
});        
}

我的问题是我想在此函数内的第二个局部视图中访问drpTrajectory。我想在这个特定的下拉列表中添加一些项目。我尝试使用$('#drpTrajectory')访问下拉列表，并尝试添加项目。但它失败了。

我尝试添加这样的数据

$('#drpTrajectory ').add(val(data.x).text(data.y));

data将成为IEnumerable<SomeClass> dataList和SomeClass包含id和name的成员，分别可以是值和文字。

我已在按钮点击期间更新模型数据，即@Model.Trajectories正在更新。

所以请帮我在这个下拉列表中添加一个项目，该项目位于我的第一个局部视图的第二个局部视图中，而不刷新整个视图。有什么想法吗？

Answer 1

以下是您的解决方案：

 success: function (data) {
    // I want to update the drpTrajectory dropdownlist here
    $.each(data, function (i, item) {
        $('#drpTrajectory').append($('<option>', { 
             value: item.id,
             text : item.name 
        }));
    });
 }

Answer 2

假设您的方法正在返回一组对象，那么要创建一个选项并将其附加到您需要的<select>

var select = $('#drpTrajectory') // cache it
$.ajax({
    type: "POST",
    url: '@Url.Action("DeleteAction", "AbcView")',
    data: { deleteTraj: trajID },
    dataType: "json",
    success: function (data) {
        select.empty() // if you need to remove the existing options
        $.each(data, function (index, item) {
            // Create an option element
            var option = $('<option></option>').val(item.id).text(item.name);
            // append it to the select element
            select.append(option);
        })
    },
    ....
});

旁注

始终使用@Url.Action()确保您的网址正确无误产生
无需stringify() the data and then add the contentType`选项
您的控制器方法应该返回一个匿名的集合只包含你需要的2个属性的对象（没有意义发回不使用的额外数据
```
var data = dataList.Select(x => new { id = x.id, name = x.name });
return Json(data)
```
您对new SelectList(@Model.Trajectories, "Value", "Text")的使用表明属性Trajectories已经存在 IEnumerable<SelectListItem>。如果是这样的话，那就没有了点从原始点创建相同的SelectList，所以只需使用
```
@Html.DropDownListFor(model => Model.TrajectoryName, Model.Trajectories, new { @class = "dropdown-leftandright", id = drpTrajectory" })
```
DropDownListFor()方法已在创建 id="TrajectoryName"所以没有必要覆盖它使用new { id = drpTrajectory" }

将项添加到另一个局部视图中的下拉列表，而不刷新视图

2 个答案: