2012-07-31 179 views
0

學習MVC 3,我試圖使用AJAX使用客戶端驗證在MVC:MVC客戶端驗證

我已經包含在文章呼叫MVC 3客戶端驗證手動阿賈克斯職位的建議,但這並不爲我工作,它仍然認爲該表格是有效的。我在想什麼?

我已經包含在我的aplication如下:

根Web.config文件:

<appSettings> 
    <add key="webpages:Version" value="1.0.0.0" /> 
    <add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
    </appSettings> 

佈局網頁中的腳本:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
    <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> 

我的模型:

[Table("Person")]  
public class Person 
    { 
     [Key] 
     public int PersonID { get; set; } 
     [Column("FullName")] 
     [Required(ErrorMessage = "Give me a name.")] 
     public string NameFull { get; set; } 
     [Required(ErrorMessage = "Give me an email.")] 
     public string EmailAddress { get; set; } 
     [Required(ErrorMessage = "Give me a mobile number.")] 
     public string MobileNo { get; set; } 
     [ForeignKey("Agency")] 
     [Required(ErrorMessage = "Give me an agency.")] 
     public int AgencyID { get; set; } 
     public virtual Agency Agency { get; set; } 
    } 

做Ajax調用(在一個onclick事件觸發)的方法:

function LoadPage(SFORM, SACTION, SMETHOD) { 
    $('#divLoading').slideDown(1); 
    var doc = document.getElementById(SFORM) 
    var dataform = $(doc).serialize(); 
    var $form = $(doc); 
    if ($form.valid()) { 
     //Ajax call here 
     $.ajax({ 
      type: SMETHOD, 
      url: SACTION, 
      data: dataform, 
      complete: function() { 
       $("#divLoading").slideUp(1, function() { FinishLoad() }); 

      }, 
      success: function (data) { 
       $("#divMain").html(data) 

      } 
     }); 
    } 
} 

的視圖(.cshtml):

<form id="frmCreate" name="frmCreate"> 
    @Html.ValidationSummary(true) 
      <fieldset> 
       <legend>Person</legend> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.NameFull) 
       </div> 
       <div class="editor-field"> 
        @Html.EditorFor(model => model.NameFull) 
        @Html.ValidationMessageFor(model => model.NameFull) 
       </div> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.EmailAddress) 
       </div> 
       <div class="editor-field"> 
        @Html.EditorFor(model => model.EmailAddress) 
        @Html.ValidationMessageFor(model => model.EmailAddress) 
       </div> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.MobileNo) 
       </div> 
       <div class="editor-field"> 
        @Html.EditorFor(model => model.MobileNo) 
        @Html.ValidationMessageFor(model => model.MobileNo) 
       </div> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.AgencyID, "Agency") 
       </div> 
       <div class="editor-field"> 
        @Html.DropDownList("AgencyID", String.Empty) 
        @Html.ValidationMessageFor(model => model.AgencyID) 

       </div> 

       <p> 
        <input type="button" value="Create" onclick="LoadMenuItem('frmCreate','@Url.Action("Create", "Person")', 'POST')" /> 
       </p> 
      </fieldset> 
</form> 
+0

您正在關注的任何文章或參考? – Yasser 2012-07-31 13:21:04

回答

0

似乎已經想通它出來,似乎你必須使用@using (Html.BeginForm(null, null, FormMethod.Get, new { name = "validator", id = "validator" }))來創建表單而不是標準標籤,然後使用script分配您想要驗證的表單在你想驗證的視圖的底部pt $.validator.unobtrusive.parse("#validator");

關於這一點的好處是,在你的佈局頁面你可能有一個「父窗體」與不同的ID可能包裝隱藏的領域,你可能想要發佈帶有驗證的表格,所有您需要做的事情是發佈父表格,但驗證仍然會發生在您在部分視圖上的腳本$.validator.unobtrusive.parse("#validator");內分配的表格中。