Ext.Net + ASP.Net MVC: как правильно подключить Ext.Net в проект?

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

  1. Качаем самую актуальную версию библиотеки, это Ext.NET Pro 2.2 на сегодняшний день, распаковываем.
  2. Создаем новый проект ASP.NET MVC 4, пустой.
    Создание проекта ASP.NET MVC Ext.Net
    Создание проекта ASP.NET MVC Ext.Net
  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. Добавляем контроллер в проект:
    Добавление контроллера в проект ASP.NET MVC Ext.Net
    Добавление контроллера в проект ASP.NET MVC Ext.Net
    Код его оставляем без изменений:

    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 добавляем класс для конфигурирования работы контроллера:
    Настройка контроллера в проекте ASP.NET MVC Ext.Net
    Настройка контроллера в проекте ASP.NET MVC Ext.Net
    В нем нам нужно будет настроить маршрутизацию. Для этого нам потребуется использовать сборки

    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, и в нее добавляем представление:
    Добавление представления в проект ASP.NET MVC Ext.Net
    Добавление представления в проект ASP.NET MVC Ext.Net
    (не забываем снять галочку с поля «Использовать макет и главную страницу», мы пока без них работаем).
  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. Теперь наш проект можно откомпилировать и запустить. В результате вы увидите вот такую страницу:
    Работающая версия проекта ASP.NET MVC Ext.Net

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