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

Posted 2023-05-09

【中文标题】使用 jQuery 为 c# 构建视图模型

【英文标题】：Build a view model for c# using jQuery

【发布时间】：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（作为文本）。

【参考方案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);
);