时间戳

首页 > 解决方案 > 使用 jQuery 为 c# 构建视图模型

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

问题描述

我有一个视图模型，我将该视图模型传递给控制器​​，但模型属性之一是其他类的列表。所以我无法通过 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有表格行元素的数组，但我需要将其转换为视图模型格式。提前致谢

标签： javascriptc#jquery.netasp.net-mvc

解决方案

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

推荐阅读