Passing javascript array from view to controller in ASP.Net MVC 5

Question

I am passing data from view to controller to post to database, I am using a database first approach of the entity framework, so models is set up ok, I have an empty array var formArray = [];. Data from input fields is captured as

var OPDNo = $('[name= OPDNo]').val();
var Re = $('[name= re]').val();
var Le = $('[name= le]').val();

in my view, I have input variables which I have put them into a formData{} as

var formData = {
'OPDNo': OPDNo,
'VAFRE': Re,
'VAFLE': Le
};

The OPDNo, Re, Le are both input fields. I am passing data using Ajax as below:

if (formData != null) {
                $.ajax({

                    url: '/EMR/SaveVisionScreening',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify({ formArray: formData, selectValues: selectValues }),
                    success: function () {
                        showNotification("Record Saved Successfully", "info", true);

                    }
                });
            }

In my controller,

[HttpPost]
        public void SaveVisionScreening(string formArray, string [] selectValues)
        {
//Code...

         }

When I debug, the controller returns a null on string formArray, I have also set ***traditional: true ** but it is still null. I have checked some solutions here but it has not helped me solve it.

SaveVisionScreening(string OPDNo,string Re,string Le) passed this as single parameter and also change in ajax function — User
– User, Commented Feb 26, 2020 at 9:04
Please I would appreciate a snippet code for your suggestion — Nehemiah Limo
– Nehemiah Limo, Commented Feb 26, 2020 at 9:05
I am passing alot of data, more than 30, that is why i opted for an array — Nehemiah Limo
– Nehemiah Limo, Commented Feb 26, 2020 at 9:07
ok then SaveVisionScreening(string [] formArray, string [] selectValues) try this one string [] — User
– User, Commented Feb 26, 2020 at 9:10
@Pravin I have changed to suit your suggestion but it is returning any value, it is still null — Nehemiah Limo
– Nehemiah Limo, Commented Feb 26, 2020 at 9:25

Mark Adesina Omoniyi · Accepted Answer · 2020-02-26 09:53:35Z

0

You can create a class that represents your inputs rather than having to have two input parameters. For example, you could create a class like so:

 public class FormData
 {
    public string OPDNo { get; set; }

    public string VAFRE { get; set; }

    public string VAFLE { get; set; }

    public string[] selectValues { get; set; }
 }

And then modify your JS code like so:

        var selectValues = [];
        selectValues.push('item1');
        selectValues.push('item2');

        var formData = {
            OPDNo: 'OPDNo',
            VAFRE: 'Re',
            VAFLE: 'Le',
            selectValues: selectValues
        };

        $.ajax({

            url: '/home/SaveVisionScreening',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function () {
                showNotification("Record Saved Successfully", "info", true);

            }
        });

Then your controller method like this:

   [HttpPost]
    public void SaveVisionScreening(FormData formData)
    {


    }

See the result below:

answered Feb 26, 2020 at 9:53

Mark Adesina Omoniyi

4491 gold badge7 silver badges22 bronze badges

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

2 Comments

Nehemiah Limo Over a year ago

Thanks for your suggestion, though I should mentioned that I am using database-first approach with entity framework

Mark Adesina Omoniyi Over a year ago

That does not have any relationship with your question. Perhaps you should let me know why you are talking about entity framework here since your question was 'How to pass javascript array from view to controller

Dharman · Accepted Answer · 2020-02-26 22:18:59Z

I finally got a way out, thanks for everyone, I got challenged and I did more search and I found this method, I thought it is important to share so this would do

For my case I had

var formData = {
'OPDNo': OPDNo,
'VAFRE': Re,
'VAFLE': Le
};

declare a variable to hold the object data in json form by

var jsonData = JSON.stringify(formData);

Handle the data using Ajax by doing the following:

 $.ajax({
     url: '/EMR/SaveVisionScreening',
     type: 'POST',
     dataType: 'JSON',
     contentType: 'application/json',
     data: { dataPost:jsonData, select}
     success: function () {
     showNotification("Record Saved Successfully", "info",true);

     }
  });

In your controller, do this

[HttPost]
public ActionResult SaveVisionScreening( string dataPost, string [] selectValues)
{
//Your code for deserializing the json objects goes here and saving data

}

It is good to understand that the data passed is now a json object and not an array, hence the reason you should use a string data type

Collectives™ on Stack Overflow

Passing javascript array from view to controller in ASP.Net MVC 5

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related