Pass an array via ajax

Question

When I click to button: -Iterate all tr and collect all its input's name to a array(this has been done) -I also get data from two text which names are input and trigger -Send all of them(one array and two text) via ajax to asp.net.cs(not working)

    var senders = [];
    $("#btn_input_kaydet").click(function () {

        var input = $("#dd_input").text();
        var trigger = $("#dd_input_trigger").text();


        $("#dynamic_input_field tr").each(function (i) {
            senders[i] = $(this).find('td input').attr('name'); 
        });



        $.ajax({
            type: "POST",
            url: "senaryo.aspx/addscnerio",
            data: { "arr": senders, "input": input, "trigger": trigger},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert("successful")
            },
            traditional : true
        });

    });



    [WebMethod]
    public static void addscnerio(List<String> values, string name, string trigger)
    {

    }

Mukesh Modhvadiya · Accepted Answer · 2017-12-26 09:27:12Z

1

Here you are passing your data as object

data : { "arr": senders, "input": input, "trigger": trigger}

So you should use appropriate class as parameter that reflects the object that you pass as below

public class InputData
{
    public string name { get; set; }
    public string trigger { get; set; }
    public List<String> values { get; set; }
}

And change your webmethod syntax with class as parameter

[WebMethod]
public static void addscnerio(InputData data)

answered Dec 26, 2017 at 9:27

Mukesh Modhvadiya

2,1982 gold badges28 silver badges32 bronze badges

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

Comments

Sagar Upadhyay · Accepted Answer · 2017-12-29 06:40:41Z

According to me you can do this 2 way.

Code 1

In your *.aspx file or *.js file add below code.

var senders = [];
$("#btn_input_kaydet").click(function () {

    var input = $("#dd_input").text();
    var trigger = $("#dd_input_trigger").text();


    $("#dynamic_input_field tr").each(function (i) {
        senders.push($(this).find('td input').attr('name'));
    });

    $.ajax({
        type: "POST",
        url: "yourpage.aspx/method",
        data: '{array: ' + JSON.stringify(senders) + ', input: "' + input + '", trigger: "' + trigger + '" }',
        traditional: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            senders = []; // Reset this so on Next Click you don't get same data
            // TODO: Success Handler
        },
        error: function () {
            senders = []; // Reset this so on Next Click you don't get same data
            // TODO: Fail Handler
        }
    });

});

On your server side code file use below

[WebMethod]
public static void method(List<string> array, string input, string trigger)
{
    // TODO: Further Action
}

In this Asp.Net deserialize JSON to string LIST Automatically. Here, is good explanation for JSON Serialization and Deserialization in ASP.NET.

Code 2

I used to do with this way when I was not having knowledge of JSON Serialization and Deserialization in ASP.NET

In your *.aspx file or *.js file add below code.

var senders = "";
$("#btn_input_kaydet").click(function () {

    var input = $("#dd_input").text();
    var trigger = $("#dd_input_trigger").text();


    $("#dynamic_input_field tr").each(function (i) {
        senders += ","+$(this).find('td input').attr('name');
    });

    $.ajax({
        type: "POST",
        url: "yourpage.aspx/method",
        data: '{array: ' + senders + ', input: "' + input + '", trigger: "' + trigger + '" }',
        traditional: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            // TODO: Success Handler
        },
        error: function () {
            // TODO: Fail Handler
        }
    });
});

On your server side code file use below

[WebMethod]
public static void method(string strArray, string input, string trigger)
{
    string[] array = strArray.Trim(",").Split(',');
    // TODO: Further Action
}

In both way you can achieve your goal.

Habib Ur Rehman · Accepted Answer · 2017-12-26 09:22:29Z

0

Assuming the id of your table = dynamic_input_field you can do the following

var senders= [];
var headers = [];
$('#dynamic_input_field th').each(function(index, item) {
    headers[index] = $(item).html();
});
$("#dynamic_input_field tr").has('td').each(function() {
    var arrayItem = {};
    $('td', $(this)).each(function(index, item) {
        arrayItem[headers[index]] = $(item).html();
    });
    senders.push(arrayItem);
});

then send senders in your ajax

answered Dec 26, 2017 at 9:22

Habib Ur Rehman

19810 bronze badges

Comments

user9018881 · Accepted Answer · 2017-12-27 07:19:37Z

I solve the problem.To help the others I am posting the working code:

var senders = [];
$("#btn_input_kaydet").click(function () {

    var input = $("#dd_input").text();
    var trigger = $("#dd_input_trigger").text();


    $("#dynamic_input_field tr").each(function (i) {
        senders[i] = $(this).find('td input').attr('name'); 
    });

    $.ajax({
        type: "POST",
        url: "senaryo.aspx/Save_Scenario",
        data: '{arr: ' + JSON.stringify(senders) + ', input: "' + input + '", trigger: "' + trigger + '" }',
        traditional: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert("basarili");
        },
        error: function () {
            alert("error");
        }
    });

});




    [WebMethod]
    public static void Save_Scenario(List<string> arr, string input, string trigger)
    {

    }

Mukesh Modhvadiya · Accepted Answer · 2018-01-04 06:07:17Z

0

var subject= new Array();
subject[0] = ‘PHP’;
subject[1] = ‘ASP.net’;


$.ajax({
type: "POST",
url: "subject.aspx/GetSubject",
data: "{‘subject’:['PHP','ASP.net']}",

edited Jan 4, 2018 at 6:07

Mukesh Modhvadiya

2,1982 gold badges28 silver badges32 bronze badges

answered Dec 26, 2017 at 13:01

user4468710

2 Comments

Aleks Andreev Over a year ago

Please consider add some explanation to your answer

Rosário P. Fernandes Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Collectives™ on Stack Overflow

Pass an array via ajax

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related