In ASP.NET MVC how best to design/code asynchronous partial postback of <DIV>

Question

On a MVC View (.aspx) enclosed in a Form, there are several controls - grids, textboxes - that display data relating to a subject, a person. The form does not require a submit button because the great majority of data is for viewing only. However, there is a grid (Telerik MVC) that displays comments. A user should be able to add a comment - in a textbox - and that comment should then appear in the grid. Because the comments data comes from two different database sources and are merged in a stored procedure, I'm not able to use inline grid editing.

Question 1.

Is it poossible to asynchronously postback the just contents of the wrapping DIV - i.e. the textbox with the new comment - to a controller without a complete Form postback and page flicker?

Thanks,

Arnold

Answer 1

You could make a button that would "submit" the contents of the text box (the new comment) to a Controller Action by using a jQuery / JavaScript post function that occurs when clicking the button.

The controller action could then store the new comment in the specific database and if you add a "success" method after that occurs you could just call an ajaxRequest() to refresh the grid.

    $("#submitButton").click(function () {

    var comment = $("#commentTextbox").val();

    $.ajax({ type: "POST",
                    url: "/Controller/UpdateCommentsGrid",
                    datatype: "json",
                    traditional: true,
                    data:
                          {
                              'comment': comment                      
                          },
                    success: function () {
                        var grid = $('#YourGridName').data('tGrid');
                        grid.ajaxRequest();
                    }
                });

    });

Hope this helps.

Answer 2

Yes it is possible. Let's take as an example the following form where you want to post only the second DIV:

<form action="/foo" method="post">
    <div id="section1">
        <input type="text" name="item1" />
        <input type="text" name="item2" />
    </div>

    <div id="section2">
        <input type="text" name="item3" />
        <input type="text" name="item4" />
    </div>
</form>

and you could send an AJAX request like this:

var form = $('#section2').wrap('<form/>').parent();
$.post('/foo', form.serialize(), function(result) {
    alert('successfully posted');
});