2

以下是我在 MVC3 中的区域

在此处输入图像描述

模型

public class AdminModule
{
    [Display(Name = "My Name")]
    [Required]
    public String MyName { get; set; }
}

局部视图

@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" id="btn" />
}

<script language="javascript" type="text/javascript">
    $('#btn1').click(function () {
        debugger;
        var $form = $("#myForm");

        // Unbind existing validation
        $form.unbind();
        $form.data("validator", null);

        // Check document for changes
        $.validator.unobtrusive.parse(document);

        // Re add validation with changes
        $form.validate($form.data("unobtrusiveValidation").options);

        if ($(this).valid()) {
            var url = '@Url.Action("Index_partialPost", "Admin", 
                                                new { area = "Admin" })';
            $.post(url, null, function (data) {
                alert(data);
                $('#myForm').html(data);
            });
        }
        else

        return false;
    });
</script>

控制器动作

[HttpPost]
public ActionResult Index_partialPost(AdminModule model)
{
    return PartialView("_PartialPage1", model);
} 

[HttpGet]
public ActionResult Index_partial()
{
    return PartialView("_PartialPage1");
}

每当我提交表格并将必填字段留空时。我想它去了服务器。我在这里检查...

在此处输入图像描述

我的困惑是=> 如何修改下面提到的代码以使用 $.post 在客户端显示模型中提到的相同验证消息？

4

1 回答 1

2

您可以启用不显眼的客户端验证。首先添加以下脚本引用：

<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>

更新：

现在您通过电子邮件向我发送了您的实际代码，我发现它存在很多问题。与其经历所有这些，我更喜欢从头开始完全重写所有内容。

所以我们从~/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>
}

在这里您可能会注意到，我已将按钮的类型从submitto替换为，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。下一步是通过订阅.submit事件来 AJAXify 表单。因为在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 脚本。您已经在布局中这样做了，不要重复两次。

于 2013-02-07T07:43:31.960 回答