Client side processing in asp.net mvc 2.0

Question

We are looking on an implementation in which data is processed at client side. Need inputs on how to process the data in JSON or any other type at client side in ASP.Net MVC 2.0.

Details: Inputs are accepted from the user and required to be saved in a list (or any other object) at the client side. Once the user actions are complete, the list object is required to be posted back to the server. This is to avoid round trip to server and once all the data is ready in the list(objects) send it to server for processing

e.g. Accept Item(object) details as item name and item description. For first time add; in the same page store item in the list of object in client side itself. Every time item added, it is saved in list. At the same time list item is displayed on the same page in table format. After adding all the items when user submit data, list of object is posted back.

How can we achieve this in ASP.Net MVC 2.0 in a load balanced environment? Any pointers would be very helpful

Answer 1

what kind of a list are you refering to here? like a bunch of check boxes? and in what format do you want to send the data to your server?

If you're using a bunch of checkboxes just post that data from the form straight to your action. I would suggest you just keep them in an array in javascript or add the values separated by a char like '|' or a ',' in a hidden text field and separate the items on the server side.

Answer 2

ASP.NET MVC 2 ships with the jQuery library, which you could use to perform this rough example...

var dataItems = new Array();

function AddDataItem(myDataItem) {
    dataItems[dataItems.length] = myDataItem;
}

function SendDataItems() {
    var data = "{";
    for (var i = 0; i < dataItems.length; i++) {
        data += ' question' + i + ': "' + dataItems[i] + '",';
    }

    // Remove the trailing comma:
    data = data.substring(0, data.length-1) + "}";

    $.ajax({
        type: 'POST',
        url: 'YourPage.html',
        data: data,
        success: function(response) {
            alert(response);
        },
        dataType: "json"
    });

}