"Creating an array in JavaScript and passing it to a C# MVC controller: a step-by-step guide

Question

"Creating an array in JavaScript and passing it to a C# MVC controller: a step-by-step guide

Is it possible to create an array in jQuery/JavaScript and then send it to my C# controller?

I have a list of employees from a select multiple, which I can display like this:

    <div class="demo">
        <select style="display:none" id="liste" multiple="" placeholder="Select">
            @foreach (var employe in ViewBag.Employes)
            {
                <option value="@employe.ID_Employe">@employe.Name</option>
            }
        </select>
    </div>

    <a class="btn btn-default" id="check" href="#">Next</a>

Here is my script :

        $('#check').on('click', function () {
            $("#liste").find("option:selected").each(function () { alert($(this).text()); });
        });

To send the data, I use the following code :

        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/MyAjaxRoute',
            data: { arraytosend: arraybuildInJS },
            success: function (response) {
                if (response.success) {
                    alert('yes');
                }
        },

Could you please explain to me how to create an array in JavaScript and pass it to a C# MVC controller?

javascript c#json asp.net-mvc

Answer 1

Answer №1

To start, establish an Action within your Controller:

public JsonResult HandleArrayData(List<string> arrayData)
{
   if(arrayData.Count == 0) return Json(new {success = false});

   //perform actions with arrayData
   return Json(new {success = true});
}

Next, in your JavaScript code, you can implement the following logic:

var myArray = [];
$('#check').on('click', function () {

$("#liste").find("option:selected").each(function () {
    myArray.push($(this).text)
});

$.ajax({
     type: 'POST',
     dataType: 'json',
     url: '@Url.Action("HandleArrayData", "MyController")',
     data: { arrayData: myArray },
     success: function (response) {
       if (response.success) {
          myArray = [];//clear the array, alternatively use myArray.length = 0
          alert('Success!');
       }          
     }
   });
});

Answer 2

To start, establish an Action within your Controller:

public JsonResult HandleArrayData(List<string> arrayData)
{
   if(arrayData.Count == 0) return Json(new {success = false});

   //perform actions with arrayData
   return Json(new {success = true});
}

Next, in your JavaScript code, you can implement the following logic:

var myArray = [];
$('#check').on('click', function () {

$("#liste").find("option:selected").each(function () {
    myArray.push($(this).text)
});

$.ajax({
     type: 'POST',
     dataType: 'json',
     url: '@Url.Action("HandleArrayData", "MyController")',
     data: { arrayData: myArray },
     success: function (response) {
       if (response.success) {
          myArray = [];//clear the array, alternatively use myArray.length = 0
          alert('Success!');
       }          
     }
   });
});

Answer 3

Answer №2

It seems like using the push method is what you need.

var arraybuildInJS = [];
$('#check').on('click', function () {
            $("#liste").find("option:selected").each(function () { arraybuildInJS.push($(this).text()); });
        });

Keep in mind that your controller should be expecting an Enumerable of strings. If it's not coded yet, make sure the objects match up correctly.

Answer 4

It seems like using the push method is what you need.

var arraybuildInJS = [];
$('#check').on('click', function () {
            $("#liste").find("option:selected").each(function () { arraybuildInJS.push($(this).text()); });
        });

Keep in mind that your controller should be expecting an Enumerable of strings. If it's not coded yet, make sure the objects match up correctly.

"Creating an array in JavaScript and passing it to a C# MVC controller: a step-by-step guide

Answer №1

Answer №2

Similar questions

Having trouble with the image compressor not being imported correctly in Next.js?

Parsing a child class from a JSON API to extract the data

Can a fixed position element disregard its parent?

Experiment with using webdriverio and javascript to select checkboxes

Guide to converting JSON with an array into a presenter using a collection

Upload Request Failure Due to Drag and Drop Functionality in HTML5

Error in regular expression format

Do not reload the page after a successful ajax request

Can the page URL be reloaded without modifying the request URL?

Asynchronous requests in Node.js within an Array.forEach loop not finishing execution prior to writing a JSON file

Concerns regarding rendering HTML and drawing in Node.js

triggering controller on click event in JSP

Replicate the anchor's functionality (opening in a new window when 'ctl' is pressed) when submitting a form

Handling session timeout in asp.net on disconnection

A guide on dynamically integrating CKEditor into Vue.js 3, exclusively for the client side

Displaying minute scale from right to left using jQuery technology

AngularJS - Establishing communication between controller and view

Can you tell me the JSONPATH symbol that signifies a mismatch with a regular expression?

"Utilizing the power of Node.js to perform SQL queries with

What is the best way to determine which watchers are triggered in Vue.js?