是否有使用Ajax的教程或代码示例?在Asp.net MVC 3中不显眼的验证和Ajax存在BeginForm ?
对于MVC 3来说，这是一个难以捉摸的主题，我似乎不能让我的表单正常工作。它将执行Ajax提交，但忽略验证错误。
当前回答
例子:
模型:
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表单插件进一步增强。
其他回答
例子:
模型:
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.BeginForm之前。 将以下脚本按上述顺序添加到您的项目中，
jquery-1.7.1.min.js jquery.unobtrusive-ajax.min.js
只有这两个就足够执行Ajax操作了。
Ajax表单使用Javascript异步工作。因此需要加载脚本文件来执行。尽管这是一个很小的性能损失，但执行时没有回发。
我们需要理解Html和Ajax表单的行为之间的区别。
阿贾克斯:
不会重定向表单，即使你做RedirectAction()。 将异步执行保存、更新和任何修改操作。
Html:
将重定向表单。 将同步和异步执行操作(与一些额外的代码和照顾)。
在下面的链接中演示了与POC的差异。 链接
我最终得到了达林的解决方案，但首先犯了一些错误，导致了一个类似于大卫的问题(在达林的解决方案下面的评论中)，结果是发布到一个新的页面。
因为我必须在方法返回后对表单做一些事情，所以我将它存储起来以供以后使用:
var form = $(this);
然而，这个变量没有在ajax调用中使用的“action”或“method”属性。
$(document).on("submit", "form", function (event) {
var form = $(this);
if (form.valid()) {
$.ajax({
url: form.action, // Not available to 'form' variable
type: form.method, // Not available to 'form' variable
data: form.serialize(),
success: function (html) {
// Do something with the returned html.
}
});
}
event.preventDefault();
});
相反，你需要使用“this”变量:
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (html) {
// Do something with the returned html.
}
});
例子
/ /模型
public class MyModel
{
[Required]
public string Name{ get; set; }
}
在帕尔泰维尤 PartailView.cshtml
@model MyModel
<div>
<div>
@Html.LabelFor(model=>model.Name)
</div>
<div>
@Html.EditorFor(model=>model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
</div>
在索引。cshtml视图
@model MyModel
<div id="targetId">
@{Html.RenderPartial("PartialView",Model)}
</div>
@using(Ajax.BeginForm("AddName", new AjaxOptions { UpdateTargetId = "targetId", HttpMethod = "Post" }))
{
<div>
<input type="submit" value="Add Unit" />
</div>
}
在控制器
public ActionResult Index()
{
return View(new MyModel());
}
public string AddName(MyModel model)
{
string HtmlString = RenderPartialViewToString("PartailView",model);
return HtmlString;
}
protected string RenderPartialViewToString(string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = ControllerContext.RouteData.GetRequiredString("action");
ViewData.Model = model;
using (StringWriter sw = new StringWriter())
{
ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
你必须将ViewName和Model传递给RenderPartialViewToString方法。它将返回你的视图与验证，这是你应用在模型和附加在Index.cshtml的“targetId”div的内容。我这种方式通过捕捉RenderHtml的部分视图，你可以应用验证。
推荐文章
- 如何在ASP中处理复选框。NET MVC窗体?
- 什么是@Html。DisplayFor语法?
- 我如何定义一个方法在剃刀?
- 错误:«无法加载类型mvcapapplication»
- 如何从ASP返回200 HTTP状态码。NET MVC 3控制器
- 如何在ASP中找到一个动作的绝对url。净MVC吗?
- @media媒体查询和ASP。NET MVC razor语法冲突
- MVC 4 Razor文件上传
- 用于单元测试的NUnit vs. Visual Studio 2008测试项目
- Html5 data-*与asp.net mvc textbox html属性
- Razor中的预处理器指令
- 如何在MVC应用程序中缓存数据
- ASP。NET MVC Razor渲染没有编码
- 在ASP中服务favicon.ico。NET MVC
- 在使用端点路由时，不支持使用“UseMvc”来配置MVC
