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

ru-RU | создано: 04.06.2011 | опубликовано: 04.06.2011 | обновлено: 01.01.2018 | просмотров за всё время: 91054

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

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

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

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

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

 

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

1

Кодирование

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. Теперь на название метода правой кнопкой вызовем меню, в котором

image

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

image

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

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

image

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, то увидите, что и валидация пользовательского ввода тоже работает:

image

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

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

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

image

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

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

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

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

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

image

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

2

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

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

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

Заключение

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

Комментарии к статье (17)

13.07.2011 9:31:00 mr_young

Архив с примером битый

13.07.2011 9:40:00 calabonga

А сейчас???

13.07.2011 10:33:00 mr_young

Спасибо, теперь всё нормально

31.10.2011 13:38:00 Маржик

Здравствуйте! Я загрузила SampleAjaxMvcApplication.zip, открыла не работает выходить ошибка  the project type is not supported by this installation

07.11.2011 1:19:00 calabonga

Для того чтобы проект работал надо установить MVC 3 Toolkit

09.11.2011 10:40:00 marjik

spasibo!

30.01.2012 20:09:00 Artem

 Данный метод “говорит”, что в случаи . надо "в случаЕ".
За статьи спасибо)

31.01.2012 1:18:00 calabonga

спасибо, Artem, поправил опечатку.

04.03.2012 19:43:00 Димка
блин а где же сама отправка мыла....( такой облом((
10.03.2012 22:48:00 Димка

письмо отправить поолучилось....   подскажите пж как получить в контроллере текст, который ввел отправляющий письмо - имя, тема, сообщение....

11.03.2012 0:57:00 Calabonga

в примере всё есть... и имя, и тема, и сообщение...

14.03.2012 14:36:00 Димка
оказалось все очень просто:

WebMail.SmtpServer = "smtp.gmail.com";
WebMail.SmtpPort = 587;
WebMail.EnableSsl = true;
 WebMail.UserName = "";
 WebMail.Password = "";

 WebMail.Send("@gmail.com", "Сообщение с сайта маг юг от " + model.UserName, model.MessageText, model.Email);  

Кстати если бы вы написали цикл статей по созданию блога на асп мвц, было бы офигенно, все равно блог писать будите))  я бы за эти статьи даже деньги заплатил )
20.03.2012 15:03:00 Calabonga

Димка, вы не поверите, но такая идея (про цикл статей) уже давно вынашивается мной. Но хочется "положить" эти статьи уже в новый блог, который сейчас находится в процессе разработки. Так что смею вас заверить, что статьи будут... Но только в новом блоге на новом сайте.

17.09.2012 0:37:41 Ахмед

Может, к этому времени  ваш новый блог, сайт готов, и если да, то дайте ссылку))

25.07.2013 18:12:38 Михаил

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

26.07.2013 1:00:41 Calabonga

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

05.09.2013 1:33:17 Anton

Где-то можно заказать изготовление сайта по технологии ASP.NET?

(я хоть правильно выразился? :-))

Нужен функционал как у sberkassa +возможность периодического добавления новых модулей-расширений.