MVC3 с частичным представлением Ajax - проверка OnBegin не выполнена - PullRequest
Новая
       13

MVC3 с частичным представлением Ajax - проверка OnBegin не выполнена

2 голосов
/ 23 марта 2012

В приложении MVC3 у меня есть представление, отображающее два частичных представления Ajax: создание частичного представления и представление списка. В представлении Создать частичное я пытаюсь запустить проверку клиента по событию 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"/>

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>

JЗапросов на проверку 

<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>
}

Ответы [ 2 ]

3 голосов
/ 24 марта 2012

Вот ответ: (с большой благодарностью за BrockAllen)

Если вы проводите собственную проверку на стороне клиента, вам следует удалить jquery.validate.unobtrusive.min.js. Это сторона клиента MVC проверочный код, и они будут конфликтовать, если оба используют jquery.validate.

Надеюсь, это поможет и другим людям.

0 голосов
/ 23 марта 2012

В начале вы звоните: 

OnBegin = "FieldsValidation",

Если вы хотите, чтобы ваше предупреждение отображалось, вам нужно: 

OnBegin = "toDoOnBegin"
...