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

Question

我是 asp.net mvc 的新手，我现在正面临下拉列表的这个问题。 对不起，如果我问了一个愚蠢的问题。

我有一个主视图 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

假设您的方法返回一个对象集合，然后创建一个选项并将其附加到您需要的<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);
        })
    },
    ....
});

附注

1. 始终使用@Url.Action() 以确保您的网址正确无误 生成
2. 不需要stringify() the data and then add the contentType`选项

3. 您的控制器方法应该返回一个匿名集合 仅包含您需要的 2 个属性的对象（没有意义 发回未使用的额外数据）

   var data = dataList.Select(x => new { id = x.id, name = x.name });
   return Json(data)
   

4. 您对new SelectList(@Model.Trajectories, "Value", "Text")的使用 表明属性Trajectories 已经 IEnumerable<SelectListItem>。如果是这样的话，就没有 点从原始创建一个相同的SelectList，所以 只需使用

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

5. DropDownListFor() 方法已经在创建 id="TrajectoryName" 所以没有真正需要覆盖它 使用new { id = drpTrajectory" }

Answer 2

这是您的解决方案：

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