Asp net создание. Упрощенная интеграция с Javascript. Добавление строго типизированного представления

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

Набросаем план

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

• Главная страница, где отображается информация о вечеринке
• Форма, которая может быть использована для RSVP
• Валидация RSVP формы, которая отобразит страницу с благодарностью
• Заполненный и отправленный ответ о согласии принять участие в вечеринке

В следующих разделах мы будем наращивать MVC проект, который мы создали в начале главы, и добавим эти возможности. Мы можем сделать первый пункт из списка, применив те знания то, которые мы получили ранее, то есть мы можем добавить HTML для наших существующих представлений, где будет дана подробная информация о вечеринке. В показаны дополнения, которые мы сделали в файле Views/Home/Index.cshtml .

Листинг 2-7: Отображение информации о вечеринке

@{ Layout = null; }

Мы на правильном пути. Если вы запустите приложение, вы увидите информацию о вечеринке, ну, вернее, метку-заполнитель (placeholder) для этой информации, но вы можете уловить суть. Пример показан на .

Рисунок 2-12: Добавление представления

Проектирование модели данных

В MVC М обозначает модель , и это является самой важной частью приложения. Модель является представлением реальных объектов, процессов и правил, которые определяют объект, известный как домен , нашего приложения. Модель, которая часто упоминается как доменная модель , содержит C# объекты (известные как доменные объекты ), которые составляют суть нашего приложения, и методы, которые позволяют нам манипулировать ими. Представления и контроллеры раскрывают домен клиентам в согласованном порядке, и хорошо продуманное MVC приложение начинается с хорошо продуманной модели, которая затем является координационным центром, когда мы добавляем контроллеры и представления.

Нам не нужна сложная модель для приложения PartyInvites , но мы создадим один доменный класс, которые мы назовем GuestResponse . Этот объект будет отвечать за хранение, проверку и подтверждение RSVP.

Добавление класса модели

По MVC соглашению классы, которые составляют модель, помещаются в папку Models . Щелкните правой кнопкой мыши по Models в окне Solution Explorer и выберите Add , за которым следует Class , из всплывающего меню. Назовите файл GuestResponse.cs и нажмите кнопку Add , чтобы создать класс. Измените содержимое класса в соответствии с.

Совет

Если у вас нет пункта меню Class , то вы, вероятно, оставили работать отладчик (дебаггер) Visual Studio. Visual Studio ограничивает изменения, которые можно внести в проект, если приложение запущено.

Листинг 2-8: Доменный класс GuestResponse

namespace PartyInvites.Models { public class GuestResponse { public string Name { get; set; } public string Email { get; set; } public string Phone { get; set; } public bool? WillAttend { get; set; } } }

Совет

Вы, возможно, заметили, что свойство WillAttend имеет тип bool? (Nullable), то есть оно может быть true , false или null . Мы объясним это в разделе «Добавление валидации» далее в этой главе.

Ссылка на метод действия

Одна из целей нашего приложение заключается во включении RSVP формы, поэтому нам нужно добавить ссылку на нее из нашего представления Index.cshtml , как показано в .

Листинг 2-9: Добавление ссылки для RSVP формы

@{ Layout = null; }

Html.ActionLink является вспомогательным методом HTML. MVC Framework разработан с набором встроенных вспомогательных методов, которые удобны для обработки HTML ссылок, текстовых вводных данных, флажков, выборок и даже пользовательских элементов управления. Метод ActionLink принимает два параметра: первый – это текст для отображения в ссылке, а второй – это выполняемое действие, когда пользователь нажимает на ссылку. Мы объясним вспомогательные методы HTML в главах 19-21. На показана ссылка, которую мы добавили.

Рисунок 2-13: Добавление в представление ссылки

Если вы наведете курсор мыши на ссылку в браузере, вы увидите, что ссылка указывает на http://yourserver/Home/RsvpForm . Метод Html.ActionLink проверил конфигурацию URL нашего приложения и определил, что /Home/RsvpForm является URL для действия RsvpForm контроллера HomeController . Обратите внимание, что в отличие от традиционных приложений ASP.NET, URL-адреса MVC не соответствуют физическим файлам. Каждый метод действия имеет свой URL, и MVC использует систему маршрутизации ASP.NET перевести эти URL в действия.

Создание метода действия

Если вы нажмете на ссылку, то увидите ошибку 404 Not Found . Это потому что пока еще мы не создали метод действия, который соответствует URL /Home/RsvpForm . Мы сделаем это путем добавления метода RsvpForm нашему классу HomeController , как показано в .

