MVC Async Postback & RenderPartial

Question

Apologies if the Title is a bit misleading, I'm just not sure how to go about doing this.

Ok here's the scenario. I am developing a feedback mvc widget that is housed in a Sitefinity 5.1 website. This widget is effectively just a div that is displayed when the user hovers over the feedbackLaunch label using jquery.

VIEW / WIDGET

@using (Html.BeginFormSitefinity())
{  
    <label for="feedbackLaunch">
        <span class="FeedbackHighlight feedbackLaunch">Feedback</span>
    </label>

    <div class="feedback">
    </div>

    <div class="FeedbackContent" style="display: none">
        <h1>Feedback</h1>
        <h2>I thought this page was:
            <br />
            <br />
            @Html.DropDownListFor(x => x.PageRatingId, new SelectList(Model.Rating, "PageRatingId", "PageRatingName"))
            <br /><br />
            Please give further detail:
            <br /><br />
             @Html.TextAreaFor(model => model.PageDetails, new { @style = "height: 100px;" })
              <br /><br />
       <input type="submit" value="Submit" />

        </h2>
    </div>

}

So I have a rendered page in the background with this feedback div now popped up. Lovely.

However, what I now want to do is do a submit click but without doing a postback, since the feedback div would disappear. Upon submission, I would essentially displaying a new div, or view, informing the info has been posted sent (that'll be fired off to a webservice).

What would be the best approach to do this?

Should I have two partial views, one for the submission form and the other for the "Thank you" section?

I have mentioned Sitefinity just in case there are any gotchas involved with that given it's quite a new feature of the CMS.

Any pointers gratefully received.

Here is someone asking a similar question http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor — Liam, Oct 11 '12 at 16:24
Yes Jquery is an option so on a first, brief look, that looks promising Liam. — Ricardo Deano, Oct 11 '12 at 16:27
MVC does do Ajax forms out of the box using the `Ajax.BeginForm` but I'd recommend rolling your own using the JQuery `ajax` function, gives you much better control, etc. and it's not much more complicated. — Liam, Oct 11 '12 at 16:31

score 0 · Answer 1 · answered Oct 11 '12 at 16:28

If your "Thank you" does not have any dynamically generated content, then just fire an AJAX call to some controller action and when you get a 200 response back just replace the div with a new one with the thank you, all using jQUery.

If you do need to dynamically generate the thank you on the server, then fire the ajax call to an action that returns a partial with the thank you message and once again use jquery to replace the original div with the contents of the response.

score 0 · Accepted Answer · answered Oct 11 '12 at 16:30

You could use AJAX with jQuery. For example give your form an id and then AJAXify it once you show the widget in your view:

$('#feedbackForm').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            alert('thanks for submitting your feedback');
            // TODO: hide the div containing the feedback form
        }
    });
    return false;
});

MVC Async Postback & RenderPartial

2 Answers2