Пример сайта на ASP.NET MVC 3 с использованием AJAX (часть 1 из 2)

В этой статье я покажу как можно легко создавать сайты с использованием ASP.NET MVC 3, и в том числе с использованием AJAX. В этом обучающем материале (tutorial) будет показано как создать форму обратной связи.

Постановка задачи

1. Требуется в приложении MVC 3 создать страницу обратной связи.
2. Данные введенные пользователем должны проходить проверку.
3. Отправка данных формы обратной связи должна быть в асинхронном режиме (AJAX)
4. Если у пользователя отключен javascript, это не должно помешать ему отправить данные.

Создаем проект

1. Параметры для создания видны на картинке: без создания проекта тестирования, интернет приложение (с контроллером аутентификации), движок рендеринга razor и использование семантики html5.

2. После отработки генератора проектов наш проект примет вид:

Кодирование

3. Напишем небольшой класс, который будет использоваться при отправке формы feedback. Создайте новый class под названием FeedbackModel в папке Models. Вот такой вот простой:

public class FeedbackModel
{
  public string UserName { get; set; }
  public string Email { get; set; }
  public string MessageText { get; set; }
} 

Теперь добавим несколько полезных атрибутов. Первый атрибут,

[Required]

Да, кстати, атрибуты находятся в пространстве имен System.ComponentModel.DataAnnotations. Атрибут Required потребует от пользователя обязательного ввода этого свойства. Пометим все свойства таким атрибутом. Следующий атрибут

[Display]

Этот атрибут позволит отображать на форме наше поле с правильной (на русском языке) подписью к полю. Для поля UserName атрибут примет вид:

[Display(Name="Имя пользователя")]

Наложим атрибут Display также, на все свойства класса. Следующий атрибут наложит ограничение на количество символов для имени пользователя. Давайте ограничение поставим в 50 символов:

[StringLength(50)]

На свойство MessageText поставим ограничение в 250 символов. Осталось установить еще одно немаловажное ограничение на поле Email. Формат данного свойства должен соответствовать стандарту. Для этого воспользуемся другим атрибутом:

[RegularExpression(@"^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$",
      ErrorMessage = "Неверный формат электронной почты")]

Хочу пояснить параметр ErrorMessage. В каждом атрибуте (ну, или почти в каждом), который накладывает ограничение, есть возможность написать требуемое значение или объяснение причин отказа от введенного значения пользователя. Кстати, это хорошая манера, описывать в атрибутах, что вы хотите от пользователя при вводе данных на форме.

В конечном итоге, после всех манипуляций с атрибутами, Ваш класс должен принять такой вид:

public class FeedbackModel
{
    [Required]
    [Display(Name = "Имя пользователя")]
    [StringLength(50)]
    public string UserName { get; set; }

    [Required]
    [Display(Name = "Адрес электронной почты")]
    [RegularExpression(@"^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$",
                    ErrorMessage = "Неверный формат электронной почты")]
    public string Email { get; set; }

    [Required]
    [StringLength(250)]
    [Display(Name = "Сообщение")]
    public string MessageText { get; set; }
}

4. Запустите компиляцию проекта. Иначе не получится увидеть вновь созданных класс в списке доступных классов.

5. Откроем HomeController.cs и напишем код:

 public ActionResult Feedback()
 {
     return View();
 }

6. Теперь на название метода правой кнопкой вызовем меню, в котором

7. В диалоговом окне настроим параметры для нового представления:

А именно: установим галку “Использовать строго типизированные данные в представлении” (Create a ctrongly-typed view), класс модели выбрать наш вновь созданный класс, шаблон выберем Create (Scaffold template), подключить ссылки на скрипты (Reference script libraries).

После нажатия кнопки “добавить” получим еще одно представление в папке Home.

8. Для удобства было бы не плохо в меню сайта добавить пункт “Обратная связь”. Давайте так и сделаем. Откройте файл _Layout.cshtml из папки Shared и приведите тэг <ul id=”menu”> к следующему виду:

<ul id="menu">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("Feedback", "Feedback", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
</ul>

9. Запустите приложение, и в меню вы сможете увидеть дополнительный пункт “Feedback”. Нажмите на него и Вы увидите страницу обратной связи. Обратите внимание, что подписи к поля ввода соответствуют надписям в атрибутах класса. А если попробуете нажать на кнопку Create, то увидите, что и валидация пользовательского ввода тоже работает:

9.1. Маленькая заминка. Обратите внимание, что поле Сообщение отображает как однострочный <input />, а не как <textarea />. Давайте исправим этот недочет. Для этого надо добавить еще один атрибут к описанию этого поля:

[Required]
[Display(Name = "Сообщение")]
[StringLength(250)]
[DataType(DataType.MultilineText)]
public string MessageText { get; set; }

Новый атрибут помечен жирным шрифтом. Запустим и проверим:

Работает! Поехали дальше.

10. Теперь вернемся к HomeController и напишем еще один метод (Feedback), но уже с некоторым атрибутом. Этот метод будет срабатывать когда пользователь нажмет на кнопку отправить (Create).

[HttpPost]
public ActionResult Feedback(FeedbackModel model)
{
  if (ModelState.IsValid)
  {
    //-------------------------------
    // реальная отправка сообщения
    // не показана в примере
    //-------------------------------

    return View("FeedbackSent");
  }
  return View();
}

Атрибут HttpPost, указывает, что метод непростой, и говорит о том, web-что сервер “работает на запись”. Обратите внимание на сигнатуру метода. Входящий параметр – наш класс! Данный метод “говорит”, что в случае правильности приходящих данных, надо отправить сообщение (этот код скрыт), и после этого вернуть пользователю другое преставление, которое я назвал “FeedbackSent”.

11. Давайте создадим это представление. Кликните правой кнопкой на папке Home, которая находится в паке View.

В открывшимся диалоге выберите параметры указанные на картинке:

У нас появился новый файл, который будет отображать пользователю отправившему сообщение уведомление об результате отправки и слова благодарности за проделанную работу.  Давайте его “доведем до ума”.

@{
  ViewBag.Title = "Спасибо за сообщение";
}
<h2>
  Спасибо за сообщение</h2>
<p>
  Ваше сообщение успешно отправлено. Администрация сайта при необходимости обязательно
  свяжется с Вами.</p>

Вот всё. Согласитесь, всё просто!

Заключение

Это первая статья. Всего их планируется две. В первой части (в этой статье) показано как создавать методы, представления и модели, на примере формы обратной связи. В следующей части, я покажу как сделать отправку сообщения асинхронно (AJAX) с использованием ненавязчивого AJAX.