4

我正在构建一个 MVC 3 应用程序，它使用标准模型验证属性进行基本客户端和服务器验证。然而，我也有一个位于标题中的表单，并使用 jQuery 验证插件来执行客户端验证。

当我将不显眼的库添加到项目中时，使用验证插件的标题表单无法运行并继续发布。当不包含不显眼的库时，标头验证正常，但模型验证停止。

知道我做错了什么吗？

编辑

基本上我在标题中有一个登录表单。我还有一个登录页面，也允许登录。登录页面与模型相关联，但标题中的表单不是，它只是 html。两种形式都通过 jQuery .ajax 调用相同的控制器/动作。

我失去了使用 .ajax 方法的能力，因为我包含了不显眼的库，所以它似乎没有被调用。

我得到了您包含的代码来工作，但是在验证完成后我仍然无法发布或执行操作。

我的标题形式是：

<form id="frmHeaderLogin" action="">
<table id="LoginBox" title="Login">
    <tr>
        <td>UserName</td>
        <td><input type="text" id="Username" name="Username" /></td>
    </tr>
    <tr>
        <td>Password</td>
        <td><input type="password" id="Password" name="Password" /></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit" value="Login" id="btnHeaderLogin" name="btnHeaderLogin" /></td>
    </tr>
</table>
</form>

我有一个提交按钮的单击事件，它将验证客户端输入，然后在创建 JSON 对象作为数据参数后将其提交给服务器。服务器的响应也是一个 JSON 对象。此表单位于布局文件中，因为它将出现在每一页上。

主登录页面/视图有一个简单的表单，如下所示：

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "MainLoginForm" }))
{
<div>
    <fieldset>
       <p style="color:Red;font-size:medium">@ViewData["Message"]</p>
        <legend>Login</legend>
        <div class="editor-label">
        @Html.LabelFor(m => m.UserName, "EmailId")
        </div>
        <div class="editor-field">
        @Html.TextBoxFor(m => m.UserName)
        @Html.ValidationMessageFor(m => m.UserName)
        </div>
        <div class="editor-label">
        @Html.LabelFor(m => m.Password, "Password")  
        </div>
        <div class="editor-field">         
        @Html.PasswordFor(m => m.Password)
        @Html.ValidationMessageFor(m => m.Password)
        </div>
        <p>
        <input type="submit" id="btnMainLogin" value="Login" />
        </p>
     </fieldset>
</div>
}

这也有一个 jQuery click 事件，它触发 .ajax 方法并将 JSON 对象发布到服务器，如上所述。两个实例都返回一个 JSON 对象。

我想此时的问题可能是，我可以对布局文件中的标题登录使用相同的模型，从而允许我使用客户端和服务器验证吗？

以下是我在验证通过后使用的 submitHandler 的示例（使用 jquery.validate）

    $("#formname").validate( {
     // .....
         // .....
         submitHandler: function () {
            var JSONData = new Object();
            $(':text, :password', $("table[id$='LoginBox']")).each(function () {
                JSONData[$(this).attr("id")] = $(this).val();
            });

            $.ajax({
                type: "POST",
                url: "/Controller/Action",
                data: "{'Login': '" + JSON.stringify(JSONData) + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var response = $.parseJSON(result);
                    alert("Header Login Success!");
                },
                error: function (xhr, status, error) {
                    alert(xhr.statusText + " - ReadyState:" + xhr.readyState + "\n" + "Status: " + xhr.status);
                }
            });
         }
    )};
4

1 回答 1

6

如果您想将 Microsoft 不显眼的验证脚本与您在同一页面中编写的自定义 jquery 验证规则混合使用，则需要将 jquery 验证规则添加到现有的表单元素。举个例子：

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }

    public string Bar { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

看法：

@model 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 type="text/javascript">
    $(function () {
        $('#Bar').rules('add', {
            required: true,
            messages: {
                required: 'Bar is required'
            }
        });
    });
</script>

@using (Html.BeginForm())
{
    <div>
        @Html.EditorFor(x => x.Foo)
        @Html.ValidationMessageFor(x => x.Foo)
    </div>

    <div>
        @Html.EditorFor(x => x.Bar)
        @Html.ValidationMessageFor(x => x.Bar)
    </div>

    <button type="submit">OK</button>
}

请注意 Foo 字段上的 Required 属性如何使它成为必需的，我们已经为 Bar 字段定义了一个自定义的 jquery 验证规则。

这是提交表单并且 2 个字段留空时的结果：

在此处输入图像描述

您当然可以在任何字段上定义任意数量的自定义规则。

于 2012-06-25T10:38:31.913 回答