Post a list<data> from Dialog to Controller with JQuery

Hi Again Experts ,
I have a dialog filling up with records which need editing then posted back to a controller. I have the dialog filling no problem but when I edited the records and press save it goes to the controller but has no data with it.
This is the code I'm using in the function
   function updateConfirmedPercentages() {
        //if ($("#ConfirmPercentages").valid()) {
            $.ajax({
                url: "/CAR/SaveConfirmedPercentages/",
                data: $("#ConfirmPercentages").serialize(),
                type: "POST",
                datatype: "html",                
                success: function (result) {
                    alert("Record Updated!");
                },
                error: function (c) {
                    alert(c.text);
                    $('#dialog').dialog().dialog('destroy');
                }
            });
        }

Open in new window

and then when it gets to the controller the "collection" is null
 
  public void SaveConfirmedPercentages(List<MOTOR_Percentage_Extended> collection)
        {
            foreach (MOTOR_PERCENTAGES mp in collection)
            {
                CarRepository ccr = new CarRepository();
                ccr.UpdateConfirmedPercentages(mp);
            }
        }

Open in new window


I know I am passing a formCollection to the Action but then I am looking for a List<t> in the action but I have changed the code that much, I would like to send a list to the Action but I am not sure if that is even possible.
Any words of wisdom would be highly appreciated.
Thanks
Niall GallagherDeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Niall GallagherDeveloperAuthor Commented:
I now have changed the code in the UpdateConfirmedPercentages function and it is sending the right amount of  items across but they are all null. Can somebody tell what I'm doing wrong
function updateConfirmedPercentages() {
        var rowdata = [];
        $('#myResults').find('tr').each(function () {
            myjson = [];
            item = {}
            item["colid"] = $(this).find("#colid").val();
            //item["merchantid"] = $(this).find("#merchantid").val();
            item["year1"] = $(this).find("#year1").val();
            item["year2"] = $(this).find("#year2").val();
            item["year3"] = $(this).find("#year3").val();
            item["year4"] = $(this).find("#year4").val();
            item["year5"] = $(this).find("#year5").val();
            myjson.push(item);
            rowdata.push(myjson);
        });
        jsonstring = JSON.stringify(rowdata);
        $.ajax({
            url: "/Merchant/SaveConfirmedPercentages/",
            data: jsonstring,
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                alert("Record Updated!");
            },
            error: function (c) {
                alert(c.text);
                $('#dialog').dialog().dialog('destroy');
            }
        });
    }

Open in new window


Thanks in advance
0
Ioannis ParaskevopoulosCommented:
Hi,

Could you please post the definition of MOTOR_Percentage_Extended model?

Can you also post what jsonstring has before doing the ajax?

Thanks,
Giannis
0
Niall GallagherDeveloperAuthor Commented:
Giannis,
Thanks for your help.
here is your info also I attached part of a screen shot before jsonstring reaches Ajax
public partial class MOTOR_PERCENTAGES
    {
        public int COL_ID { get; set; }
        public string MOTOR_ID { get; set; }
        public int AGENT_ID { get; set; }
        public Nullable<decimal> FIRST_YEAR { get; set; }
        public Nullable<decimal> SECOND_YEAR { get; set; }
        public Nullable<decimal> THIRD_YEAR { get; set; }
        public Nullable<decimal> FOURTH_YEAR { get; set; }
        public Nullable<decimal> FIFTH_YEAR { get; set; }
        public Nullable<System.DateTime> DATE { get; set; }
        public bool DISABLED { get; set; }
        public Nullable<System.DateTime> DATE_ENTERED { get; set; }
    }

   public class MOTOR_Percentage_Extended: MOTOR_PERCENTAGES
    {    
        public string AgentName { get; set; }
    }

Open in new window

firfox.png
0
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Ioannis ParaskevopoulosCommented:
It is as i suspected.

If you see your screenshot you have something like the following:

[[{
    "colid": "17499",
    "year1": "10.0",
    .....
}],[{
    "colid": "17530",
    "year1": "30.0",
}]]

Open in new window


This indicates that the data that you sent to the server is a big array that contains a set of arrays, each of which contain a single object. So what you sent would be interpreted like a List<List<OfModelType>>. I am saying OfModelType because if you see the properties of each object sent from your post, it will not match to the properties of your model (MOTOR_PERCENTAGES).

In your js code you have:

        var rowdata = [];
        $('#myResults').find('tr').each(function () {
            myjson = [];
            item = {}
            item["colid"] = $(this).find("#colid").val();
            //item["merchantid"] = $(this).find("#merchantid").val();
            item["year1"] = $(this).find("#year1").val();
            item["year2"] = $(this).find("#year2").val();
            item["year3"] = $(this).find("#year3").val();
            item["year4"] = $(this).find("#year4").val();
            item["year5"] = $(this).find("#year5").val();
            myjson.push(item);
            rowdata.push(myjson);
        });

Open in new window


You are defining an array rawdata.

Then for each of the rows in "#myResults" you are defining a new array myjson and a new object item. Again in each iteration you add the item in myjson and myjson in rowdata.

What you need to do is remove myjson from your code and add the items directly to rowdata:

        var rowdata = [];
        $('#myResults').find('tr').each(function () {
            item = {}
            item["colid"] = $(this).find("#colid").val();
            //item["merchantid"] = $(this).find("#merchantid").val();
            item["year1"] = $(this).find("#year1").val();
            item["year2"] = $(this).find("#year2").val();
            item["year3"] = $(this).find("#year3").val();
            item["year4"] = $(this).find("#year4").val();
            item["year5"] = $(this).find("#year5").val();
            rowdata.push(item);
        });

Open in new window


This will solve the issue of creating a proper List<List<OfModelType>> instead of the correct List<OfModelType>.

The second issue you have is that the item objects in your JSON cannot be mapped to your requested model.

You need to change your code to make it so item object have properties that can be mapped to your model. (I am not really sure if it is case sensitive, but i would bet it is).

So your code should look like this:

        var rowdata = [];
        $('#myResults').find('tr').each(function () {
            item = {}
            item["COL_ID"] = $(this).find("#colid").val();
            //item["AGENT_ID"] = $(this).find("#merchantid").val();
            item["FIRST_YEAR"] = $(this).find("#year1").val();
            item["SECOND_YEAR"] = $(this).find("#year2").val();
            item["THIRD_YEAR"] = $(this).find("#year3").val();
            item["FOURTH_YEAR"] = $(this).find("#year4").val();
            item["FIFTH_YEAR"] = $(this).find("#year5").val();
            rowdata.push(item);
        });

Open in new window


Try with this sample and let me know how it goes.

Giannis
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Niall GallagherDeveloperAuthor Commented:
Thank you for helping also your descriptive answer, helps to hopefully not make the same mistake again.
0
Ioannis ParaskevopoulosCommented:
Anytime :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.