CODEWITHSUNDEEP
c#asp.netjquery
Seth Duncan
Seth Duncan

Reputation: 1255

Pass array of strings via jquery post to ASP.net

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:

["Name|Link|Order", "Name|Link|Order", "Name|Link|Order"]

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();


    });

Upvotes: 2

Views: 4021

Answers (4)

Genius
Genius

Reputation: 1782

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.

Upvotes: 2

Ken Redler
Ken Redler

Reputation: 23943

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.

Upvotes: 1

Ali Tarhini
Ali Tarhini

Reputation: 5358

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.

Upvotes: 0

Jason Benson
Jason Benson

Reputation: 3399

    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

Upvotes: 1

Related Questions