c# web. Занятие 11

Темы лекции: ASP.NET. MVC. Часть 3.

Практическое задание: ASP.NET. MVC.

Тренер: Игорь Шкулипа, к.т.н.

Разработка Веб-приложений на платформе Microsoft .NET Framework.

Занятие 11

http://www.slideshare.net/IgorShkulipa 2

Web API

Одним из преимуществ стека технологий на платформе .NET является возможностьсоздания сервисов.

Мы можем использовать технологию WCF для создания веб-служб.

Но с MVC 4 и вообще всей платформы .NET 4.5 в нашем распоряжении оказался ещеодин инструмент для создания веб-служб - Web API.

Концепция Web API (которую кстати можно использовать не только в MVC, но и ввеб-формах) - новый подход к реализации веб-приложений.

http://www.slideshare.net/IgorShkulipa


Создание проекта Web API

Среда создаст обычный mvc-проект со стандартной структурой. Поумолчанию, будет создано два контроллера. Один из них стандартныйконтроллер HomeController. Второй контроллер - ValuesController,который и реализует функционал Web API.



Контроллер Web API

Определение контроллера Web API отличается от обычного контроллера.Во-первых, он образован от класса ApiController, который не связан сбазовым классом обычных контроллеров - Controller

Во-вторых, контроллеры Web API применяют стиль REST (RepresentationState Transfer или "передача состояния представления") являетсяодним из основных пунктов технологии Web API.

Для взаимодействия с сервером в REST-архитектуре используются методыHTTP:

• GET

• POST

• PUT

• DELETE

Здесь нет обычных методов действий, как в традиционных контроллерах,которые возвращают ActionResult. А определенные в контроллереValuesContoller методы сопоставляются с одноименными методамиHTTP.



Маршрутизация в Web API

Поскольку в Web API методы контроллера не являются прямымиресурсами и сопоставляются с методами HTTP, то и весь механизммаршрутизации действует не как при определении обычныхмаршрутов.

Все определения маршрутов для Web API находятся в файлеWebApiConfig.cs (в папке App_Start)



Условности при именовании методов

При создании методов контроллера Web API действует некоторыеусловности.

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

Однако мы можем использовать и любые другие имена без префиксов, нов этом случае нам надо будет явно указать метод HTTP в виде атрибута

[HttpPost]

public void CreateItem([FromBody]string value) {

}

[HttpPut]

public void EditItem(int id, [FromBody]string value) {

}

[HttpDelete]

public void RemoveItem(int id) {

}



Добавление контроллера Web API в существующий проект



Контроллер Web API



Результат



Мобильные приложения на ASP.NET MVC 4

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

• Старайтесь избегать фиксированных размеров, отступов, границ, чтобыобщая верстка была в духе так называемого "резинового дизайна"

• Старайтесь не использовать таблицы. Либо желательно, чтобы таблицыимели как можно меньше столбцов (а в идеале вообще один столбец), а ихсодержимое было кратким. Рекомендуется использовать списки вместотаблиц.

• Старайтесь использовать небольшие формы с минимальным количествомполей

• Избегайте использования блоков с прокруткой, как горизонтальной, так ивертикальной, поскольку многие устройства испытывают проблемы срендерингом прокрутки

• Оптимизируйте страницы веб-сайта: сжимайте изображения, оптимизируйтеверстку и контент. Избегайте тяжеловесных веб-страниц. Ведь скоростьпередачи в мобильных сетях в большинстве случаев далека от скорости,например, при проводном подключении. А аппаратные возможностимобильных аппаратов зачастую отстают от возможностей ПК, что будетвлиять на скорость обработки веб-страницы.



Создание мобильного приложения MVC



Метатег Viewport

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

<meta name="viewport“

content="параметры_метатега">



Параметры Viewport

Параметр Значения Описание

width

Принимает целочисленное значение в пикселях или значение device-width

Устанавливает ширину области viewport

height

Принимает целочисленное значение в пикселях или значение device-height

Устанавливает высоту области viewport

initial-scaleЧисло с плавающей точкой от 0.1 и выше

Задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования

user-scalable no/yesУказывает, может ли пользователь с помощью жестов масштабировать страницу

minimum-scaleЧисло с плавающей точкой от 0.1 и выше

Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования

maximum-scaleЧисло с плавающей точкой от 0.1 и выше

Задает максимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования



Режимы отображения DisplayMode

Инфраструктура ASP.NET MVC 4 содержит такую функциональность какрежимы отображения или DisplayMode.

Например, у нас есть некое представление Index.cshtml. Оно былопредназначено для десктопов. И мы хотим рядом с ним сделать копиюпредставления, но только уже для мобильных устройств. Для этого намдостаточно создать в проекте копию данного представления, добавивк его имени суффикс Mobile. То есть представление, котороеориентировано на мобильные устройства, у нас будет называтьсяIndex.Mobile.cshtml.

И больше нам ничего не надо менять: контроллеры и их действияостаются теми же. Но теперь этот суффикс Mobile будет показыватьфреймворку, что представление Index.Mobile.cshtml надоиспользовать в ответ на запросы, исходящие от мобильных устройств.Во всех остальных случаях будет использоваться обычноепредставление Index.cshtml.



