帶有Ajax局部視圖的MVC3 - 未執行OnBegin驗證

Question

在MVC3應用程序中，我有一個視圖呈現兩個Ajax局部視圖：創建局部視圖和列表視圖。在創建部分視圖中，我嘗試在OnBegin事件上觸發客戶端驗證，但這不會發生。

錯誤消息我得到的，當我強迫的錯誤，是一個模型中的註釋說明，而不是那些我叫OnBegin驗證功能定義（如：

• 離開活動場所空的，我得到「事件的地方需要」（註釋），而不是「它是在哪裏發生的？」（FieldsValidation功能），

• 對事件的描述，我得到「事件說明需要「（註釋）而不是」告訴我們這件事！「（FieldsValidation function）

• 和驗證摘要消息sais」創建錯誤。更正後請重試。「而不是」保存失敗。請更正錯誤並重試。「（FieldsValidation功能））。

我試圖把一個斷點在FieldsValidation的功能，但它從來沒有達到。 只是爲了確保，我也試着撥打OnBegin顯示警告的功能（測試後，我恢復了原來的調用FieldsValidation功能）：

function toDoOnBegin() { alert("This is onBegin"); } 

警報永遠不會顯示

如果所有的成員被正確填寫，正確地創建，並在事件顯示的事件！列表（另一個局部視圖）。問題是唯一的函數調用OnBegin。

請解釋一下我做錯了什麼，我是否想要包括一些東西或其他東西？

真的很感謝。

的Web.config

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

型號：

public partial class Event 
{ 
    public int client_ID { get; set; } 

    [Required(ErrorMessage="The event date is required")] 
    [DataType(DataType.Date, ErrorMessage="The event date is invalid")] 
    public System.DateTime event_date { get; set; } 

    [Required(ErrorMessage="The event place is required")] 
    public string event_place{ get; set; } 

    [Required(ErrorMessage="The event description is required")] 
    public string event_description{ get; set; } 
} 

_layout。CSHTML：

樣式表

<link href="@Url.Content("~/Content/styles.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/nivo-slider.css")" rel="stylesheet" type="text/css" media="screen"/> 
<link href="@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/jquery.timepicker.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/jquery.alerts.css")" rel="stylesheet" type="text/css" media="screen"/> 

jQueries對於需要在其他幾頁的DateTimePicker插件

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.ui.slider.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker-fr.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script> 

jQueries用於其他應用程序組件

<script src="@Url.Content("~/Scripts/jquery.alerts.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/OJscript.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.nivo.slider.pack.js")" type="text/javascript"></script> 

個

jQueries進行驗證

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 

Index.cshtml

@model MyApp.ViewModels.EventViewModel 

@{ 
    ViewBag.Title = "Events"; 
} 

<div id="divUpdateable"> 
    @Html.Partial("_Create", Model) 
</div> 
<div id="divList"> 
    @Html.Partial("_ListEvents", Model.EventsList) 
</div> 

_Create.cshtml

@model MyApp.ViewModels.EventViewModel 

<script type="text/javascript"> 

    function FieldsValidation() { 
     $("#idformCreate").validate({ 

      errorContainer: $($('div.validation-summary-errors')), 
      errorLabelContainer: $("ul", $('div.validation-summary-errors')), 
      wrapper: 'li', 
      errorClass: "input-validation-error2", 

      rules: 
       { 
        'Event.event_date': 
        { 
         required: true 
        }, 
        'Event.event_place': 
        { 
         required: true 
        }, 
        'Event.event_description': 
        { 
         required: true 
        } 
       }, 
      messages: 
       { 
        'Event.event_date': 
        { 
         required: "Date is required" 
        }, 
        'Event.event_place': 
        { 
         required: "Where did it take place?" 
        }, 
        'Event.event_description': 
        { 
         required: "Tell us sth about it!" 
        } 
       } 

     }).form(); 

     if (!$("#idformCreate").valid()) { 
      $("div.validation-summary-errors span").html("Save failed. Please correct errors and retry."); 
      return false; 
     } 

     return true; 
    } 
</script> 

@using (Ajax.BeginForm("Create", "Event", new { clientID = Model.Event.client_ID }, new AjaxOptions 
{ 
    UpdateTargetId = "divUpdateable", 
    OnBegin = "FieldsValidation", 
    InsertionMode = InsertionMode.Replace, 
    OnSuccess = "getForm('" + Url.Action("ListEvents", "Event", null) + "','divList')" 
}, new { id = "idformCreate" })) 
{ 
    @Html.ValidationSummary(false, "Error on creation. Please retry after corrections.") 
    <p>@Html.ValidationMessage("_FORM")</p> 
    <div class="validation-summary-errors"> 
     <span></span> 
     <ul> 
     </ul> 
    </div> 
    <fieldset style="width: 800px; line-height: 1.4em;"> 
     <legend>Add an event</legend> 
     <table style="width: 100%; padding-bottom: 0; padding-top: 0; border: 0;"> 
      <tr> 
       <td style="width: 90px; border: 0;"> 
        @Html.LabelFor(model => model.Event.event_date) 
       </td> 
       <td style="width: 200px; border: 0;"> 
        @Html.EditorFor(model => model.Event.event_date, new { @class = "date" }) 
        @Html.ValidationMessageFor(model => model.Event.event_date, "*") 
        @Html.HiddenFor(model => model.Event.client_ID) 
       </td> 
      </tr> 
      <tr> 
       <td style="width: 80px; border: 0; text-align: right;"> 
        @Html.LabelFor(model => model.Event.event_place) 
       </td> 
       <td style="width: 120px; border: 0;"> 
        @Html.DropDownList("Event.event_place", Model.PlacesList, "Where?", new { @style = "width: 100px;" }) 
        @Html.ValidationMessageFor(model => model.Event.event_place, "") 
       </td> 
      </tr> 
      <tr> 
       <td style="width: 90px; border: 0;"> 
        @Html.LabelFor(model => model.Event.event_description) 
       </td> 
       <td style="width: 600px; border: 0;" colspan="5"> 
        @Html.TextAreaFor(model => model.Event.event_description, new { @class = "input_txt_nofloat", @style = "width:590px" }) 
        @Html.ValidationMessageFor(model => model.Event.event_description, "*") 
       </td> 
      </tr> 
      <tr style="height: 64px;"> 
       <td colspan="2" style="text-align: center;"> 
        <br /> 
        <br /> 
        <input type="submit" value="Save" class="submit" style="width: 280px" /> 
       </td> 
      </tr> 
     </table> 
    </fieldset> 
} 

Answer 1

Here is the answer:（與BrockAllen一個偉大的感謝）

如果你正在做你自己的客戶端 - 方驗證，那麼你應該刪除jquery.validate.unobtrusive.min.js 。這是MVC的客戶端 驗證碼，如果兩者都使用 jquery.validate，它們將會發生衝突。

希望這也能幫助其他人。

Answer 2

在開始您呼叫：

OnBegin = "FieldsValidation", 

如果你要顯示你的警惕，那麼你需要：

OnBegin = "toDoOnBegin"