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

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

Rion Williams · Accepted Answer · 2010-12-30T15:54:58.330

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.

edited Dec 30 '10 at 15:54

answered Dec 30 '10 at 14:55

Rion Williams

74,820
37
200
327

Hi Rionmonster. Thank you for the swift response!! I'm getting an error after at "}," after "comment,": Expected identifier or string. Also, am I right in thinking that 'tGrid' refers to the comment being added after "data:"? – Arnold Dec 30 '10 at 15:46
Hi Arnold - I accidently left a ',' following the comment, which was causing the error. The .data('tGrid') section of the code is used by Telerik to actually refer to the grid itself. This by adding this function it will automatically refresh the grid with the updated data (as long as you are using Ajax binding on the grid I believe) – Rion Williams Dec 30 '10 at 15:56
Hi Rionmonster. This is looking pretty nice. I'm able to post the comment to my controller method: public ActionResult SaveComment(string comment). However, the method expects a return. What should be returned in this case? I am thinking that once I get the return right, I'll see my other controller method executed: [GridAction] public ActionResult _AjaxBindingCommentsGrid(), which handles the refresh of the Telerik grid. Thanks for all of your help! – Arnold Dec 30 '10 at 16:48
You don't necessarily need to have a return value - as all this is doing is simply adding your new comment to your database. You could use public EmptyResult SaveComment(string comment) and just after the DB insertion return new EmptyResult(). You might also be able to use a void in place of EmptyResult. – Rion Williams Dec 30 '10 at 16:50
Whoo Hoo!! Got it!! I added: return Json(true); Then I saw the ActionResult _AjaxBindingCommentsGrid() get executed. This is the best answer. Thanks again!! -Arnold – Arnold Dec 30 '10 at 16:56

score 0 · Answer 2 · answered Dec 30 '10 at 14:52

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');
});

Hi Darin. I want to post just the DIV and not the whole Form. I'd like to update the grid as well. Thanks. — Arnold, Dec 30 '10 at 15:53

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

2 Answers2