您可以启用不显眼的客户端验证。首先添加以下脚本引用：
<script type="text/javascript" src="@Url.Content("~/scripts/jquery.validate.unobtrusive.js")"></script>
进而：
@model _1.Areas.Admin.Models.AdminModule
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" }))
{
@Html.LabelFor(i => i.MyName)
@Html.TextBoxFor(i => i.MyName)
@Html.ValidationMessageFor(i => i.MyName)
<p id="getDateTimeString"></p>
<input type="submit" value="Click here" />
}
<script type="text/javascript">
$('#myForm').submit(function () {
if ($(this).valid()) {
$.post(this.action, $(this).serialize(), function(data) {
$('#myForm').html(data);
$('#myForm').removeData('validator');
$('#myForm').removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('#myForm');
});
}
return false;
});
</script>
UPDATE:
现在您通过电子邮件向我发送了实际代码，我发现它存在很多问题。与其经历所有这些，我更喜欢从头开始完全重写所有内容。
所以我们从~/Areas/Admin/Views/Shared/_LayoutPage1.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<div>
<ul>
<li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
</ul>
@RenderBody()
</div>
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
请注意我如何将所有脚本移至文件底部，并添加一个专门用于放置自定义脚本的部分。
接下来我们转到~/Areas/Admin/Views/Admin/Index.cshtml:
@model _1.Areas.Admin.Models.AdminModule
@{
ViewBag.Title = "Index";
Layout = "~/Areas/Admin/Views/Shared/_LayoutPage1.cshtml";
}
<div id="formContainer" data-url="@Url.Action("Index_partial", "Admin", new { area = "Admin" })"></div>
<input id="BTN" type="button" value="Button" />
@section Scripts {
<script type="text/javascript" src="@Url.Content("~/areas/admin/scripts/myscript.js")"></script>
}
在这里您可以注意到我已经替换了按钮的类型submit to button因为此按钮不包含在要提交的表单中。我也摆脱了<p>你正在经历的元素id="myForm"这不仅没有用，而且最终会在 DOM 中出现重复的 id，这是无效的标记。我也用过data-url容器 div 上的 HTML5 属性指示将加载表单的服务器端脚本的 url。我在这个文件中做的最后一件事是覆盖scripts我们之前在布局中使用自定义脚本定义的部分。
所以下一部分是自定义脚本：~/areas/admin/scripts/myscript.js:
$('#BTN').click(function () {
var $formContainer = $('#formContainer');
var url = $formContainer.attr('data-url');
$formContainer.load(url, function () {
var $form = $('#myForm');
$.validator.unobtrusive.parse($form);
$form.submit(function () {
var $form = $(this);
if ($form.valid()) {
$.post(this.action, $(this).serialize(), function (data) {
$form.html(data);
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);
});
}
return false;
});
});
return false;
});
这里的代码非常标准。我们订阅按钮的单击事件并使用 AJAX 调用加载部分内容。一旦完成，我们就会指示不显眼的验证框架解析新添加到 DOM 的内容。下一步是通过订阅来 AJAX 化表单.submit事件。并且因为在success我们再次替换容器的内容，我们需要指示不显眼的验证框架解析新内容。
最后是部分：
@model _1.Areas.Admin.Models.AdminModule
@using (Html.BeginForm("Index_partialPost", "Admin", FormMethod.Post, new { id = "myForm" }))
{
@Html.LabelFor(i => i.MyName)
@Html.TextBoxFor(i => i.MyName)
@Html.ValidationMessageFor(i => i.MyName)
<p id="getDateTimeString"></p>
<input type="submit" value="Click here" />
}
在这里你可以注意到我已经完全摆脱了任何 javascript 的痕迹。 javascript 属于单独的文件。它与视图无关。您不应该混合标记和脚本。当您有单独的脚本时，不仅您的动态标记会小得多，而且您还可以利用诸如外部脚本的浏览器缓存、缩小等功能，...您在这部分中会注意到的另一件事是我删除了<script>您在其中引用 jQuery 和 jQuery.validate 脚本的节点。您已经在布局中这样做了，不要重复两次。
