1

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

8
  • One thing I noticed is that you have ToolsViewModel in public ActionResult Manage(ToolsViewModel toolsViewModel) but your class is called ToolsAddViewModel Commented Nov 4, 2020 at 13:36
  • 1
    Shouldn't ParamsList.push(values); be ParamsList.push(SingleParams); and console.log(values); be console.log(SingleParams); ? I don't think this is the problem though. SingleParams should really be an object with properties: Params_ID, Params_CSS_Attribute and Params_Priority to match your server side model. Commented Nov 4, 2020 at 13:42
  • @CarstenLøvboAndersen you are right because I have used inheritance so I have just inherited that from another class. now i'm edit that. Commented Nov 4, 2020 at 13:45
  • 1
    You haven't shown us the accompanying HTML but I hope that the inputs have some property/attribute that would allow you to differentiate between the fields. Then you can declare SingleParams as an object => var SingleParams = { Params_ID = null, Params_CSS_Attribute = null, Params_Priority = null} then you can assign individual values from the inputs. Commented Nov 4, 2020 at 13:55
  • 1
    Please provide a minimal reproducible example, in the question itself, including the rendered HTML on which the script runs and and logs (as text). Commented Nov 4, 2020 at 14:23

1 Answer 1

1

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);
});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.