MVC3 アプリケーションには、2 つの Ajax 部分ビュー (Create 部分ビューと List ビュー) をレンダリングするビューがあります。部分ビューの作成で、OnBegin イベントでクライアント検証を起動しようとしましたが、これは起こりません。
エラーを強制したときに表示されるエラー メッセージは、モデルの注釈に示されているものであり、OnBegin という検証関数で定義したものではありません (例:
イベント場所を空のままにしておくと、「イベント場所は必要です」(注釈) の代わりに「どこで行われましたか?」 (FieldsValidation 関数) が表示されます。
イベントの説明については、「イベントの説明が必要です」（注釈）が「それについて教えてください！」（FieldsValidation関数）の代わりに表示されます
検証の概要メッセージには、「作成時にエラーが発生しました。修正後に再試行してください。」の代わりに「保存に失敗しました。エラーを修正して再試行してください。」(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"/>
他のいくつかのページで必要な datetimepicker プラグインの jQuery
<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>
他のアプリケーション コンポーネントの jQuery
<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>
検証用のjQuery
<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>
インデックス.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>
}