How Do I Do A List Of Items In Jquery And Get It On Server Side?

I'm trying to make a list of items (telephones and dependents for a customer), for example, the user could include some number phones and remove others (maybe edit them if it is po

Solution 1:

Serialise the data into a format like JSON and then send it to the server as a string.

Solution 2:

When I had to learn it, these posts were extremely useful.

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

You can serialise a javascript array into a string that ASP.Net can deserialise.

There is a standard called JSON which is good, as it adds nearly no noise on the actual data (like xml does, incrementing a LOT the amount of data to transfer).

You can then use the $.ajax jquery method to send this data to a WebMethod you created (see links) and get an understandable response back.

EDIT: If you were already inside this stuff, you can simply use the JSON.stringify() method, passing the object/array to serialise in it.

Solution 3:

I keep this example around to get me started, just put the proper stuff in the proper files and edit it to match what you are doing:

/* in this case I am using */

   available at: http://www.json.org/js.htmlfunctionjsonObject()
{
};
var phoneListObject = newjsonObject();

functionSaveJsonObject()
{
    phoneListObject.Control = newjsonObject();
    phoneListObject.Control.CustomerId = $("#CustomerId").val();
    phoneListObject.Control.CustomerName = $("#CustomerName").val();
    phoneListObject.ListBody.PhonesBlock = newjsonObject();
    phoneListObject.ListBody.PhonesBlock.Phone = newArray();
    $('#PhonesBlock .Phone').each(function(myindex)
    {
        phoneListObject.ListBody.PhonesBlock.Phone[myindex].PhoneNumber = $(".PhoneNumber input", this).val();
        phoneListObject.ListBody.PhonesBlock.Phone[myindex].PhoneName = $(".PhoneName input", this).val();
     });
 };

 $(function()
{
    functionSaveCurrentList()
    {
        SaveJsonObject();
        var currentSet = phoneListObject;
        var formData = { FormData: currentSet };
        phoneListJSON = JSON.stringify(formData);
        varFormData = "{ FormData:" + JSON.stringify(phoneListJSON) + "}";
        SavePhoneListData(FormData);
    };
    functionSavePhoneListData(phonesData)
    {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: phonesData,
            dataFilter: function(data)
            {
                var msg;
                if ((typeof (JSON) !== 'undefined') &&
        (typeof (JSON.parse) === 'function'))
                    msg = JSON.parse(data);
                else
                    msg = eval('(' + data + ')');
                if (msg.hasOwnProperty('d'))
                    return msg.d;
                elsereturn msg;
            },
            url: "../../WebServices/ManagePhones.asmx/SaveJson",
            success: function(msg)
            {
                SaveSuccess(msg);
            },
            complete: function(xhr, textresponse)
            {
                var err = eval("(" + xhr.responseText + ")");
            },
            error: function(msg)
            {
            },
            failure: function(msg)
            {
            }
        });
    };
    $('#btnSave').click(function()
    {
        SaveCurrentList();
    });
});

/* json data snip */

{"FormData":{"Control":{"CustomerId":"12345y6","CustomerName":"Joe Customer"},"PhonesBlock":{"Phone":[{"PhoneNumber":"234-233-2322","PhoneName":"son harry"},{"PhoneNumber":"234-233-2323","PhoneName":"son frank"},{"PhoneNumber":"234-233-2320","PhoneName":"momk"}]}}}

/XML of the form data:/

<FormData><Control><CustomerId>12345y6</CustomerId><CustomerName>Joe Customer</CustomerName></Control><PhonesBlock><Phone><PhoneNumber>234-233-2322</PhoneNumber><PhoneName>son harry</PhoneName></Phone><Phone><PhoneNumber>234-233-2323</PhoneNumber><PhoneName>son frank</PhoneName></Phone><Phone><PhoneNumber>234-233-2321</PhoneNumber><PhoneName>momk</PhoneName></Phone></PhonesBlock></FormData>

/* form layout snip */

<divclass="control"><divclass="customer"><inputtypeof="text"id="CutomerId" /><inputtypeof="text"id="CutomerName" /></div><divclass="phoneslist"id="PhonesBlock"><divclass="Phone"><inputtypeof="text"class="PhoneNumber" /><inputtypeof="text"class="PhoneName" /></div><divclass="Phone"><inputtypeof="text"class="PhoneNumber" /><inputtypeof="text"class="PhoneName" /></div><divclass="Phone"><inputtypeof="text"class="PhoneNumber" /><inputtypeof="text"class="PhoneName" /></div></div></div><inputid="buttonSave"class="myButton"type="button"value="Save" />

signature of the web service method:

[WebMethod(EnableSession = true)] public string SaveJson(string FormData) { }