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

我是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包含idname,它们可以分别是值和文本。

我已经在单击按钮期间更新了模型数据,即@Model.Trajectories正在更新。

因此,请帮助我向此下拉列表添加一个项目,该项目位于我的第一个局部视图的第二个局部视图中,而不刷新整个视图。
任何的想法?

参考方案

假设您的方法正在返回对象的集合,然后将选项创建并附加到<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" }

45码