0

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

http://jqueryvalidation.org/

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

jQuery validate：如何为正则表达式验证添加规则？

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

以下是呈现的 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
            });
        }

如果有人可以帮助我将不胜感激。

4

1 回答 1

0

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

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

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

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

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

长话短说：

  • 您应该在结尾或开头删除脚本
于 2013-08-07T10:12:25.027 回答