在 MVC4 中使用 jquery 验证来验证动态控件答案

【问题标题】：Validate dynamic controls with jquery validation in MVC4在 MVC4 中使用 jquery 验证来验证动态控件
【发布时间】：2013-08-07 05:07:19
【问题描述】：

我正在使用 Jquery 验证插件在 MVC4 应用程序中创建一些动态输入控件。我按照以下链接生成客户端验证脚本。

http://jqueryvalidation.org/

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js

jQuery validate: How to add a rule for regular expression validation?

razor 视图具有从模型呈现的控件以及从用户定义的数据库动态呈现的控件。

下面是渲染的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/Scripts/jquery-ui-1.8.20.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/Content/DynamicForms/jquery.validate.js"></script>
    <script src="/Content/DynamicForms/additional-methods.js"></script>
    <script src="/Content/Breadcrumb/jquery.easing.1.3.js"></script>
    <script src="/Content/Breadcrumb/jquery.jBreadCrumb.1.1.js"></script>
</head>
<body>
    <div id="body">
        <section class="content-wrapper main-content clear-fix">


<form action="/Cabinet/Create" id="frmOperator" method="post">    <fieldset>
        <legend>File</legend>

        <div class="editor-field">
        <label for="IndexCard_Uid">Uid</label>
        </div>
        <div class="editor-label">
        <input data-val="true" data-val-number="The field Uid must be a number." data-val-required="The Uid field is required." id="IndexCard_Uid" name="IndexCard.Uid" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="IndexCard.Uid" data-valmsg-replace="true"></span>
        </div>
        <br/>

        <div class="input_area">
  <div id="new_form_handle_row">
    <label class="text_label clear_left" for="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379">Name</label>
    <input data-rule-required="true" id="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379" name="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379" type="text" value="" />
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
  <script>      $("#frmOperator").validate();</script>
</div>
        <p>
            <input type="submit" value="Create" />
        </p>
        <br/>
    </fieldset>
</form>
<a data-ajax="true" data-ajax-mode="replace" data-ajax-success="javascript:PopUp()" data-ajax-update="#dialog-cabinet" href="/Cabinet/CreateCabinet?rand=0.0905532776799767">Create</a>
<div id="dialog-cabinet" title="Create New Cabinet"></div>

<script language="javascript" type="text/javascript">
    function PopUp() {
        alert("#dialog-cabinet");
        $("#dialog-cabinet").dialog({
            height: 500,
            width: 500,
            modal: true
        });
    }
</script>
            </section>
    </div>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
</body>
</html>

此 html 验证模型控件以及动态控件。但问题是我必须在页面的开头和结尾调用以下行两次。这会阻止我使用 $("#dialog-cabinet").dialog() 方法打开弹出对话框。

<script src="/Scripts/jquery-1.7.1.js"></script>
        <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>

有没有人知道将 jquery 验证插件与 MVC 结合使用的更好方法。

提前致谢。

 <input data-val="true" data-val-number="The field Uid must be a
        number." data-val-required="The Uid field is required."
        id="IndexCard_Uid" name="IndexCard.Uid" type="text" value="" />
 <span class="field-validation-valid" data-valmsg-for="IndexCard.Uid" data-valmsg-replace="true"></span>


    <input data-rule-required="true"
        id="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379"
            name="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379"
            type="text" value="" />

 <script>    $("#frmOperator").validate({ rules: {} });</script>

第一个是mvc生成的输入。第二个是从数据库值生成的输入。第三个是使用 jquery 验证来验证动态控件的脚本。如果我在最后删除脚本或启动两个验证都将不起作用。但如果我加载脚本两次，我无法使用以下方法加载弹出窗口

function PopUp() {
            alert("#dialog-cabinet");
            $("#dialog-cabinet").dialog({
                height: 500,
                width: 500,
                modal: true
            });
        }

如果有人能帮助我，我将不胜感激。

【问题讨论】：

标签： jquery asp.net-mvc-4 jquery-validate unobtrusive-validation

【解决方案1】：

我认为您不必调用脚本行两次。在默认的 Layout.cshtml 的末尾有一个脚本部分，其中包含 jquery 脚本。这会在渲染的 HTML 末尾生成脚本行（执行现代化脚本）。这是正确的，因为脚本文件应该在最后加载（请参阅http://developer.yahoo.com/performance/rules.html#js_bottom 了解更多信息）。

由于某种原因，jquery 脚本也加载到 layout.cshtml 的头部，这完全是错误的，但脚本应该只加载一次。

如果您通过 VS 对话框为表单创建了新的局部视图，则会有一个名为“参考脚本库”的复选框。如果选中该复选框，则会创建一个新的局部视图，并且在局部视图的末尾您会发现以下几行：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

这引用了 Layout.cshtml 中的 @RenderSection("scripts", false) 行，并将 jQuery 验证脚本放置在呈现的 HTML 中。

长话短说：

您应该删除结尾或开头的脚本

【讨论】：