Переопределение режима DisplayModeБлагодаря суффиксу Mobile фреймворк узнает о том, что страница предназначена

для мобильных устройств. Однако этим работа функциональности DisplayModeне исчерпывается. Так, мы можем переопределить ее действие.

К примеру ряд браузеров и устройств могут не поддерживать какие-тоопределенные теги, стили, вследствие этого страницы могут отображатьсянекорректно.

Чтобы определить свой режим отображения, надо зарегистрировать в файлеGlobal.asax в методе Application_Start новый режим отображения:

using System.Web.WebPages;

...

protected void Application_Start() {

DisplayModeProvider.Instance.Modes.Insert(0,

new DefaultDisplayMode("IE8") {

ContextCondition =

(context => context.Request.UserAgent.Contains("MSIE 8"))

});...}

Здесь мы смотрим, содержит ли свойство UserAgent у объекта Request "MSIE 8" - тоесть был ли запрос послан браузером IE 8. В этом случае мы используем новыйрежим DefaultDisplayMode("IE8").

Параметр "IE8" означает, что наши специфичные представления будут иметьназвания типа [имя_представления].IE8.cshtml. Собственно также, как и смобильными приложениями.



Мультиязычный сайт и локализация

См. Презентацию №8.

Для использования ресурсов, надо установитьследующие параметры для каждого ресурса:

• Build Action - в качестве типа построения нужновыбрать значение Embedded Resource

• Custom Tool - в качестве инструмента созданияресурсов - PublicResXFileCodeGenerator

• Custom Tool Namespace - в качествепространства имен укажем Resources. В данномслучае важно указать именно то пространствоимен, которое мы собираемся использовать.

Установка культуры в коде приложения производится следующим образом:

string cultureName=“ru”;

Thread.CurrentThread.CurrentCulture =

CultureInfo.CreateSpecificCulture(cultureName);

Thread.CurrentThread.CurrentUICulture =

CultureInfo.CreateSpecificCulture(cultureName);



Эмуляторы для тестирования мобильных сайтов

http://www.mobilexweb.com/emulators


http://www.mobilexweb.com/emulators


Эмулятор Firefox Mobile



Firefox Mobile



Пример. Ресурсы



Пример. Использование ресурсов в модели

public class Position: TEntity

{

[Required]

[Display(ResourceType = typeof(Resources.Strings), Name = "PositionDisplayText")]

[Editable(true)]

[MaxLength(200, ErrorMessageResourceType = typeof(Resources.Strings),

ErrorMessageResourceName = "MaxLengthErrorMessage")]

public string Name { get; set; }

}

[Serializable]

public class Persone : TEntity

{

[Required]

[Display(ResourceType = typeof(Resources.Strings), Name = "SurnameDisplayText")]



public string Surname { get; set; }

[Display(ResourceType = typeof(Resources.Strings), Name = "NameDisplayText")]



public string Name { get; set; }

[Display(ResourceType = typeof(Resources.Strings), Name = "MiddleNameDisplayText")]



public string Middle { get; set; }

...



Web API контроллер на основном сайтеpublic class WebAPIController : ApiController

{

static TeamContext model = new TeamContext();

static IRepository<Persone> persons =

new Repository<Persone>(model);

static IRepository<Position> positions =

new Repository<Position>(model);

// GET api/webapi

public IEnumerable<string> Get() {

List<Persone> pl =

persons.SelectAll().ToList<Persone>();

var result = new List<string>();

foreach (var p in pl) {

XmlSerializer xs = new XmlSerializer(p.GetType());

StringWriter sw = new StringWriter();

xs.Serialize(sw, p);

result.Add(sw.ToString());

}

return result;

}

...



Контроллер на мобильном сайте

public class HomeController : Controller

{

public ActionResult Index()

{

HttpClient hc = new HttpClient();

HttpResponseMessage hr =

hc.GetAsync(

new Uri("http://localhost:57553/api/WebAPI")).Result;

while (!hr.IsSuccessStatusCode) {

// Можно сделать что-то полезное, пока выполняется запрос

}

ViewBag.APIResult =

hr.Content.ReadAsStringAsync().Result;

return View();

}

...



Представление на мобильном сайте

@{

ViewBag.Title = "Home Page";

}

<h2>@ViewBag.APIResult</h2>

<p>

To learn more about ASP.NET MVC visit

<a href="http://asp.net/mvc" title="ASP.NET MVC Website">

http://asp.net/mvc</a>.

</p>

<ul data-role="listview" data-inset="true">

<li data-role="list-divider">Navigation</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>



Layout на мобильном сайте

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

<meta name="viewport" content="width=device-width" />

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

@Styles.Render("~/Content/mobileCss", "~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

<body>

<div data-role="page" data-theme="b">

<div data-role="header">

@if (IsSectionDefined("Header")) {

@RenderSection("Header")

} else {

<h1>@ViewBag.Title</h1>

@Html.Partial("_LoginPartial")

}

</div>

<div data-role="content">

@RenderBody()

</div>

</div>

...



Результат. Основной сайт



Результат. Мобильный сайт



Лабораторная работа №11

К лабораторной работе №7 добавить использование ресурсовприложения, локализацию и мобильную версию сайта. А так жепредоставить Web API.


c# web. Занятие 11

Education