asp.net-mvc-3asynchronouspostbackrenderpartialsitefinity-5

MVC Async Postback & RenderPartial


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.


Solution

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