Transmit information to the controller using jQuery in a C# MVC environment

Question

Transmit information to the controller using jQuery in a C# MVC environment

Here is my jQuery script code snippet. The script works perfectly and stores the data array/object in a variable called dataBLL.

var dataBLL = [];
$('#mytable tr').each(function (i) {

dataBLL.push({

id: $(this).find('td:eq(0)').text(),
ctype: $(this).find('td:eq(1)').text(),
cpath: $(this).find('td:eq(2)').text(),
ckey: $(this).find('td:eq(3)').text(),
ckey: $(this).find('td:eq(4) input:frist').val(),

});
  $.ajax ({
             url:"User/BllBtn",
             type:"POST",
             data:"dataBll="JSON.stringify(dataBLL);
             dataType: "json",
             success: function (e) {

                alert("sucess");
            }})

However, I am facing an issue with sending this object/Array to my controller in order to utilize its data and iterate through each row entry.

This is the signature of my controller:

[HttpPost]
public ActionResutl BllBtn(List<string> dataBll)
{

}

I would appreciate guidance on how to convert this object into a list so that I can easily loop through it.

javascript c#json ajax asp.net-mvc

Answer 1

Answer №1

Your browser console has likely already informed you of a syntax error and invalid JSON being produced.

Try using data: { "dataBll": dataBLL }

as a solution, or

data: JSON.stringify({ "dataBll": dataBLL })

if necessary. Additionally, include

contentType: 'application/json; charset=UTF-8'

in the ajax call for another possible fix.

The next issue is attempting to accept List<string> in your method when dataBll is actually a complex object with properties such as:

id, ctype, cpath, ckey

You cannot define ckey twice within the same object, and your JSON object may not align correctly with the C# method type. Consider creating a new class, like so:

public class myNewType
{
  public string id {get; set; }
  public string ctype {get; set; }
  public string cpath {get; set; }
  public string ckey {get; set; }
}

and then accept List<myNewType> as the parameter for the method:

public ActionResult BllBtn(List<myNewType> dataBll)

Answer 2

Your browser console has likely already informed you of a syntax error and invalid JSON being produced.

Try using data: { "dataBll": dataBLL }

as a solution, or

data: JSON.stringify({ "dataBll": dataBLL })

if necessary. Additionally, include

contentType: 'application/json; charset=UTF-8'

in the ajax call for another possible fix.

The next issue is attempting to accept List<string> in your method when dataBll is actually a complex object with properties such as:

id, ctype, cpath, ckey

You cannot define ckey twice within the same object, and your JSON object may not align correctly with the C# method type. Consider creating a new class, like so:

public class myNewType
{
  public string id {get; set; }
  public string ctype {get; set; }
  public string cpath {get; set; }
  public string ckey {get; set; }
}

and then accept List<myNewType> as the parameter for the method:

public ActionResult BllBtn(List<myNewType> dataBll)

Transmit information to the controller using jQuery in a C# MVC environment

Answer №1

Similar questions

Slide in parts gradually by scrolling up and down, avoiding sudden appearance all at once

What is the best way to retrieve the second to last element in a list

What is the best way to ensure a cron job executing a Node.js script can access variables stored in an .env file?

Troubleshooting: Issues with AngularJS $route.reload() functionality

Remove model associated with tab on close in the PrimeFaces TabView

Step-by-step guide on achieving a radiant glow effect using React Native

Using Node.js and Express to upload a file seamlessly without needing to refresh the page

Increase the space below the footer on the Facebook page to allow for an

Trouble with using jQuery's find function when dealing with HTML responses from an AJAX call

troubleshooting problems with feathers.JS using the npm start command

Create and save data to a local file using Angular service

What could be the reason for the "category empty" message appearing at the first index after clicking on the add

React Native is facing difficulty in fetching pagination data which is causing rendering errors

Unable to identify the element ID for the jQuery append operation

Is there a way to prevent this JavaScript code from deleting the initial row of my table?

Attempting to showcase JSON response within an HTML page using JavaScript

Leveraging AngularJS and ng-map to incorporate interactive dynamic heatmap displays

Stop the sudden jump when following a hashed link using jQuery

Adding a context menu to a Leaflet map

What is the process of matching a server response with the appropriate pending AJAX query?