Листинг 2-10: Добавление в контроллер нового метода действия

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace PartyInvites.Controllers { public class HomeController: Controller { public ViewResult Index() { int hour = DateTime.Now.Hour; ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon"; return View(); } public ViewResult RsvpForm() { return View(); } } }

Добавление строго типизированного представления

Мы хотим добавить представление для нашего метода действия RsvpForm , но мы собираемся сделать кое-что больше: то есть создать строго типизированное представление. Строго типизированные представления предназначены для обработки определенного типа доменов. Если мы укажем тип, с которым мы хотим работать (в этом примере GuestResponse), MVC предоставит дополнительные возможности, чтобы упростить нам задачу.

Внимание

Убедитесь, что перед работой ваш MVC проект скомпилирован. Если вы создали класс GuestResponse , но не скомпилировали его, MVC не сможет создать строго типизированное представление для данного типа. Чтобы скомпилировать приложение, выберите Build Solution в Visual Studio меню Build .

Щелкните правой кнопкой мыши внутри метода действия RsvpForm и выберите для создания представления Add View из всплывающего меню. В диалоговом окне Add View поставьте галочку на Create a strongly-typed view и выберите опцию GuestResponse из выпадающего меню. Снимите флажок с Use a layout or master page и убедитесь, что Razor выбран в качестве движка представления, и что опция Scaffold template установлена на Empty , как показано на .

Рисунок 2-14: Добавление строго типизированного представления

Нажмите кнопку Add , и Visual Studio создаст новый файл с именем RvspForm.cshtml и откроет его для редактирования. Вы можете увидеть первоначальное содержание в. Как вы заметили, это другой HTML файл, но он содержит Razor выражение @model . Вы сейчас увидите, что это является ключом к строго типизированному представлению и возможностям, которые оно предлагает.

Листинг 2-12: Начальное содержимое файла RsvpForm.cshtml

@model PartyInvites.Models.GuestResponse @{ Layout = null; }

Построение формы

Теперь, когда мы создали строго типизированное представление, мы можем выстроить содержание RsvpForm.cshtml , чтобы превратить его в HTML форму для редактирования GuestResponse объектов. Измените представление так, чтобы оно соответствовало .

Листинг 2-13: Создание представления формы

@using (Html.BeginForm()) {

Your name: @Html.TextBoxFor(x => x.Name)

Your email: @Html.TextBoxFor(x => x.Email)

Your phone: @Html.TextBoxFor(x => x.Phone)

Will you attend? @Html.DropDownListFor(x => x.WillAttend, new { new SelectListItem() {Text = "Yes, I"ll be there", Value = bool.TrueString}, new SelectListItem() {Text = "No, I can"t come", Value = bool.FalseString} }, "Choose an option")

}

Для каждого свойства класса модели GuestResponse мы используем вспомогательный метод HTML, чтобы обработать подходящий HTML элемент управления input . Эти методы позволяют выбрать свойство, к которому относится элемент input , с помощью лямбда-выражения, например вот так:

@Html.TextBoxFor(x => x.Phone)

Вспомогательный метод HTML TextBoxFor генерирует HTML для элемента input , устанавливает параметр type на text и устанавливает атрибуты id и name на Phone , имя выбранного свойства доменного класса, вот так:

Эта удобная функция работает, потому что наше представление RsvpForm строго типизировано, и мы сказали MVC, что GuestResponse это тот тип, который мы хотим обработать при помощи данного представления, поэтому вспомогательные методы HTML могут понять, какой тип данных мы хотим прочитать, с помощью выражения @model .

Не волнуйтесь, если вы не знакомы с лямбда-выражениями C#. Мы расскажем о них в главе 4, но в качестве альтернативы лямбда-выражениям вы можете обратиться к имени свойства типа модели как к строке, например, вот так:

@Html.TextBox("Email")

Мы считаем, что методика лямбда-выражений помогает нам не делать опечаток в имени свойства типа модели, потому что всплывает Visual Studio IntelliSense и позволяет нам выбрать свойство автоматически, как показано на .

Рисунок 2-15: Visual Studio IntelliSense для лямбда-выражений во вспомогательных методах HTML

Другим удобным вспомогательным методом является Html.BeginForm , который генерирует элемент HTML формы, настроенный на обратную передачу данных методу действия. Поскольку мы не передали вспомогательному методу никаких параметров, он предполагает, что мы хотим передать обратно тот же URL. Ловким трюком является то, чтобы обернуть это в C# выражение using , вот таким образом:

Обычно, когда оно применяется таким образом, выражение using гарантирует, что объект удаляется, когда выходит из области видимости. Оно широко используется для подключения к базе данных, например, чтобы убедиться, что она закрывается, как только запрос был выполнен. (Это применение ключевого слова using отличается от того, что касается области видимости класса).

Вместо удаления объекта, помощник HtmlBeginForm закрывает HTML элемент form , когда он выходит из области видимости. Это означает, что вспомогательный метод Html.BeginForm создает обе части элемента form , например:

Не волнуйтесь, если вы не знакомы с удалением объектов в C#. Наша цель на данный момент состоит в том, чтобы показать, как создать форму с помощью вспомогательного метода HTML. Вы можете видеть форму в представлении RsvpForm , когда вы запустите приложение и нажмете ссылку RSVP Now . На показан результат.

Рисунок 2-16: Представление RspvForm

Примечание

Это не книга о CSS или веб дизайне. По большей части мы будем создавать примеры, внешний вид которых может быть описан как устаревший (хотя мы предпочитаем термин классический , в котором чувствует меньше пренебрежения). MVC представления генерируют очень чистый и простой HTML, и вы можете полностью управлять версткой элементов и классов, к которым они принадлежат, поэтому у вас не будет проблем с использованием дизайнерских средств или готовых шаблонов, чтобы сделать ваш MVC проект красивым.

Обработка форм

Мы не сказали MVC, что мы хотим сделать, когда форма отправляется на сервер. На данный момент нажатие на кнопку Submit RSVP просто удаляет любые значения, которые вы ввели в форму. Это потому что форма отправляется обратно методу действия RsvpForm в контроллере Home , который просто говорит MVC обработать представление еще раз.

Примечание

Вы можете быть удивлены тем фактом, что входные данные теряются, когда представление снова обрабатывается. Если это так, то вы, вероятно, разрабатывали приложения при помощи ASP.NET Web Forms, который автоматически сохраняет данные в этой ситуации. Мы покажем вам, как добиться такого же результата с MVC в ближайшее время.

Чтобы получить и обработать отправленные данные формы, мы собираемся сделать умную и классную вещь. Мы добавим второй метод действия RsvpForm для того, чтобы создать следующее:

• Метод, который отвечает на HTTP GET запросы : GET запрос является тем, с чем браузер имеет дело после каждого клика по ссылке. Этот вариант действий будет отвечать за отображение начальной пустой формы, когда кто-то первый раз посетит /Home/RsvpForm .
• Метод, который отвечает на HTTP POST запросы : По умолчанию, формы, обрабатываемые при помощи Html.BeginForm() , отправляются браузером как POST запросы. Этот вариант действий будет отвечать за получение отправленных данные и решать, что с ними делать.

Обработка GET и POST запросов в отдельных методах C# помогает сохранить наш код опрятным, так как оба метода имеют различные обязанности. Оба метода действия вызываются одним и тем же URL, но MVC гарантирует, что будет вызван соответствующий метод в зависимости от того, имеем ли мы дело с GET или с POST запросом. В показаны изменения, которые мы должны сделать в классе HomeController .

Листинг 2-14: Добавление метода действия для поддержки POST запросов

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using PartyInvites.Models; namespace PartyInvites.Controllers { public class HomeController: Controller { public ViewResult Index() { int hour = DateTime.Now.Hour; ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon"; return View(); } public ViewResult RsvpForm() { return View(); } public ViewResult RsvpForm(GuestResponse guestResponse) { // TODO: Email response to the party organizer return View("Thanks", guestResponse); } } }

Мы добавили атрибут HttpGet для нашего существующего метода действия RsvpForm . Это говорит MVC, что данный метод должен использоваться только для GET запросов. Затем мы добавили перегруженную версию RsvpForm , который принимает параметр GuestResponse и применяет атрибут HttpPost . Атрибут говорит MVC, что новый метод будет иметь дело с POST запросами. Обратите внимание, что мы также импортировали пространство имен PartyInvites.Models – таким образом мы можем обратиться к типу модели GuestResponse без необходимости указывать имя класса. Мы расскажем, как работают наши дополнения в листинге, в следующих разделах.

Использование связывания данных модели

Первый вариант перегруженного метода действия RsvpForm обрабатывает то же представление, что и раньше. Она генерирует форму, показанную на . Второй вариант перегруженного метода является более интересным из-за параметра, но, учитывая, что метод действия будет вызываться в ответ на HTTP POST запрос, и что GuestResponse является типом класса C #, то как они объединены?

Ответом является связывание данных модели – чрезвычайно полезная функциональная особенность MVC, когда входные данные разбиваются (парсятся) и пары ключ/значение в HTTP запросе используются для заполнения свойств типа доменной модели. Этот процесс является противоположностью использования вспомогательных методов HTML; это когда при создании данных формы для отправки клиенту, мы генерировали HTML элементы input , где значения атрибутов id и name были получены из названий свойств классов моделей.

В отличие от этого, со связыванием данных модели, имена элементов input используются для указания значений свойств в экземпляре класса модели, которые затем передаются нашему методу действия с POST поддержкой.

Модель представления данных является мощной и настраиваемой функцией, которая избавляет от рутины работы напрямую с HTTP-запросами и позволяет нам работать с C# объектами, а не иметь дело со значениями Request.Form и Request.QueryString . Объект GuestResponse , который передается в качестве параметра нашему методу действия, автоматически заполняется данными из полей формы. Мы рассмотрим подробно модель представления данных, а также в том числе, как ее можно настроить, в главе 22.

Обработка других представлений

Второй вариант перегруженного метода действий RsvpForm также показывает, как мы можем указать MVC обрабатывать конкретное представление, а не представление по умолчанию, в ответ на запрос. Вот соответствующее выражение:

return View("Thanks", guestResponse);

Этот вызов метода View говорит MVC найти и обработать представление, которое называется Thanks , и передать представлению наш объект GuestResponse . Чтобы создать представление, которое мы указали, щелкните правой кнопкой мыши внутри одного из методов HomeController и выберите пункт Add View из всплывающего меню. Установите имя представления на Thanks , как показано на .

Рисунок 2-17: Добавление представления Thanks

Мы собираемся создать еще одно строго типизированное представление, поэтому поставьте галочку на этом пункте в диалоговом окне Add View . Класс данных, который мы выберем для этого представления, должен соответствовать классу, который мы передали представлению при помощи метода View . Поэтому убедитесь, что в выпадающем меню выбран GuestResponse . Убедитесь, что нет галочки на Use a layout or master page , View engine установлен на Razor, а также Scaffold template установлен на Empty .

Нажмите кнопку Add , чтобы создать новое представление. Поскольку представление связано с контроллером Home , MVC создаст представление как ~/Views/Home/Thanks.cshtml . Измените новое представление так, чтобы оно соответствовало : мы выделили то, что нужно добавить.

Листинг 2-15: Представление Thanks

@model PartyInvites.Models.GuestResponse @{ Layout = null; }

Представление Thanks использует Razor для отображения контента на основе значения свойства GuestResponse , которые мы передали методу View в методе действия RsvpForm . Razor оператор @model определяет тип доменной модели, с которым связано представление. Чтобы получить доступ к значению свойства доменного объекта, мы используем Model.PropertyName . Например, чтобы получить значение свойства Name , мы вызываем Model.Name . Не волнуйтесь, если вам не понятен синтаксис Razor, мы объясним это подробно в главе 5.

Теперь, когда мы создали представление Thanks , у нас есть базовый рабочий пример обработки формы при помощи MVC.

Запустите приложение в Visual Studio, нажмите на ссылку RSVP Now , добавьте в форму данные и нажмите на кнопку Submit RSVP . Вы увидите результат, показанный на (хотя он может отличаться, если ваше имя не Джо, и вы сказали, что не сможете присутствовать).

Рисунок 2-18: Обработанное представление Thanks

Добавление валидации

Сейчас мы подошли к тому, чтобы добавить валидацию в наше приложение. Если бы мы этого не сделаем, наши пользователи смогут ввести бессмысленные данные или даже отправить пустую форму.

В приложении MVC проверка, как правило, применяется к доменной модели, а не к пользовательскому интерфейсу. Это обозначает, что мы определяем наши критерии валидации в одном месте, и они вступают в силу в любом месте используемого класса модели. ASP.NET MVC поддерживает правила проверки, определяемые атрибутами пространства имен System.ComponentModel.DataAnnotations . В показано, как эти атрибуты могут быть применены к классу модели GuestResponse .

Листинг 2-16: Применение валидации к классу модели GuestResponse

using System.ComponentModel.DataAnnotations; namespace PartyInvites.Models { public class GuestResponse { public string Name { get; set; } public string Email { get; set; } public string Phone { get; set; } public bool? WillAttend { get; set; } } }

Правила валидации выделены жирным шрифтом. MVC автоматически обнаруживает атрибуты и использует их для проверки данных во время представления модели данных. Обратите внимание, что мы импортировали пространство имен, содержащее правила валидации, поэтому мы можем ссылаться на них без необходимости указывать их имена.

Совет

Как отмечалось ранее, мы использовали тип bool? для свойства WillAttend , поэтому мы смогли применить атрибут валидации Required . Если бы мы использовали обычный bool , значение, которое мы могли бы получить благодаря модели представления данных, могло бы быть только true или false , и мы не были бы сказать, выбрал ли пользователь значение. Тип bool? имеет три возможных значения: true , false и null . Значение null будет использовано, если пользователь не выбрал значение, и это заставляет атрибут Required сообщить об ошибке валидации.

Мы можем проверить, была ли ошибка валидации проверкой с помощью свойства ModelState.IsValid в нашем классе контроллера. В показано, как это можно сделать в нашем методе действия RsvpForm с поддержкой POST .

Листинг 2-17: Проверка на наличие ошибок при валидации формы

public ViewResult RsvpForm(GuestResponse guestResponse) { if (ModelState.IsValid) { // TODO: Email response to the party organizer return View("Thanks", guestResponse); } else { // there is a validation error return View(); } }

Если ошибки валидации нет, мы говорим MVC обрабатывать представление Thanks , как мы делали ранее. Если ошибка валидации есть, мы вновь обрабатываем представление RsvpForm , вызвав метод View без параметров.

Просто отображать форму, когда есть ошибка, не очень полезно, мы должны дать пользователю некоторую информацию о том, в чем заключается проблема, и почему мы не можем принять его форму. Мы делаем это с помощью вспомогательного метода Html.ValidationSummary в представлении RsvpForm , как показано в .

Листинг 2-18: Использование вспомогательного метода Html.ValidationSummary

@model PartyInvites.Models.GuestResponse @{ Layout = null; } @using (Html.BeginForm()) { @Html.ValidationSummary()

Your name: @Html.TextBoxFor(x => x.Name)

Your email: @Html.TextBoxFor(x => x.Email)

Your phone: @Html.TextBoxFor(x => x.Phone)

Will you attend? @Html.DropDownListFor(x =>

}

Если ошибок нет, метод Html.ValidationSummary создает скрытый элемент списка в качестве заполнителя в форме. MVC делает метку-заполнитель видимой и добавляет сообщения об ошибке, определяемые атрибутами валидации. Вы можете увидеть, как это выглядит, на .

Рисунок 2-19: Сводка результатов валидации

Пользователю не будет показано представление Thanks , пока не будут удовлетворены все правила валидации, которые мы применили к классу GuestResponse . Обратите внимание, что данные, введенные в форму, были сохранены и отображаются снова, когда представление показано со сводкой валидации. Это еще одно преимущество связывания данных.

Примечание

Если вы работали с ASP.NET Web Forms, вы знаете, что в Web Forms существует понятие «серверные элементы управления», которые сохраняют состояние, сериализуя значения в скрытом поле формы __VIEWSTATE . Связывание данных ASP.NET MVC не привязано к Web Forms концепции серверных элементов управления, обратной передачи данных или View State. ASP.NET MVC не вводит скрытое поле __VIEWSTATE в обрабатываемые HTML страницы.

Выделение невалидных полей

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

Если свойство класса модели не прошло валидацию, вспомогательные методы HTML будут генерировать немного другой HTML. В качестве примера, вот HTML, который генерирует вызов Html.TextBoxFor (х => x.Name) , когда нет ошибки валидации:

А вот HTML, который генерирует тот же вызов, когда пользователь не предоставил значение (что является ошибкой валидации, потому что мы применили атрибут Required свойства Name в классе модели GuestResponse):

class="input-validation-error" data-val="true" data-val-required="Please enter your name" id="Name" name="Name" type="text" value="" />

Мы выделили различия. Это вспомогательный метод добавил класс с именем input-validation-error . Мы можем воспользоваться этой функцией, создав таблицу стилей CSS, которая содержит стили для этого класса и других, что применяют различные вспомогательные методы HTML.

Соглашение в MVC проектах заключается в том, что статический контент, такой как таблицы стилей CSS, помещается в папку под названием Content . Мы создали папку Content , нажав правой кнопкой мыши по проекту PartyInvites в Solution Explorer и выбрав из всплывающего меню Add New Folder . Мы создали таблицу стилей, щелкнув правой кнопкой мыши по папке Content , выбрав Add New Item и затем выбрав Style Sheet в диалоговом окне Add New Item . Мы назвали нашу таблицу стилей Site.css , и это имя, которое Visual Studio использует при создании проекта с использованием иного шаблона MVC, а не Empty. Вы можете посмотреть содержимое файла Content/Site.css в.

Листинг 2-19: Содержимое файла Content/Site.css

.field-validation-error {color: #f00;} .field-validation-valid { display: none;} .input-validation-error { border: 1px solid #f00; background-color: #fee; } .validation-summary-errors { font-weight: bold; color: #f00;} .validation-summary-valid { display: none;}

Чтобы использовать эту таблицу стилей, мы добавили новую ссылку в раздел head представления RsvpForm , как показано в . Вы добавляете представлениям элементы link так же, как в обычном статическом HTML файле.

Листинг 2-20: Добавление элемента link в представление RsvpForm

@model PartyInvites.Models.GuestResponse @{ Layout = null; } @using (Html.BeginForm()) { @Html.ValidationSummary()

Your name: @Html.TextBoxFor(x => x.Name)

Your email: @Html.TextBoxFor(x => x.Email)

Your phone: @Html.TextBoxFor(x => x.Phone)

Will you attend? @Html.DropDownListFor(x => x.WillAttend, new { new SelectListItem() {Text = "Yes, I"ll be there", Value = bool.TrueString}, new SelectListItem() {Text = "No, I can"t come", Value = bool.FalseString} }, "Choose an option")

}

Совет

Если вы использовали MVC 3, то могли ожидать, чтобы мы добавим CSS файл к представлению, указав атрибут href как @Href("~/Content/Site.css") или @Url.Content("~/Content/Site.css") . С MVC 4 Razor автоматически обнаруживает атрибуты, которые начинаются с ~/ , и автоматически вставляет для вас @Href или @Url .

Теперь будет отображаться визуально более очевидная ошибка валидации, если были представлены данные, которые вызвали эту ошибку, как показано на .

Рисунок 2-20: Автоматически выделенные ошибки валидации

Завершаем пример

Последнее требование к нашему примеру приложения заключается в том, чтобы отправить имейл с завершенными RSVP нашему другу, организатору вечеринки. Мы могли бы сделать это, добавив метод действия, чтобы создать и отправить по электронной почте сообщение, используя e-mail классы.NET Framework. Вместо этого мы собираемся использовать вспомогательный метод WebMail . Это не входит в рамки MVC, но это позволит нам завершить данный пример, не увязнув в деталях создания других средств отправки электронной почты.

Примечание

Мы использовали вспомогательный метод WebMail , потому что он позволяет нам с минимальными усилиями продемонстрировать отправку сообщений электронной почты. Однако, в обычной ситуации мы предпочли бы переложить эту функцию на метод действия. Мы объясним, почему, когда будем описывать архитектурный MVC паттерн в главе 3.

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

Листинг 2-21: Использование вспомогательного метода WebMail

@model PartyInvites.Models.GuestResponse @{ Layout = null; } @{ try { WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 587; WebMail.EnableSsl = true; WebMail.UserName = "mySmtpUsername"; WebMail.Password = "mySmtpPassword"; WebMail.From = "[email protected]"; WebMail.Send("[email protected]", "RSVP Notification", Model.Name + " is " + ((Model.WillAttend ?? false) ? "" : "not") + "attending"); } catch (Exception) { @:Sorry - we couldn"t send the email to confirm your RSVP. } }

Мы добавили Razor выражение, которое использует вспомогательный метод WebMail для настройки информации о нашем сервере электронной почты, включая имя сервера, требует ли сервер SSL соединения и данных учетной записи. После того как мы все настроили, мы используем метод WebMail.Send для отправки электронной почты.

Мы включили весь имейл код в блок try...catch , чтобы мы могли предупредить пользователя, если электронная почта не отправилась. Мы делаем это путем добавления текстового блока к выходным данным представления Thanks . Лучше было бы отобразить отдельное представление ошибки, если сообщение электронной почты не может быть отправлено, но мы хотели не усложнять наше первое MVC приложение.

Сегодня я хочу привести 10 веских причин, почему ASP.NET для начинающих подходит больше всего:

Если вы уже работаете с PHP или Java (или даже .NET ), или просто хотите понять, как создавать веб-приложения, то я бы рекомендовал вам задуматься об ASP.NET .

1. Отсутствие System.Web

Для нас, пользователей WebForm , без нее не обойтись при разработке веб-приложений. Если вы решитесь перейти к ASP.NET MVC Core 1.0 , то в нем исключено взаимодействие с библиотекой System.Web , что позволяет ускорить загрузку и работу сайта на базе ASP.NET .

2. Новая улучшенная модель 2016 года

ASP.NET MVC 4 для начинающих и ASP.NET MVC 5 канул в Лету… Некоторое время назад .NET был полностью переписан и переименован в ASP.NET Core 1.0 . Это еще больше облегчило жизнь разработчиков. Из привычного цикла, состоящего из написания кода, компиляции и тестирования работоспособности был исключен этап компиляции. Это значительно ускоряет процесс разработки.

3. Более естественные ощущения

Я был разработчиком в Microsoft еще со времен Classic ASP , и когда я перешел на WebForms , этот переход вовсе не показался мне естественным. С появлением MVC процесс разработки веб-приложений стал более натуральным, и такой формат работы мне понравился. В MVC нет ViewState или IsPostback , и о них не нужно постоянно беспокоиться. Все очень похоже на PHP .

4. Самый популярный в школе

Так как ASP.NET базируется на IIS – одном из самых популярных веб-серверов, то работа с MVC кажется вполне привычной. Большинство корпораций во времена Classic ASP начинали именно с IIS . На сегодняшний день IIS-серверы занимают 28% всего интернета и уступают по популярности только Apache и nginx .

5. Упрощенная интеграция с Javascript

В WebForms при попытке использовать Javascript могли возникнуть всевозможные проблемы, о которых многие из нас даже не подозревают. Мне доводилось видеть, как разработчики мучились с интеграцией JavaScript в код WebForm Page_Load ! В свою очередь, ASP.NET MVC для начинающих позволяет практически безукоризненно интегрировать Javascript в приложения. Просто попробуйте внедрить AngularJs в какое-нибудь веб-приложение на WebForms , а потом расскажите мне, сколько волос осталось на вашей голове.

6. Открытый исходный код

Теперь каждый может просматривать код! Если вы хотите дополнить View , и создать собственный ViewEngine , просто ознакомьтесь с кодом на Github , и посмотрите, как он реализован. Доступ к исходному коду развивает воображение!

7. Кроссплатформенная поддержка

Теперь можно создавать веб-приложения на любой платформе: Apple , Linux или Windows .

8. Независимость от Visual Studio

Чуть ли не с момента первого упоминания о выходе обновленного .NET/ASP.NET , всевозможные разработчики (включая Microsoft ) занялись созданием собственных IDE , которые раскрывают возможности новой версии .NET . Такие IDE (Visual Studio Code или Rider на #C от JetBrains) позволяют разрабатывать собственные ASP.NET и C# проекты без Visual Studio . Теперь не так важно, какую среду использует разработчик, ведь клиентам просто нужен готовый сайт!

9. Адекватное сообщество

ASP.NET MVC для начинающих и для большинства веб-разработчиков как глоток свежего воздуха. Этот инструмент переносит нас в новую эру, далекую от WebForms . Значительная часть разработчиков уже перешла на MVC .

10. Модульное тестирование

Кроме этого ASP.NET MVC предоставляет возможность модульного тестирования. Это в значительной степени облегчает процесс тестирования. Для некоторых разработчиков WebForm это покажется принципиально новым концептом, так как до этого тестирование некоторых интерфейсов и бизнес-компонентов создавало огромные проблемы. В ASP.NET MVC можно без труда протестировать все компоненты и убедиться в полной работоспособности приложения.

В завершение

Надеюсь, что сегодня вы получили достаточно информации о качествах ASP.NET MVC , ради которых стоит перейти на этот инструмент.

Перевод статьи “10 Reasons To Start Using ASP.NET MVC ” был подготовлен дружной командой проекта .

Хорошо Плохо

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

ASP.NET MVC представляет собой платформу для создания сайтов и веб-приложений с использованием паттерна (или шаблона) MVC (model - view - controller).

Работа над новой платформой была начата в 2007 году, а в 2009 году появилась первая версия. В итоге к текущему моменту (2012 год) уже было выпущено 4 версии платформы, а сам фреймворк обрел большую популярность по всему миру благодаря своей гибкости и адаптивности.

Шаблон MVC, лежащий в основе новой платформы, подразумевает взаимодействие трех компонентов: контроллера (controller), модели (model) и представления (view). Что же представляют эти компоненты?

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

Представление (view) - это собственно визуальная часть или пользовательский интерфейс приложения - например, html-страница, через которую пользователь, зашедший на сайт, взаимодействует с веб-приложением.

Модель (model) представляет набор классов, описывающих логику используемых данных.

Общую схему взаимодействия упрощенно можно представить следующим образом:

ASP.NET MVC и ASP.NET Web Forms

ASP.NET MVC является в некотором роде конкурентом для традиционных веб-форм и имеет по сравнению с ними следующие преимущества:

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

В силу разделения ответственности приложения mvc обладают лучшей тестируемостью . И мы можем тестировать отдельные компоненты независимо друг от друга.

Соответствие протоколу HTTP . Приложения MVC в отличие от веб-форм не поддерживают объекты состояния (ViewState). Ясность и простота платформы позволяют добиться большего контроля над работой приложения

Гибкость . Вы можете настраивать различные компоненты платформы по своему усмотрению. Изменять какие-либо части конвейера работы MVC или адаптировать его к своим нуждам и потребностям.

В то же время не стоит однозначно сбрасывать со счетов ASP.NET WebForms. Поскольку она также имеет свои сильные стороны, например, модель событий, которая будет ближе тем разработчикам, которые ранее занимались созданием клиентских приложений.

В традиционных веб-формах вы имеете контроль над разметкой и можете в реальном времени в визуальном редакторе Visual Studio увидеть, как будет выглядеть та или иная страница. При работе с MVC Visual Studio подобного не позволяет делать.

В любом случае вы вольны выбирать ту платформу, которая приходится вам больше по душе. И если у вас написаны объемные проекты с применением традиционных веб-форм, возможно, стоит продолжать с ними работать. Тем более, что ASP.NET Web Forms еще не умирает и также продолжает развиваться.

Введение

1. Исследовательская часть

1.1 Описание предметной области

1.2 Особенности создания страниц на языке APS.NET

1.3 Особенности создания и обращения к базам данных

2. Конструкторская часть

2.1 Структура базы данных

2.2 Принцип работы первой страницы сайта

2.3 Принцип работы второй страницы сайта

2.4 Принцип работы третьей страницы сайта

2.5 Принцип работы четвертой страницы сайта

2.6 Принцип работы пятой страницы сайта

2.7 Принцип работы шестой страницы сайта

2.8 Принцип работы седьмой страницы сайта

2.9 Принцип работы восьмой страницы сайта

2.10 Принцип работы девятой страницы сайта

2.11 Принцип работы десятой страницы сайта

3. Технологическая часть

3.1 Настройка приложения

3.2 Работа с сайтом

3.3 Системные требования

Заключение

Список использованной литературы

Введение

Целью данной курсовой научно-исследовательской работы студента является создание сайта на языке ASP.NET 2005, который позволяет просматривать и вносить изменения в базу данных студентов. ASP.NET – это часть технологии.NET, используемая для написания мощных клиент – серверных интернет приложений. Она позволяет создавать динамические страницы HTML. Динамическими принято называть web – страницы, которые перед отправкой клиенту проходят цикл обработки на сервере. ASP.NET возникла в результате объединения более старой технологии ASP и.NET Framework. Данная работа состоит из четырех динамических страниц, часть из которых взаимодействует с базой данных. Для работы с базой данных используется язык структурированных запросов – SQL (Structured Query Language).

1. Исследовательская часть

1.1 Описание предметной области

Данная работа использует язык APS.NET 2005, который позволяет выполнять обработку событий, вследствие чего старицы являются динамическими. При обработке некоторых событий, происходит соединение с базой данных и выполнение различных запросов и операций. Следствием таким запросов может быть изменения базы данных, добавление новых данных в базу, вывод данных из базы на дисплей. Для взаимодействия с базой данных используется пространство имен System.Data.SqlClient.

1.2 Особенности создания страниц на языке APS.NET

Любая страница состоит из двух частей. Первая часть – Design, представляет собой пустое пространство, на котором можно разместить элементы управления. Вторая часть – Source, представляет собой код языка ASP.NET. Добавление нового кода, происходит при добавлении нового объекта в окне Design, либо при ручном заполнении. Для того чтобы добавить новый элемент в окно Design, его необходимо выбрать из вкладки Toolbox, и перетащить на форму. По аналогии с C#, имеется окно Properties, в котором можно задать те или иные параметры для элементов управления, или задать те или иные события.

Каждая страница начинается со следующего кода: « <% Page Language=”текущий язык программирования” %> ». Где тег “<%” всегда предназначен для интерпретации ASP – кода. Атрибут Language – это указание, что в скриптах данной страницы будет использоваться определенный язык программирования. В данной работе – это язык C#. Затем идет код вида: «

». Этот тег дает указание компилятору обрабатывать элементы управления страницы. Данный тег имеет свойство runat, для которого установлено значение “server” (других значений не бывает). При использовании этого свойства элемент управления обрабатывается компилятором, а не передается браузеру «как есть».

При двойном щелчке на объекте в окне Design откроется файл, с названием аналогичным названию страницы, но отличающийся от нее тем, что добавляется выражение типа «.cs» в конце расширения файла. Также появится код, который соответствует событию по умолчанию для данного элемента. В данном файле ведется разработка кода уже не на языке ASP.NET, а на том языке, который вы выбрали, для данной работы – это язык C#. Задание и обращение к свойствам, методам ничем не отличается от обращения к ним же при написании любой другой программы на конкретно выбранном языке.

Метод Response.Write()

Данный метод отправляет в браузер HTML код. Этот метод является полезным при выведении коротких сообщений. К примеру, он может использоваться при проверке введенных значений для вывода результата.

1.3 Особенности создания и обращения к базам данных

Базы данных прошли долгий путь развития. Вначале все данные хранились в простых файлах. По мере увеличения объемов данных встал вопрос о том, как получить быстрый доступ к нужной информации. Для этого данные стали индексироваться. Другой вопрос – как избежать дублирования, когда одни и те же данные хранятся в разных местах. Сегодня мощная промышленная СУБД немыслима без систем защиты информации, журналирования, транзакции и хранимых процедур.

Данные в СУБД хранятся в таблицах. Таблица состоит из полей и записей. Запись – единица хранения данных, строка таблицы. Для работы с базами данных используется язык структурированных запросов – SQL (Structured Query Language). Команды этого языка называются запросами. Запросы служат для получения данных, для создания и изменения структуры таблиц, добавления, удаления и обновления записей и многого другого. Последовательность команд может храниться прямо на сервере СУБД в виде хранимой процедуры. Либо задаваться в виде набора команд, которые всегда проходят стадию компиляции.

Для создания базы данных в окне Sever Explorer нужно нажать на пункт Data Connections правой кнопкой мыши, и в контекстном меню выбрать Create New Sql Database.

Рис. 1. Создание базы данных

На (рис. 1) показан пример создания базы данных. Для того чтобы указать компилятору, что база находится на локальном компьютере, в поле «Server name» нужно вписать «.\SQLExpress» или «(local)». Имя базы данных указывается в графе «New database name». После нажатия кнопки «ОК», база данных сохранится под указанным именем с расширением «.mdf».

После создания базы данных, в ней необходимо создать таблицы для хранения данных. Таблицу можно сделать и программно, и через окно «Server Properties». При выполнении такой последовательности действий появится узел созданной базы. Его нужно раскрыть, и щелкнуть мышью на пункт Tables, в контекстном меню нужно выбрать «Add New Table». Появится диалоговое окно, в котором нужно указать название столбца, тип данных, которые будут храниться в нем, и разрешение на хранение в ячейке нулевых значений. Бывают такие ситуации, что при создании новых строк, значения в каком-то определенном столбце автоматически увеличивались, этого можно добиться путем выбора пункта «Set Primary Key».

Объект Connection

Объект Connection для соединения с базой данных нуждается в строке соединения для указания пути к СУБД. Свойства класса Connection указаны в таблице:

Метод Open()

Данный метод вызывается после создания объекта SqlConnection, с заданной строкой соединения - ConnectionString. Метод Open() пытается установить соединения с базой данных. Если соединения установить не удается, то появляется соответствующее окно с сообщением об ошибке.

Использование объекта SqlCommand

Объект SqlCommand исполняет запрос SQL, который может быть в форме встроенного текста, процедуры сервера или прямого доступа к таблице. Если это запрос на выборку данных SELECT, то данные обычно помещают в DataSet или в DataReader, но также можно производить и ручные манипуляции. Запросом на добавление данных является INSERT, на изменение UPDATE, на удаление DELETE.

Процедуры сервера нуждаются в параметрах. Они хранятся в коллекции Parametrs и имеют тип SqlParametr. Текстовые команды также могут получать параметры, перед которыми ставится префикс @.

"SELECT id FROM WHERE SecondName = @DropDownList1.Text"

Или же можно использовать форматированный вывод:

Метод ExecuteNonQuery()

Данный метод применим к объектам типа SqlCommand. С помощью данного метода можно выполнять любые операции с базами данных, которые не связаны с запросом или получением данных, например, обновление, удаление записей, создание и изменение таблиц, создание процедур сервера. Она возвращает количество измененных записей в том случае, если выполняются команды Select, Update, Delete.

Метод ExecuteScalar()

Данный метод применим к объектам типа SqlCommand. Этот метод возвращает результат запроса в случае, если это единственное значение.

Рассмотрим пример:

string.Format("SELECT id FROM WHERE SecondName = "{0}"", DropDownList1.Text);

В результате будет возвращено значение поля “id” базы даных, с параметром SecondName равным значению, выбранному из списка. Данный метод работает гораздо быстрее метода ExecuteReader().

Метод ExecuteReader()

Данный метод выполняется, если нужно получить табличные данные. Результат выполнения – курсор, в котором можно двигаться только от начала до конца.

В результате выполнения метода ExecuteReader() объекта Command создается объект DataReader. После использования данного метода необходимо закрывать соединения с базой, иначе такой процесс останется активным и будет занимать ресурсы. Закрыть соединение можно двумя способами. Первый – вызвать перегруженный метод ExecuteReader(), который принимает параметр типа CommandBehavior сл значением CommandBehavior.CloseConnection. В таком случае необходимо перелистать полученную выборку от начала до конца, и соединение закроется, когда будет достигнут конец.

Many Web sites include content that is available only to people who have logged in (that is, who have been authenticated). By default, ASP.NET provides Web site project templates that include pages that let you perform authentication tasks.

The ASP.NET Web project template that is illustrated in this walkthrough is new in Visual Studio 2010.

This walkthrough shows you how to use an ASP.NET Web project template to create a Web site with basic login functionality.

Tasks illustrated in this walkthrough include:

Creating an ASP.NET Web site.

Creating a members-only page. The page will be accessible only to authenticated users (users who are logged in).

Using the registration page, which enables users to register and create a new account.

Logging in and accessing information that is available only to authenticated users.

Using the change-password page, which enables users who have an account to change their password.

Making the change-password page accessible to authenticated users (but only to authenticated users).

Prerequisites

In order to complete this walkthrough, you will need:

Microsoft Visual Web Developer 2010 Express or Visual Studio 2010.

SQL Server Express installed locally on your computer. For information about how to install SQL Server Express, see How to: Connect to the AdventureWorksLT Database using an .MDF File .

Creating a New Web Site Project

You will start by creating a new ASP.NET Web site project. The project template that you use includes many of the elements that are required in order to create a site that supports authentication.

This walkthrough uses a Web site project. You could use a Web application project instead. For information about the difference between these Web project types, see Web Application Projects versus Web Site Projects .

To create a new ASP.NET Web site

Start Visual Studio or Visual Web Developer.

In the File menu, click New Web Site . (If you do not see this option, click New , and then click Web Site .)

The New Web Site dialog box is displayed.

Under Installed Templates , click Visual Basic or C# and then select ASP.NET Web Site .

In the Web Location box, select File System and enter the name of the folder where you want to keep the pages of the Web site. For example, enter the folder name C:\Websites\Login and then click OK .

Visual Studio creates the folder and opens the Web site in Source view. Notice that the root Web site contains several files and folders including the Account folder, a Web.config file, the About.aspx and Default.aspx pages, and the Site.master master page.

The home of page of the Web site is displayed in the browser. Notice the menu items (Home , About ) and the Log In hyperlink.

Close the browser.

Creating a Members Only Page

In this section, you will create a members-only page. Only users who are logged in (authenticated users) can access this page. You will add a control to the master page to redirect authenticated users to the members-only page. When users who are not logged in (anonymous users) click the members-only hyperlink, they will be redirected to the login page where they can login or create an account.

To create the members only page

In Solution Explorer , right click the Account folder and then click Add New Item .

Make sure that you are creating the new page in the Account folder.

In the New Web Sites dialog box, select Web Form .

In the Name text box, enter MembersOnly.aspx.

Select the Select master page check box and then click Add .

The Select a Master Page dialog box is displayed.

Under Contents of folders , select Site.master and then click OK .

The MembersOnly.aspx page is created in the Account folder. The page is a content page for the Site.master page.

In Solution Explorer , double-click the MemberOnly.aspx page to open it, and then switch to Design view.

Add content to the main page.

For example, you can add "Welcome to the members-only page. You have successfully logged in."

In addition to the page that you have created, the Account folder contains the following pages and files:

Register.aspx. This page lets new users create an account.

Login.aspx page. This asks for a user name and password.

ChangePassword.aspx. This page lets registered users change their password.

ChangePasswordSuccess.aspx. This page is displayed when users successfully change their password.

A Web.config file.

By default, pages in the Account folder are not accessible to anonymous users, except the Register.aspx and the Login.aspx pages. The settings that define access to pages in the Account folder are configured in the Web.config file in that folder. The settings that define access to the Login page is configured in the root Web.config file.

In the Properties windows, change the Text property to Change Password. You can accept the default ID.

In the Properties window, click NavigateUrl and click the ellipsis (... ) button.

The Select URL dialog box is displayed.

Under Project folders , click Account .

Under Contents of folder OK .

Press CTRL+F5 to run the page.

Notice that the Change Password link is accessible when you are not logged in.

Click Change Password .

You are redirected to the login page because the change-password page is accessible to authenticated users only.

Enter the user name and password that you created earlier, and then click Log In .

Click Log Out .

When you are returned to the home page, close the browser.

Next, you will modify the Change Password hyperlink to make it accessible only to users are logged in. You do this by adding the hyperlink to the HeadLoginView control on the master page.

To make the change-password link available only to logged-in users

In Solution Explorer , double-click Site.master.aspx to open it, and then switch to Design view.

Delete the Change Password hyperlink that you created earlier.

Switch to Source view.

From the Standard node of the Toolbox , drag a control into the LoggedInTemplate element that is inside the LoginView control.

Set the Text property to Change Password.

After the runat="server" attribute, type "NavigateUrl=" and then double-click Pick URL… from the pop-up list.

The Select Project Item dialog box is displayed.

Under Project folders , click Account .

Under Contents folder , select ChangePassword.aspx and then click OK .

The markup for the hyperlink will resemble the following:

Change Password

Note that this hyperlink will not be visible in Design view, because the contents of the LoggedInTemplate element are not visible by default.

Testing the Web Site

You can now test the change-password functionality of the Web site.

To test the change password page

Press CTRL+F5 to run the site.

The home page is displayed, but the Change your password link is not visible.

Click Log In and enter your user name and password.

You are redirected to the home page. Notice that your name and the Change your password link are now visible.

Click Members Only.

You are redirected to the members-only page.

Click Change your password .

The change-password page is displayed.

Enter a new password.

Click Change Password . If the change is successful, the success page will be displayed.

Testing the New Password

Next you will use your new password to login again and access the members-only page.

To test the new password

Click Log Out . You will be redirected to the home page that anonymous users see.

Click Log In .

Enter your user name and the new password and then click Log In .

You are redirected to the home page. You can now access content that is available to authenticated users. .

Click Members Only .

You are redirected to the members-only page. If you try to login with your old password authentication will fail.

Close the browser.

Next Steps

In this walkthrough, you used pages that are part of the ASP.NET Web site project template in order to create a Web site that authenticates users. If you prefer, you can also create your own login pages to provide the same functionality that is illustrated in the walkthrough. For more information, see .