Pass array of strings via jquery post to ASP.net

Question

What I have is a table that holds 3 input elements, They represent order, name, value. The user can add a new row of 3 inputs to add as many of these sets of data as they want.

To accomplish the dynamically adding in of inputs I use jquery's clone method.

That works fine and I am able to iterate through each and grab the values, however the real pain I am having is that when the user has entered in all of the data I want to pass that data to an asp.net page through jQuery's post method. How do I go about passing an array of strings so that I send this format to the asp.net page, and when I've done that how do i parse the data on the asp.net side of it.

Desired Data Format:

jquery Code so far:

$("#saveBtn").click(function (e) {

        e.preventDefault();

        $("#addPanel").slideUp(300);

        //Perform Save Operation
        var saveString = "";

        $("#addTable tbody>tr").each(function () {

            var o = $(this).find(".hsaorder").val();
            var n = $(this).find(".hsaname").val();
            var l = $(this).find(".hsalink").val();

            saveString += n + "|" + l + "|" + o ;


        });

        ////// Create Array here or some other method?


        $.post("/modules/H/Modify.aspx", { OBVIOUSLY SOMETHING GOES HERE});

        // Remove all but top table element to return to original state
        $("#addTable tbody>tr").not("#addTable tbody>tr:first").remove();


    });

NOt at all, just not familiar with using it in jquery ajax and more importantly interacting with it in C#(.Net) — Seth Duncan
– Seth Duncan, Commented Nov 23, 2010 at 19:44

Genius · Accepted Answer · 2010-11-23 20:03:38Z

2

Seth, these concatenation like "|" + something + "|" is really not a good practice. Try to avoid it, and you'll save a lot of time in further, I promise.

See how I'm doing this:

First, on client side put everything to a true JSON-string, like this:

    var saveAr = [];

    $("#addTable tbody>tr").each(function () {

        var o = $(this).find(".hsaorder").val();
        var n = $(this).find(".hsaname").val();
        var l = $(this).find(".hsalink").val();

        saveAr.push({ order: o, name: n, link: l });
    });

    $.post("/modules/H/Modify.aspx", { changes: JSON.stringify(saveAr)});

Then you need to somehow parse it on the server side. Best to do this is to install JSON.Net dll (just google it), and then parse it:

var rows = JArray.Parse(Request["changes"]);
foreach (var row in rows) {
   var order = row.Value<string>["order"];
   var name = row.Value<string>["name"];
   var link = row.Value<string>["link"];

   // do something with it
}

You may have problems with JSON.stringify in old versions of IE, but it can be fixed by applying this patch: https://github.com/douglascrockford/JSON-js

Warning: I not compiled the code above, so don't 100% trust to this, just take an idea.

answered Nov 23, 2010 at 20:03

Genius

1,77214 silver badges12 bronze badges

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

2 Comments

Seth Duncan Over a year ago

Would love to use this but I don't seem to see a JArray object int he json.net library i have added

Seth Duncan Over a year ago

Took some work figuring out how to use JArray and how to covert to values. But this is definitely what I was looking for.

Jason Benson · Accepted Answer · 2010-11-23 19:33:23Z

    var saveArray = [];
    $("#addTable tbody>tr").each(function () {

        var o = $(this).find(".hsaorder").val();
        var n = $(this).find(".hsaname").val();
        var l = $(this).find(".hsalink").val();

        saveArray.push("|" + l + "|" + o);


    });

    var yourPost = {'save': saveArray.join(',')};
    $.post("/modules/H/Modify.aspx", yourPost, function(data){
       //your server response is in data;
    });

To retrieve your data on the other side, split the post by first commas then your pipe delimiter. (Of course if you expect commas in your data, choose a different delimiter in the join.)

I don't use aspx often but here's how I'd probably go about retrieving and splitting the data that was posted. (vb) To retrieve the "Columns" within the rows, just do the same thing except now with your pipe delimiter.

//how to retrieve and then split the rows out
Dim strData As String = Request.Post("save")
Dim separator() As Char = New Char() {","}
Dim rows() As String = strData.Split(separator)

For Each str As String In rows
    Response.Write(str)
Next

Ken Redler · Accepted Answer · 2010-11-23 19:49:54Z

1

If you really need to roll your own format instead of just serializing the form, you can try something like this (replacing your code starting at //Perform Save Operation):

var saveArray = $('#foo tr').map(function(i, e) {
  var result = [];
  result.push($(e).find('.hsaorder').val());
  result.push($(e).find('.hsaname').val());
  result.push($(e).find('.hsalink').val());
  return [result.join('|')];
}).get();

...and then:

$.post("/modules/H/Modify.aspx", { data: saveArray } );

Then just unravel and process the data in Modify.aspx.

answered Nov 23, 2010 at 19:49

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

1 Comment

Seth Duncan Over a year ago

Definitely a nice alternative to each.

Ali Tarhini · Accepted Answer · 2010-11-23 19:38:32Z

0

a very handful way which minimizes your coding is to serialize the data using json and deserialize it i asp.net page. you'll have the data already parsed for you.

answered Nov 23, 2010 at 19:38

Ali Tarhini

5,3686 gold badges45 silver badges66 bronze badges

Collectives™ on Stack Overflow

Pass array of strings via jquery post to ASP.net

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related