Question

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

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

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

有没有人知道在MVC中使用jquery验证插件的更好方法。

提前致谢。

 <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
            });
        }

如果有人能提供帮助我会感激不尽。

Answer 1

我认为你不必两次调用脚本行。在默认的Layout.cshtml中，末尾有一个脚本部分，其中包含jquery脚本。这会在渲染的HTML结尾处生成脚本行（execpt the modernizer script）。这是正确的，因为脚本文件应该在最后加载（有关详细信息，请参阅http://developer.yahoo.com/performance/rules.html#js_bottom）。

由于某种原因，jquery脚本也会加载到layout.cshtml的head部分，这根本就是错误的，但是脚本应该只加载一次。

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

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

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

长话短说：

您应该在结束时删除脚本或开始

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

1 个答案: