Build a view model for c# using jQuery

I have one view model and i’m pass that view model into controller, but one of the model property is a list of other class. so i’m not able to bind it via jQuery.

I have the following view model.

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 class that is used as list type

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

here is my controller method that handle viewmodel data

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

and finally im trying to add data into viewmodel using jQuery, here it is. im use table for add list into Params_List property.

$("#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);
});

here in ParamsList have array of table row elements but i need it into view model format. thanks in advance

Answer

thanks phuzi its work for me 🙂

here I have changed some code block.

$("#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);
});