2 ajax forms on the same page posting same textbox

Question

Hi All,

Is it possible to post, say like a value in a textbox, to 2 different ajax forms that are on the same page? It doesn't have to be at the same time?

What I'm trying to do is this: I have a search page that searches for customers and displays them on a paged grid. Users can specify up to 5 parameters (5 textboxes) to narrow the search.

On the same page I have an export option. Well since I want all the customers for the search and not just the paged data I need a way to post back to the server for this option passing the same parameters used in the grid.

I'm using a ViewModel which would be nice if I can pass that back to the server rather than the individual search fields that are backed by the view model.

Thanks, rodchar

Answer 1

Since you're doing AJAX requests, we can safely assume that JS is allowed ;)

Thus, use jQuery (or another JS library) to perform the AJAX postbacks, and just post to different urls.

function postTo(url) {
    $.post(
        url,
        $('#theForm').serialize(),
        function(returnData) {
            // do this on success
        }
    );
}

Then, just hook up two different calls to this method to your submit links/buttons:

$(function() {
    $('#searchButton').click(function() {
        postTo('/search/');
    });

    $('#exportButton').click(function() {
        postTo('/export/');
    });
});

EDIT in response to follow-up questions in comments:

Q1) How can the controller parse $('#theForm').serialize() to a ViewModel object?

A1) This is all part of the ASP.NET MVC model binding, and has nothing to do with the jQuery code. all .serialize() does with the form is to line up its names and values in a querystring-like format, so that data on the JSON object will end up something like 'textbox1=first value&textbox2=second value' etc for all form values. This works the same way as a regular POST request, so ASP.NET MVC doesn't need to handle it any differently than a regular, non-AJAX request.

Q2) Can the controller return entity object and can the callback read it?

A2) You can serialize most objects to JSON using return Json(...) in your controller, but returning and entity object (which I assume is then from Entity Framework) is not recommended. It is much better to have a data transfer object (DTO) that only has the necessary properties.
As for the callback, the ASP.NET MVC model binders can recognize any object as long as the input data is correctly formatted.

Answer 2

Use jQuery to post back. You can build the model in javascript from any fields you like and post to any controller / action you like.

        $.post("/Articles/jQueryAddComment",
 { commentText: commentText, id: id, type: commentType }, function(newCommentListHTML) {
        });