Post form data and list of strings to controller

Question

I am trying to post a full form and a separate list of strings to my controller. The form binds to the model but the list of strings doesn't bind to the list of strings in the controller and shows as a single string in a list.

var List = "one,two,three";
var dataToPost = $('#Form').serialize() + "&Words=" + JSON.stringify(List);
$.ajax({
   type: "POST",
   url: '/Home/Open/',            
   data: dataToPost,
   dataType: "json",
   success: function () {
      alert('ok');
   },
   error: function () {
      alert('error');
   }
});

Here is my MVC controller action:

[HttpPost]
public IActionResult Open(DataModel Model, List<string> Words)
{
   return View(Model);
}

You're combining two content types - url-encoded and JSON...the model binder can't deal with that. Why not just make this list part of the main model class anyway? — ADyson
– ADyson, Commented Apr 17, 2019 at 22:45
The list content is dynamically built on the client before they exist in the model. This was the only way I found to update the model in this regard as I couldn't see an easy way which would bind to the list in the model unless I am missing something. — dave88
– dave88, Commented Apr 18, 2019 at 6:12
Yes, the main one being: don't use JSON within an otherwise url-encoded set of data. It will just be seen as a string, not a list. The server does not know you made it into JSON. You need to use one data format throughout all the data you send in the request. And you can still have a placeholder property in the model ready to receive it....there's no need for it to be a separate input to the method as far as I can see — ADyson
– ADyson, Commented Apr 18, 2019 at 6:39
@ADyson can you explain how please. Is this a case of 'pushing' the list in Javascript to the serialised form? — dave88
– dave88, Commented Apr 18, 2019 at 8:09
You'd have to convert your JS List array to a URL-encoded string before appending it to the dataToPost. Maybe something like in the answers here stackoverflow.com/questions/26717228/… will help you — ADyson
– ADyson, Commented Apr 18, 2019 at 8:49

hujtomi · Accepted Answer · 2019-04-18 09:12:12Z

4

This works fine for me:

var List = ["one", "two", "three"];
var dataToPost = $('#Form').serializeArray();
List.forEach(function (value, index) {
    dataToPost.push({ name: 'Words[]', value: value });
});

edited Apr 18, 2019 at 9:12

answered Apr 17, 2019 at 21:53

hujtomi

1,6702 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dave88 Over a year ago

I changed the list formatting but the variable still only shows a single element in the controller variable: [0] = "[\"one\",\"two\",\"three\"]"

hujtomi Over a year ago

can you please also share the code of you MVC controller?

dave88 Over a year ago

I have updated the main question with the MVC action code,

hujtomi Over a year ago

Ok, I also update my answer based on your feedback, and now this should bind to a list on Words on server side.

Muhammad Jamshaid · Accepted Answer · 2019-04-18 07:56:17Z

0

Please try the below code i have just modify your AJAX call.

var List = "one,two,three";
    var dataToPost = $('#Form').serialize();
    $.ajax({
        type: "POST",
        url: '/Home/Open/',
        data: { fx: dataToPost, Words: List },
        dataType: "json",
        success: function () {
            alert('ok');
        },
        error: function () {
            alert('error');
        }
    });

change controller code to below

 [HttpPost]
    public IActionResult Open(FormCollection fx, string Words)
    { 
    var lstWords = Words.Split(',').ToList();
        var val = fx["elementname"]//here you can pass input element name to get value
       return View(Model);
    }

edited Apr 18, 2019 at 7:56

answered Apr 18, 2019 at 4:53

Muhammad Jamshaid

12 bronze badges

3 Comments

dave88 Over a year ago

I tried this but the Model becomes null and the List still contains the single string.

Muhammad Jamshaid Over a year ago

What is your DataModel ? if possible change DataModel to formcollection and then extract values from FormCollection.

dave88 Over a year ago

I know this is a simple conversion on the controller end, just wanted to know if it was possible to take advantage automatic binding. Thanks.

Collectives™ on Stack Overflow

Post form data and list of strings to controller

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related