![](/img/trans.png)
[英]Call Action Method in controller on Ajax success function to Render partial view
[英]Dynamically created Partial View does not call controller action on submit
我正在使用AJAX用这样的局部视图替换引导程序模式内容:
主视图HTML
<div class="container row form-horizontal">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" id="myModalContent">
</div>
</div>
</div>
</div>
主视图内的AJAX脚本
$(function () {
$.ajaxSetup({ cache: false });
$(document).on('click', 'a[data-modal]', function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
keyboard: true
}, 'show');
bindForm(this);
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('#progress').show();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
$('#progress').hide();
alert('reloading');
location.reload();
} else {
$('#progress').hide();
$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
}
部分检视HTML
@model MVC_Replica.Models.Location
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Add New Location</h3>
</div>
@using (Html.BeginForm("Create","Locations",FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.LocationName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LocationName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LocationName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DateCreated, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.DateCreated, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.DateCreated, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.LocationState, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LocationState, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LocationState, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<span id="progress" class="text-center" style="display: none;">
<img src="~/media/ajax-loading.gif" alt="wiat" />
Wait..
</span>
<input type="submit" class="btn btn-primary pull-left" value="Create" />
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
}
结果
该模式可以正确打开,并且客户端验证可以很好地工作。 但是,当我submit
partial view
,将永远不会执行以下控制器动作:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Location location)
{
if (ModelState.IsValid)
{
location.DateCreated = DateTime.Now;
db.Locations.Add(location);
db.SaveChanges();
return Json(new { success = true });
}
return PartialView("_CreateLocation", location);
}
我尝试在ModelState.IsValid
旁边放置一个制动点,但它从未被击中,而且浏览器控制台未显示任何错误
可能是什么问题呢?
编辑
我设法通过将anchor
href
值存储在global variable
并更改bindForm
函数来获取局部视图以调用create action控制器:
var actionUrl;
$(function () {
$('form').submit(function () {
// alert(this.action);
});
$.ajaxSetup({ cache: false });
$(document).on('click', 'a[data-modal]', function (e) {
actionUrl = this.href;
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
keyboard: true
}, 'show');
bindForm();
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
});
return false;
});
});
function bindForm() {
$('form').on('submit',function () {
$('#progress').show();
$.ajax({
url: actionUrl,
type: 'POST',
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
$('#progress').hide();
location.reload();
} else {
$('#progress').hide();
$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
}
那么,为什么的原因create controller action
从未引用,是因为submit
的事件bindForm
从未被执行的功能。 如我所发现的, bindForm
函数中的dialog
selector
阻止了事件的触发。 我已在问题中添加了编辑内容,以解释可能的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.