使用 jQuery 为 c# 构建视图模型答案

【问题标题】：Build a view model for c# using jQuery使用 jQuery 为 c# 构建视图模型
【发布时间】：2021-02-17 05:01:19
【问题描述】：

我有一个视图模型，我将该视图模型传递给控制器，但模型属性之一是其他类的列表。所以我无法通过 jQuery 绑定它。

我有以下视图模型。

public class ToolsAddViewModel
{
        public string Tools_Name { get; set; }
        public string Tools_Desc { get; set; }
        public int Category_ID { get; set; }
        public List<ToolsParamsBlockViewModel> Params_List { get; set; }
}

用作列表类型的ToolsParamsBlockViewModel类

public class ToolsParamsBlockViewModel
{
        public int Params_ID { get; set; }
        public string Params_CSS_Attribute { get; set; }
        public int Params_Priority { get; set; }
}

这是我处理视图模型数据的控制器方法

[HttpPost]
public ActionResult Manage(ToolsAddViewModel toolsAddViewModel)
{
    //insert viewmodel data into database 
    return RedirectToAction("Index", "Tools");
}

最后我尝试使用 jQuery 将数据添加到视图模型中，就是这样。我使用表格将列表添加到Params_List 属性中。

$("#btnSave").on("click", function () {
        var ParamsList = [];
        $('#paramsBlockTable tbody > tr').each(function () {
                var SingleParams = [];
                $(this).find("input,select").each(function () {
                    SingleParams.push($(this).val());
                    console.log(values);
                });
                ParamsList.push(values);
        });
        var ToolsModel = {
                "ID": $("#ID").val(),
                "Tools_Name": $("#Tools_Name").val(),
                "Category_ID": $("#Category_ID").val(),
                "Params_List": ParamsList,
                "ScriptFiles_IDs": $("#ScriptFiles_IDs").val(),
                "Tools_SEO_Keyword": $("#Tools_SEO_Keyword").val(),
                "Tools_Desc": $("#Tools_Desc").val(),
        }
        console.log(ToolsModel);
});

在ParamsList 中有一组表格行元素，但我需要将其转换为视图模型格式。提前谢谢

【问题讨论】：

我注意到的一件事是你在public ActionResult Manage(ToolsViewModel toolsViewModel) 中有ToolsViewModel ，但你的班级被称为ToolsAddViewModel
不应该 ParamsList.push(values); 是 ParamsList.push(SingleParams); 和 console.log(values); 是 console.log(SingleParams); 吗？我不认为这是问题所在。 SingleParams 应该是一个具有属性的对象：Params_ID、Params_CSS_Attribute 和 Params_Priority 以匹配您的服务器端模型。
@CarstenLøvboAndersen 你是对的，因为我使用了继承，所以我刚刚从另一个类继承了它。现在我正在编辑它。
您没有向我们展示随附的 HTML，但我希望输入具有一些属性/属性，可以让您区分字段。然后您可以将 SingleParams 声明为对象 => var SingleParams = { Params_ID = null, Params_CSS_Attribute = null, Params_Priority = null} 然后您可以从输入中分配单个值。
请在问题本身中提供minimal reproducible example，包括脚本运行和记录的渲染 HTML（作为文本）。

标签： javascript c# jquery .net asp.net-mvc

【解决方案1】：

感谢 phuzi 为我工作 :)

这里我更改了一些代码块。

$("#btnSave").on("click", function () {
    var ParamsList = [];
    $('#paramsBlockTable tbody > tr').each(function () {
        let SingleParams = {
            Params_ID: $(this).find(".params-id").val(),
            Params_CSS_Attribute: $(this).find(".params-attribute").val(),
            Params_Priority: $(this).find(".params-priority").val()
        }
        ParamsList.push(SingleParams);
    });

    var ToolsModel = {
        "ID": $("#ID").val(),
        "Tools_Name": $("#Tools_Name").val(),
        "Category_ID": $("#Category_ID").val(),
        "Params_List": ParamsList,
        "ScriptFiles_IDs": $("#ScriptFiles_IDs").val(),
        "Tools_SEO_Keyword": $("#Tools_SEO_Keyword").val(),
        "Tools_Desc": $("#Tools_Desc").val(),
    }
    console.log(ToolsModel);
});

【讨论】：