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.

Answer 1

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

Answer 2

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.