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