2012-07-31 180 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");内分配的表格中。