我正在从fancybox加载partialview。部分视图有Form=Post
,一旦我提交表单,我需要在同一个fancybox <div>
上显示结果。
但是返回结果加载完整视图,我在提交后失去了对fancybox的控制权。
查看加载fancybox
<a href="#" onclick="display_dialog()"><strong>Email</strong></a>
@section Scripts {
@Scripts.Render("~/bundles/Bootstrap")
@Scripts.Render("~/bundles/fancybox")
@Styles.Render("~/Content/jquery.fancybox.css")
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
function display_dialog() {
$.fancybox.open({
href: '/ContactSubmission/',
type: 'ajax',
padding: 0,
openEffect: 'fade',
openSpeed: 'normal',
closeEffect: 'elastic',
closeSpeed: 'slow',
minWidth: 'auto',
minHeight: 'auto',
helpers: {
title: {
type: 'float'
}
}
});
}
</script>
}
@using System.Web.UI.WebControls
@model SPE.ContactSubmissionForm.Models.Contact
<div id="result"></div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype =
"multipart/form-data", @class = "form-horizontal", role = "form" }))
{
//html controls
<div class="form-group">
<div class="col-sm-4 col-md-offset-5">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-default">Cancel</button>
</div>
</div>
}
的javascript
$(function (e) {
e.preventDefault();
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
contentType: attr("enctype", "multipart/form-data"),
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#result').html(result);
}
});
}
return false;
});
public class ContactSubmissionController : Controller
{
public ActionResult Index()
{
var contact = new Contact
{
Countries = Context.GetCountries()
};
return PartialView(contact);
}
[HttpPost]
public ActionResult Index(Contact contact)
{
if (ModelState.IsValid)
{
if (contact != null)
{
}
}
return Content("Thanks", "text/html");
}
}
我回帖后如何留在同一个花哨的盒子里?