Валидация в диалоговых окнах

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

В предыдущей теме было рассмотрено создание диалоговых окон для добавления и редактирования моделей. Но не был затронут вопрос валидации моделей при их создании в диалоговых окон. Рассмотрим, как мы можем добавить валидацию.

Возьмем модель Computer из прошлой темы и добавим ей несколько атрибутов валидации:

using System.ComponentModel.DataAnnotations;

public class Computer
{
    public int Id { get; set; }

    [Display(Name = "Модель")]
    [Required]
    [MaxLength(20,ErrorMessage="Превышена допустима длина строки")]
    public string Model { get; set; }

    [Display(Name = "Год выпуска")]
    [Required]
    [Range(1970, 2014, ErrorMessage = "Недопустимый год")]
    public int Year { get; set; }
}

Теперь изменим код контроллера для принятия и вывода моделей:

public class HomeController : Controller
{
    static List<Computer> comps = new List<Computer>();
    public ActionResult Index()
    {
        return View(comps);
    }

    // Добавление
    public ActionResult Create()
    {
        return PartialView("Create");
    }
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Computer comp)
    {
        if (ModelState.IsValid)
        {
            comps.Add(comp);
            return PartialView("Success");
        }
        return PartialView(comp);
    }
}

Для простоты вместо бд используется статический список, и имеются всего лишь два действия - для вывода списка и для создания новой модели. При создании модели в зависимости от результата возвращается одно из частичных представлений.

Во-первых, добавим в проект библиотеку jQuery-UI.

Теперь добавим представления. Основное представление Index.cshtml для вывода списка:

@model IEnumerable<DialogValidationApp.Models.Computer>

@{
    Layout = null;
}
<html>
<head>
    <title></title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
	<!--библиотека jQuery-UI-->
    <link href="@Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
</head>
<body>
    <h2>Список компьютеров</h2>
    <table>
        @foreach (var c in Model)
        {
            <tr>
                <td>@c.Model</td>
                <td>@c.Year</td>
            </tr>
        }
    </table>
    <p> @Html.ActionLink("Добавить", "Create", "Home", new { }, new { @class = "viewDialog", data_dialog_title = "Создание модели" })</p>

    <script src='@Url.Content("~/Scripts/jquery-1.12.4.min.js")' type="text/javascript"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(document).ready(function () {

        $.ajaxSetup({ cache: false });

        $(".viewDialog").on("click", function (e) {
            e.preventDefault();

            $("<div id='dialogContent'></div>")
                .addClass("dialog")
                .appendTo("body")
                .load(this.href)
                .dialog({
                    title: $(this).attr("data-dialog-title"),
					close: function () { $(this).remove() },
                    modal: true,
                    buttons: {
                        "Сохранить": function () {
                            $.ajax({
                             url: "@Url.Action("Create", "Home")",
                             type: "POST",
                             data: $('form').serialize(),
                             datatype: "json",
                             success: function (result) {

                                 $("#dialogContent").html(result);
                                }
                            });
                        }
                    }
                });
        });
    });
    </script>
</body>
</html>

В отличие от механизма создания диалогового окна в прошлой теме, здес к диалоговому окну добавляется кнопка. И этой кнопке назначается обработчик нажатия, в котором срабатывает ajax-запрос с помощью функции $.ajax(). Функция сериализует данные формы и отправляет по адресу, указанному в параметре url. При успешной отправке с помощью функции success: function (result) {... мы можем обработать ответ от сервера. В данном случае ответ сервера просто добавляется в блок диалогового окна: $("#dialogContent").html(result).

Теперь добавим частичное представление Create.cshtml:

@model DialogValidationApp.Models.Computer

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div>
        <h4>Новая модель</h4>
        
        @Html.ValidationSummary(true)
        <div>
            @Html.LabelFor(model => model.Model)
            <div>
                @Html.EditorFor(model => model.Model)
                @Html.ValidationMessageFor(model => model.Model, "")
            </div>
        </div>

        <div>
            @Html.LabelFor(model => model.Year)
            <div>
                @Html.EditorFor(model => model.Year)
                @Html.ValidationMessageFor(model => model.Year, "")
            </div>
        </div>
    </div>
}

Здесь стандартная форма с хелперами валидации. Единственное отличие от стандартных форм - отстутствие кнопки отправки, так как мы ее создаем в коде javascript в представлении Index.cshtml.

И затем добавим частичное представление Success.cshtml, которое будет генерироваться при успешном добавлении модели:

<h2>Модель добавлена</h2>
<script>
    $(document).ready(function () {
        setTimeout(function() {
            window.location.href = "@Url.Action("Index", "Home")";
        }, 2000);
    })
</script>

Здесь выводится сообщение о добавлении, и затем запускается скрипт, котоырй перенаправляет опять же на главную страницу, чтобы добавленные данные отобразились на странице. В качестве альтернативы можно было бы сделать загрузку данных таблицы моделей через ajax, чтобы не перегружать всю страницу.

Итак, запустим приложение и попробуем ввести такие данные, которые не пройдут валидацию:

И если модель пройдет валидацию, то мы получим сообщение о ее добавлении, и страница Index.cshtml будет перезагружена.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850