是否有使用Ajax的教程或代码示例?在Asp.net MVC 3中不显眼的验证和Ajax存在BeginForm ?
对于MVC 3来说,这是一个难以捉摸的主题,我似乎不能让我的表单正常工作。它将执行Ajax提交,但忽略验证错误。
是否有使用Ajax的教程或代码示例?在Asp.net MVC 3中不显眼的验证和Ajax存在BeginForm ?
对于MVC 3来说,这是一个难以捉摸的主题,我似乎不能让我的表单正常工作。它将执行Ajax提交,但忽略验证错误。
当前回答
如果没有执行数据验证,或者内容总是在新窗口中返回,请确保这3行位于视图的顶部:
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
其他回答
在添加Ajax.BeginForm之前。 将以下脚本按上述顺序添加到您的项目中,
jquery-1.7.1.min.js jquery.unobtrusive-ajax.min.js
只有这两个就足够执行Ajax操作了。
如果没有执行数据验证,或者内容总是在新窗口中返回,请确保这3行位于视图的顶部:
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
例子:
模型:
public class MyViewModel
{
[Required]
public string Foo { get; set; }
}
控制器:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("Thanks", "text/html");
}
}
观点:
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}
下面是一个更好的例子(在我看来):
观点:
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Html.BeginForm())
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}
index.js:
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#result').html(result);
}
});
}
return false;
});
});
这可以通过jQuery表单插件进一步增强。
Ajax表单使用Javascript异步工作。因此需要加载脚本文件来执行。尽管这是一个很小的性能损失,但执行时没有回发。
我们需要理解Html和Ajax表单的行为之间的区别。
阿贾克斯:
不会重定向表单,即使你做RedirectAction()。 将异步执行保存、更新和任何修改操作。
Html:
将重定向表单。 将同步和异步执行操作(与一些额外的代码和照顾)。
在下面的链接中演示了与POC的差异。 链接
我认为所有的答案都忽略了一个关键点:
如果你使用Ajax表单,所以它需要更新自己(而不是表单外的另一个div),那么你需要把包含的div放在表单外。例如:
<div id="target">
@using (Ajax.BeginForm("MyAction", "MyController",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "target"
}))
{
<!-- whatever -->
}
</div>
否则,您将像@David那样结束,结果将显示在一个新页面中。