Уже не раз на страницах блога был материал о форме обратной связи. Но о форме с использованием Knockout еще не было. Про это и будет мой сказ.
Создание и подготовка проекта
У меня студия Visual Studio 2012 Ultimate с лицензией подписчика (не плохо да?), но вы можете воспользоваться и бесплатной версией (VS 2012 Express). Создаю новый проект ASP.NET MVC4. Сразу же, чтобы не терять время запускаю команду обновления всех nuget-пакетов (выполняю команду в Package Manager Console):
Теперь поставлю несколько дополнительных пакетов, конечно же nuget-пакетов:
Раскидаю всё по папкам, для удобства, привычка, для красоты (нужное подчеркнуть). Принцип простой, мухи и котлеты отдельно:
Обратите внимание, что App в папке Scripts появится как результат установки пакета JsSite. Далее следует “прибраться” в шаблоне. Для начала удаляю _Layout.cshtml и вместо него в файле _ViewStart.cshtml ставлю использование _LayoutExtended.cshtml:
В самом шаблоне _LayoutExtended.cshtml добавлю еще одну закладку:
В строке 5 можете наблюдать добавленный пункт меню. А в контроллере HomeController соответственно, нужен метод Feedback:
К методу полагается еще и представление Feedback.cshtml. Я его тоже создал, но пока оставил его пустым.
А еще я сразу добавил загрузку Bundle для Knockout внизу странице (сразу после регистрации jquery):
Создание самого пакета сжатия и минимизации в следующей части.
Разберемся с Bundle
В папке App_Start есть файл BundleConfig.cs, в котором уже есть пакеты (bundles), я добавил еще для knockout и, таким образом, вот полный файл:
В строках с 7-15 вы можете наблюдать то, что я добавил для работы knockout и для jssite. Кажется ничего не забыл.
Начнем программировать
Для того чтобы всё получилось сначала создаем FeedbackViewModel класс, для того чтобы на было что получать на стороне сервера:
Теперь создаем контроллер. Я буду использовать простой контроллер, который является наследником от Controller, но вы в праве использовать и ApiController. Вот содержание файла AjaxController.cs:
На данном этапе серверная часть завершена. Теперь займемся javascript’ами.
JavaScript не желаете?
В папке Scripts/App есть файл site.services.js, в нем примерный код для обращения к сервисам сайта. Я написал такой код сервиса:
Теперь создаю новый файл site.vm.feedback.js, в котором будет ViewModel (на javascript, естественно), для работы формы обратной связи. Приведу весь код, а потом немного прокомментирую:
Строки 3-14: Модель (если хотете “класс”) Feedback.
Строки 6,8,10,12: Рассширения класса Feedback, наложенные для валидации объекта на форме. Для этого используется Knockout.Validation.js.
Строки 16-42: ViewModel формы обратной связи.
Строка 17: Свойство используется для отображения сообщения с сервера о результате отправки формы.
Строка 18: Экземпляр класса Feedback.
Строка 21: Инициализируем валидатор ошибок, задав объект для валидации.
Строка 22-26: Функция отправки сообщения.
Строка 27-37: Обработка результатов отправки, полученных с сервера.
Строка 49: Привязка модели к форме (это самая магическая магия под названием knockout).
Представление формы (View)
Давайте я просто покажу саму форму. А если будут вопросы, буду рад ответить на них:
Инфраструктура ASP.NET MVC Framework включает набор встроенных вспомогательных методов, которые помогают управлять созданием HTML-элементов
Это представление содержит стандартную вручную созданную форму, в которой значения атрибута value элементов устанавливаются с использованием объекта модели.
Обратите внимание, что атрибуты name всех элементов установлены в соответствие со свойствами модели, которые эти элементы отображают. Атрибут name применяется стандартным связывателем моделей ASP.NET MVC Framework для выяснения того, какие элементы содержат значения для свойств типа модели, при обработке запроса POST. Если опустить атрибут name, форма не будет корректно функционировать.
Далее создается папка Views/Shared, в которую добавляется файл компоновки по имени Layout.cshtml с содержимым, показанным в примере ниже:
Это простая компоновка с несколькими стилями CSS, предназначенными для элементов формы. Запустив приложение и перейдя на URL вида /Home/CreateUser, можно наблюдать базовую функциональность формы:
Применение вспомогательных методов для генерации HTML-элементов вроде :
Часто применяемые перегруженные версии вспомогательного метода HtmlHelper.BeginForm()
Перегруженная версия
Описание
BeginForm()
Создает форму, осуществляющую обратную отправку методу действия, который привел к визуализации представления
Создает форму, которая осуществляет обратную отправку методу действия и контроллеру, указанным в виде строк
Подобна предыдущей перегруженной версии, но позволяет указывать значение для атрибута method, используя перечисление System.Web.Mvc.FormMethod (POST, GET и т.п.)
Подобна предыдущей перегруженной версии, но позволяет указывать в качестве атрибутов для элемента объект, свойства которого используются в качестве имен атрибутов
Подобна предыдущей перегруженной версии, но позволяет указывать значения для переменных сегментов маршрута в конфигурации маршрутизации приложения. Значения задаются в виде объекта, свойства которого соответствуют переменным сегментов маршрута
Ранее демонстрировалась простейшая версия метода BeginForm(), которой было вполне достаточно для примера приложения, а в примере ниже можно видеть, как используется наиболее сложная версия, позволяющая указывать дополнительную информацию относительно конструирования элемента :
В этом примере явно указывается набор деталей, которые иначе были бы выведены инфраструктурой ASP.NET MVC Framework автоматически, такие как имя действия и контроллер. Мы также указали, что форма должна быть отправлена с применением HTTP-метода POST, который использовался бы в любом случае.
Как видите, значение для атрибута id было добавлено к целевому URL, а к элементу были применены атрибут class и атрибут данных. Обратите внимание, что в вызове метода BeginForm() указывался атрибут по имени data_formType, но в выводе он превратился в data-formType. Дело в том, что указывать имена свойств динамического объекта C#, содержащие символы дефиса, не допускается, поэтому использовался символ подчеркивания, который в выводе был автоматически заменен символом дефиса, аккуратно устраняя несоответствие между синтаксисами C# и HTML. (И, разумеется, имя свойства class было снабжено префиксом @, что позволило применить зарезервированное ключевое слово C# в качестве имени свойства для атрибута class.)
Указание маршрута, используемого формой
Когда используется метод BeginForm(), инфраструктура ASP.NET MVC Framework ищет в конфигурации маршрутизации первый маршрут, подходящий для применения при генерации URL, который будет нацелен на требуемое действие и контроллер. В сущности, выбор маршрута оставлен за вами. Если вы хотите обеспечить использование конкретного маршрута, можете применять вместо BeginForm() вспомогательный метод BeginRouteForm(). Чтобы продемонстрировать эту возможность, в файл /App_Start/RouteConfig.cs добавлен новый маршрут, как показано в примере ниже:
Если вызвать метод BeginForm() с такой конфигурацией маршрутизации, получится элемент с атрибутом action, содержащим URL, который создан из стандартного маршрута. В примере ниже видно, как с помощью метода BeginRouteForm() указать на необходимость использования этого нового маршрута:
ASP.NET MVC: И снова про форму обратной связи или куда еще втыкнуть Knockout
Создание и подготовка проекта
У меня студия Visual Studio 2012 Ultimate с лицензией подписчика (не плохо да?), но вы можете воспользоваться и бесплатной версией (VS 2012 Express). Создаю новый проект ASP.NET MVC4. Сразу же, чтобы не терять время запускаю команду обновления всех nuget-пакетов (выполняю команду в Package Manager Console):
Теперь поставлю несколько дополнительных пакетов, конечно же nuget-пакетов:
PM> Install-Package knockoutjs ‘knockoutjs 2.2.0’ already installed. FeedbackWithKo already has a reference to ‘knockoutjs 2.2.0’.
PM> Install-Package knockout.Validation Attempting to resolve dependency ‘knockoutjs (≥ 2.0.0)’. Successfully installed ‘Knockout.Validation 1.0.1’. Successfully added ‘Knockout.Validation 1.0.1’ to FeedbackWithKo.
PM> Install-Package MvcTools.Mvc4 Attempting to resolve dependency ‘XmlExport (≥ 0.2.1)’. Successfully installed ‘XmlExport 0.2.2’. Successfully installed ‘MvcTools.Mvc4 0.3.5’. Successfully added ‘XmlExport 0.2.2’ to FeedbackWithKo. Successfully added ‘MvcTools.Mvc4 0.3.5’ to FeedbackWithKo.
Раскидаю всё по папкам, для удобства, привычка, для красоты (нужное подчеркнуть). Принцип простой, мухи и котлеты отдельно:
Обратите внимание, что App в папке Scripts появится как результат установки пакета JsSite. Далее следует “прибраться” в шаблоне. Для начала удаляю _Layout.cshtml и вместо него в файле _ViewStart.cshtml ставлю использование _LayoutExtended.cshtml:
В самом шаблоне _LayoutExtended.cshtml добавлю еще одну закладку:
В строке 5 можете наблюдать добавленный пункт меню. А в контроллере HomeController соответственно, нужен метод Feedback:
К методу полагается еще и представление Feedback.cshtml. Я его тоже создал, но пока оставил его пустым.
А еще я сразу добавил загрузку Bundle для Knockout внизу странице (сразу после регистрации jquery):
Создание самого пакета сжатия и минимизации в следующей части.
Разберемся с Bundle
В папке App_Start есть файл BundleConfig.cs, в котором уже есть пакеты (bundles), я добавил еще для knockout и, таким образом, вот полный файл:
В строках с 7-15 вы можете наблюдать то, что я добавил для работы knockout и для jssite. Кажется ничего не забыл.
Начнем программировать
Для того чтобы всё получилось сначала создаем FeedbackViewModel класс, для того чтобы на было что получать на стороне сервера:
Теперь создаем контроллер. Я буду использовать простой контроллер, который является наследником от Controller, но вы в праве использовать и ApiController. Вот содержание файла AjaxController.cs:
На данном этапе серверная часть завершена. Теперь займемся javascript’ами.
JavaScript не желаете?
В папке Scripts/App есть файл site.services.js, в нем примерный код для обращения к сервисам сайта. Я написал такой код сервиса:
Теперь создаю новый файл site.vm.feedback.js, в котором будет ViewModel (на javascript, естественно), для работы формы обратной связи. Приведу весь код, а потом немного прокомментирую:
Строки 3-14: Модель (если хотете “класс”) Feedback.
Строки 6,8,10,12: Рассширения класса Feedback, наложенные для валидации объекта на форме. Для этого используется Knockout.Validation.js.
Строки 16-42: ViewModel формы обратной связи.
Строка 17: Свойство используется для отображения сообщения с сервера о результате отправки формы.
Строка 18: Экземпляр класса Feedback.
Строка 21: Инициализируем валидатор ошибок, задав объект для валидации.
Строка 22-26: Функция отправки сообщения.
Строка 27-37: Обработка результатов отправки, полученных с сервера.
Строка 49: Привязка модели к форме (это самая магическая магия под названием knockout).
Представление формы (View)
Давайте я просто покажу саму форму. А если будут вопросы, буду рад ответить на них:
Это полный текст. Давайте отправим какую-нибудь информацию:
Нажем кнопку “отправить”, и…:
Скриншот как заключение
В как результат всей статьи:
Вот и всё. Скачать demo-проект. Пишите комментарии.
Работа с формами HTML на сайтах веб-страницы ASP.NET (Razor)
В этой статье описывается обработка формы HTML (с помощью текстовых полей и кнопок) при работе на веб-сайте веб-страницы ASP.NET (Razor).
Что вы узнаете:
Ниже приведены основные понятия программирования ASP.NET, представленные в статье:
Версии программного обеспечения, используемые в этом руководстве
Этот учебник также работает с веб-страницы ASP.NET 2.
Создание простой HTML-формы
Создайте новый веб-сайт.
В корневой папке создайте веб-страницу с именем Form. cshtml и введите следующую разметку:
На этом этапе при нажатии кнопки Submit ничего не происходит. Чтобы сделать форму полезной, необходимо добавить код, который будет выполняться на сервере.
Чтение вводимых пользователем данных из формы
Для обработки формы необходимо добавить код, считывающий отправленные значения полей и выполняющий с ними какие-либо действия. В этой процедуре показано, как считывать поля и отображать вводимые пользователем данные на странице. (В рабочем приложении, как правило, вы выполняете более интересные действия с вводом данных пользователем. Это можно сделать в статье о работе с базами данных.)
В верхней части файла Form. cshtml введите следующий код:
Когда пользователь впервые запрашивает страницу, отображается только пустая форма. Пользователь (который будет вам) заполняет форму, а затем нажимает кнопку Отправить. Он отправляет (отправляет) входные данные пользователя на сервер. По умолчанию запрос переходит на ту же страницу (а именно, Form. cshtml).
При отправке страницы на этот раз введенные значения отображаются непосредственно над формой:
Значения формы хранятся в объекте Request.Form в виде строк. Поэтому, если необходимо работать со значением как с числом или с датой, так и с другим типом, необходимо преобразовать его из строки в этот тип. В этом примере метод AsInt Request.Form используется для преобразования значения поля Employees (который содержит число сотрудников) в целое число.
Откройте страницу в браузере, заполните поля формы и нажмите кнопку Отправить. На странице отображаются введенные значения.
Кодировка HTML для внешнего вида и безопасности
Рекомендуется использовать кодировку HTML при каждом отображении строк (входных данных), полученных от пользователя. В противном случае пользователь может попытаться получить веб-страницу для запуска вредоносного сценария или выполнить какие-либо другие действия, которые принарушат безопасность веб-сайта или не только то, что вам нужно. (Это особенно важно, если вы принимаете ввод пользователя, сохраняете его в любом расположении, — а затем отображаете его позже, например, в виде комментария к блогу, проверки пользователя или что-то вроде этого.)
Проверка введенного пользователем
Пользователи делают ошибки. Вы попросите их заполнить поле, и они забывают, или попросите их ввести число сотрудников, а вместо этого ввести имя. Чтобы убедиться в правильности заполнения формы перед ее обработкой, проверьте входные данные пользователя.
В этой процедуре показано, как проверить все три поля формы, чтобы убедиться, что пользователь не оставляет их пустыми. Кроме того, проверяется, является ли значение количество сотрудников числом. При наличии ошибок отобразится сообщение об ошибке, сообщающее пользователю, какие значения не прошли проверку.
В файле Form. cshtml Замените первый блок кода следующим кодом:
Чтобы отобразить сообщения об ошибках проверки, можно вызвать HTML. ValidationMessage и передайте ему имя поля, для которого должно быть получено сообщение.
Запустите страницу. Оставьте поля пустыми и нажмите кнопку Отправить. Отображаются сообщения об ошибках.
Добавьте строку (например, «ABC») в поле » число сотрудников » и нажмите кнопку Отправить еще раз. На этот раз отображается ошибка, указывающая, что строка не имеет правильный формат, а именно целое число.
Восстановление значений форм после обратных передач
Проверив страницу в предыдущем разделе, вы могли заметить, что при возникновении ошибки проверки все введенные вами данные (не только недопустимые) были потеряны, и пришлось повторно вводить значения для всех полей. Это иллюстрирует важный момент: когда вы отправляете страницу, обрабатываете ее, а затем снова отображаете страницу, страница повторно создается с нуля. Как вы видели, это означает, что все значения, которые были на странице при отправке, теряются.
Откройте страницу в браузере, заполните поля формы или оставьте их пустыми и нажмите кнопку Отправить. Отобразится страница, на которой отображаются отправленные значения.
Нагло спросил видимо(
