驗證動態控件與MVC4中的jQuery驗證

我使用Jquery驗證插件在MVC4應用程序中創建一些動態輸入控件。我已經遵循以下鏈接生成客戶端驗證腳本。驗證動態控件與MVC4中的jQuery驗證

的剃刀視圖具有從模型呈現的控制，並且還控制從由用戶定義的數據庫動態地呈現。

以下是所提供的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>

1st是由mvc生成的輸入。第二個是從數據庫值生成的輸入。第三個是使用jQuery驗證來驗證動態控件的腳本。如果我在最後刪除腳本或啓動兩個驗證將無法正常工作。但如果我加載腳本兩次，我無法加載彈出使用以下方法

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

如果任何人可以幫助，我會很感激。

來源

2013-08-07 manura

我不認爲你必須兩次調用腳本行。在默認的Layout.cshtml中，末尾有一個腳本部分，其中包含jquery腳本。這會在您呈現的HTML末尾生成腳本行（執行modernizer腳本）。這是正確的，因爲腳本文件應該在最後加載（有關更多信息，請參閱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腳本。

長話短說：

你應該刪除在結束腳本或開始

來源

2013-08-07 10:12:25 developer10214

驗證動態控件與MVC4中的jQuery驗證

回答

相關問題