В прошлой статье я рассказала, как быстро подключить компоненты Ext.Net в проект и начать работать с ними.
Сегодня я разберу подробно, какие изменения вносятся NuGet‘ом при установке, или, точнее, как подключить Ext.Net самостоятельно, и знать все его настройки.

1. Качаем самую актуальную версию библиотеки, это Ext.NET Pro 2.2 на сегодняшний день, распаковываем.
2. Создаем новый проект ASP.NET MVC 4, пустой.
   
   
3. Добавляем в References ссылки на Ext.Net.Utilities.dll, Ext.Net.dll, а так же необходимые для их работы Transformer.Net.dll и Newtonsoft.Json.dll, которые вы скачали и распаковали вместе с самим Ext.Net. Важно заметить, что Newtonsoft.Json.dll скорее всего уже добавлен в проект, тогда его не надо добавлять (можно проверить по списку в папке references в Обозревателе решения).
4. Кроме подключенных сборок нам потребуется еще и WebActivatorEx для правильной и удобной регистрации контроллеров. Его можно просто скачать и подключить, но необходимости разбирать его подключение и настройку для понимания механизмов работы Ext.Net нету. Проще установить через NuGet так же, как устанавливали весь Ext.Net на прошлом уроке: через пункт меню «Сервис» — «Диспетчер пакетов библиотек» — «Управление пакетами NuGet для решения», или через консоль («Сервис» — «Диспетчер пакетов библиотек» — «Консоль диспетчера пакетов») командой

   Install-Package WebActivator

5. Теперь займемся настройкой проекта. Открываем Web.config, и в нем производим изменения:
   1. Вводим раздел настроек Ext.Net, и разрешаем её использование вне зависимости от прав доступа. Для этого в элемент configuration добавляем подблок:

      <configSections>
      <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />
      </configSections>

   2. Теперь мы разрешаем для страниц использовать пространства имен Ext.Net‘а. В блок configuration.system.web.pages.namespaces:

      <add namespace="Ext.Net" />
      <add namespace="Ext.Net.MVC" />

   3. Добавляем ссылку на сборку фреймворка для использования компонентов. В блок configuration.system.web добавляем блок:

      <controls>
      <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />;
      </controls>

   4. Теперь добавляем обработчик (врапер) http-запросов, для того чтобы сервер мог задействовать расширение Ext.net, и подключаем http-модуль для обработки запросов и асинхронного выполнения direct-методов. В блок configuration.system.web добавляем:

      <httpHandlers>
      <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false" />
      </httpHandlers>
      <httpModules>
      <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />
      </httpModules>

   5. В блок configuration.system.webServer добавляем:

      <modules>
      <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" />
      </modules>

      Так же прописываем модуль и для всего сервера.

   6. Обработчик для сервера тоже надо указать. В блок configuration.system.webServer.handlers добавляем:

      <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" />

   По окончанию всех манипуляций Web.config станет таким (справа).

6. Теперь займемся файлом Views\Web.config. Все, что с ним надо сделать — добавить в блок configuration.system.web.webPages.razor.pages.namespaces ссылки на пространства Ext.Net:

   <add namespace="Ext.Net" />
   <add namespace="Ext.Net.MVC" />

7. Добавляем контроллер в проект:
   
   
   Код его оставляем без изменений:

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   
   namespace HardStart.Controllers
   {
   public class DemoController : Controller
   {
   public ActionResult Index()
   {
   return View();
   }
   
   }
   }

8. В App_Start добавляем класс для конфигурирования работы контроллера:
   
   
   В нем нам нужно будет настроить маршрутизацию. Для этого нам потребуется использовать сборки

   using System.Web.Mvc;
   using System.Web.Routing;

   . Кроме того, его нужно зарегистрировать в WebActivator‘е:

   [assembly: WebActivatorEx.PreApplicationStartMethod(typeof(HardStart.App_Start.DemoConfig), "Start")]

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

   public static void RegisterRoutes(RouteCollection routes)
   {
   // Указываем, что все ресурсы ext.net нужно игнорировать
   routes.IgnoreRoute("{extnet-root}/{extnet-file}/ext.axd");
   
   //Теперь настраиваем маршрут для контроллера
   routes.MapRoute(
   "Demo", // Имя маршрута
   "{controller}/{action}/{id}", // Как будет выглядеть URL
   new { controller = "Demo", action = "Index", id = UrlParameter.Optional } //Что вызывать по умолчанию
   );
   }

   Теперь можно реализовать и метод Start:

   public static void Start()
   {
   DemoConfig.RegisterRoutes(RouteTable.Routes);
   }

9. Теперь займемся представлением. Создаем в каталоге Views папку Demo, и в нее добавляем представление:
   
   
   (не забываем снять галочку с поля «Использовать макет и главную страницу», мы пока без них работаем).
10. Пропишем код представления. Во первых, покажем ссылки на Ext.Net:

    @using Ext.Net;
    @using Ext.Net.MVC;

    В теле документа необходимо инициализировать менеджер ресурсов Ext.Net:

    @(Html.X().ResourceManager())

    {удалено — спасибо vladsch
    }
    Прописываем код создания первого окошка на Ext.Net:

    @(Html.X().Window()
    .ID("Window1")
    .Title("Окно")
    .Icon(Icon.Application)
    .Height(185)
    .Width(350)
    .BodyStyle("background-color: #fff;")
    .BodyPadding(5)
    .Modal(false)
    .Content(c => "Здравствуй, мир!")
    )

    Атрибуты такие: ID — идентификатор объекта, под которым он будет известен;
    Title — заголовок окна;
    Icon — значок, который будет отображаться в заголовке окна;
    Height и Width — соответственно, ширина и высота окна;
    BodyStyle — стиль содержимого, мы в нем указываем только белый цвет фона;
    BodyPadding — расстояние от содержимого до внутренней границы окна;
    Modal — признак, является ли окно модальным;
    Content — непосредственно, содержимое окна.

    Вот код представления до и после изменений.

11. Теперь наш проект можно откомпилировать и запустить. В результате вы увидите вот такую страницу:
    

Код проекта прилагается к уроку, его можно скачать: HardStart.7z.
В следующих уроках буду более подробно раскрывать взаимодействие между клиентской и серверной сторонами, асинхронные вызовы и direct-методы.