javascript - 如何将选择列表选项发布到 MVC 操作方法？

Question

我正在尝试将选择列表中的所有项目提交给 MVC 3 操作方法。这是我的操作方法:

[HttpPost]
public ActionResult SaveList(int SettingID, List<SelectListItem> items)
{
    // blah...
}

这是我尝试发送数据的简化版本:

var items = $("#listItems > option").map(function ()
{
    var arr = [];
    arr.push({ Value: $(this).val(), Text: $(this).text() });
    return arr;
}).get();

$.ajax({
    type: "POST",
    url: "/CompanyAdmin/SaveSettingList/",
    dataType: 'json',
    data: { items: items, SettingID: SettingID},
    success: function (msg)
    {
        alert(msg);
    }
});

设置 ID 参数已正确填充。 List 中填充了正确的 AMOUNT 项目，但 Text 和 Value 属性都显示为 null。

我是否必须为 jQuery 安装一个 JSON 插件才能提交一组项目？

编辑 1:

按照 Darin Dimitrov 的建议，我使用了 stringify 方法并将 SettingID 和选项列表作为 JSON 发送。

起初这并没有命中我的 Action 方法，所以我将方法更改为:

public ActionResult SaveList(SaveSettingListModel json)
{}

像这样定义参数:(以匹配 JSON)

public class SaveSettingListModel
{
    public int SettingID { get; set; }
    public List<SelectListItem> items { get; set; }
}

现在这会触发正确的方法。 但是，服务器端json的内容是SettingID = 0(我在客户端验证是2)，items = null。

Answer 1

尝试将它们作为 JSON 发布。

首先定义一个 View 模型:

public class MyViewModel
{
    public int SettingID { get; set; }
    public List<SelectListItem> Items { get; set; }
}

然后修改您的 Controller 操作以将此 View 模型作为参数:

[HttpPost]
public ActionResult SaveList(MyViewModel model)
{
    // blah...
}

最后在你的脚本中:

var items = $('#listItems > option').map(function ()
{
    var arr = [];
    arr.push({ value: $(this).val(), text: $(this).text() });
    return arr;
}).get();

$.ajax({
    type: 'POST',
    url: '/CompanyAdmin/SaveSettingList/', // <-- use an URL Helper to generate this url instead of hardcoding it or you will cry when you deploy your application into a virtual directory
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ 
        items: items, 
        settingID: SettingID 
    }),
    success: function (msg) {
        alert(msg);
    }
});

如果你想使用 JSON.stringify旧版浏览器中的方法本身不受支持，请确保包含 json2.js脚本。

综上所述，我知道您将如何处理此 Controller 操作和此 AJAX 请求，我必须说我不会这样做(在请求中发送选项)。我的意思是为了呈现这个 View ，你从某个地方获取了这个列表？大概是一个数据存储？所以不要与 HTML <form> 作斗争(提交时仅将下拉列表的选定值发送到服务器)为什么不在您的 SaveList 中使用这个完全相同的数据存储？采取行动以获取那些完全相同的选项？这将避免您往返它们并节省带宽。别担心数据库很快。如果它们不是您的情况，只需缓存昂贵查询的结果。

如果这些选项在客户端可能发生变化并且您想获取新值，请完全忽略我之前的评论。