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