Twitter.Bootstrap.MVC4 – пакет Twitter Bootstrap для ASP.NET MVC 4


    Я хочу рассказать о NuGet пакете, который пригодится тем, кто решил создать приложение на связке ASP.NET MVC 4 и Twitter Bootstrap. Этот пакет не только добавит ресурсы Twitter Bootstrap в проект, но и предоставит готовые способы решения часто возникающих задач.

    Чтобы добавить пакет из NuGet, нужно выполнить в консоли пакетного менеджера:
    > Install-Package twitter.bootstrap.mvc4
    > Install-Package twitter.bootstrap.mvc4.sample

    Вот что включает в себя пакет:
    1. Layout, который включает стандартные секции, такие как head и scripts и т.д.
    2. Бандлы для CSS и JavaScript файлов Twitter Bootstrap, которые будут объединяться и минифицироваться стандартным для .NET 4.5 System.Web.Optimizations.
    3. Хелпер для создания навигации по сайту через декларацию роутов – вы сможете быстрее создавать меню сайта.
    4. Дефолтные View для Index, Details и Edit. Вы можете их использоваться для административного интерфейса – нет необходимости их создавать для основных CRUD-сценариев. Вместо этого можно потратить время на создание публичной части приложения.
    5. Вы можете показывать пользовательские сообщения используя хелпер-функцию в базовом классе контроллера. Она использует TempData и реализуется через Post-Redirect-Get.
    6. Шаблоны для генерации форм в MVC Scaffolding.
    7. В дополнение к этому, если вы установите пакет twitter.bootstrap.mvc4.sample, вы получите пример использования всего выше описанного.

    Давайте посмотрим как это выглядит.

    Навигация




    Добавив три роута навигации, мы увидим их в главном меню сайта. Роуты навигации конфигурируются через специальный метод расширения для RoutesCollection:
    routes.MapNavigationRoute("Account-navigation", "My Account", "account", 
            new { controller = "Account", action = "Index" });
    


    Дефолтные View




    Это пример страницы Index. Просто верните IEnumerable своей модели и автоматически сгенерируется такая таблица, которая использует стили таблиц Bootstrap и показывает выпадающий список с действиями. Заголовками таблицы являются свойства модели, разбитые на слова, а имя модели появляется сверху страницы. Используя эту функциональность, вы можете быстро создать набор административных страниц, создав для них лишь контроллеры и модели.

    Список действий


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



    Детали


    А это автоматически сгенерированная страница деталей. Просто верните свою модель и такая страница будет сгенерирована по умолчанию:



    Редактирование и создание


    Дефолтный шаблон для редактирования модели использует стили форм Twitter Bootstrap. Он генерирует рекомендованную в Bootstrap разметку и использует Editor Templates:



    Валидация


    Вот пример валидации Bootstrap, которая включена в шаблоны по умолчанию:



    Сгенерированный Layout умеет показывать сообщения Bootstrap. А в базовый класс контроллера добавлены методы для показа каждого типа сообщений. Они используют TempData и паттерн Post-Redirect-Get.

    Исходный код пакета доступен на GitHub, документация Twitter Bootstrap тоже будет полезна.
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 11
    • 0
      Шикарно!

      Бутстрап хорош, очень хорош, но получается многовато html кода. Теперь его можно заменить на Razor-хелперы.
      И даже можно будет бэкэнд приукрасить наконец, а то все руки не доходили :)

      Скажите, вы являетесь создателем этого пакета?
      • +1
        Нет, его авторы Eric Hexter и Matt Hinze, а я наткнулся на него, когда искал в NuGet пакеты связанные с Bootstrap. Этот, из тех что я попробовал — самый интересный, кроме бутсрапа он влючает ещё довольно полезный функционал…
      • +1
        Ну вот идея сделать View, которые будут из любой модели генерировать удобоваримый, хотя бы самый простой HTML — хорошая мысль. Т.е. по умолчанию появляются такие страницы. Если что-то кастомизировать — создаёш свой View. Скопирую себе.
        • +1
          Супер! На самом деле недели две пытался найти что-то такое, потом решил сам сделать. Только начал — а тут такой подарок. Спасибо большое за инфу.
          • 0
            Как раз хотел писать админку для своего сайта. Этот пакет отлично подойдет.
            • +2
              Скажите, пожалуйста, каким образом у Вас получилось использовать бутстраповые edit/create/details/index(для списка обьектов) шаблоны?
              я полдня возился, пытаюсь в эту вьюшку передать свою модель и получал ексепшены, в результате просто поменял код штатных edit/details/index вьюшек, создаваемых mvc.

              Вы меня, кстати опередили, у меня тут тоже статья на ту тему висит.
              Но статья более толстая — т.к. еще используется штатная авторизация, меню в зависимости от роли (группы) пользователя и т.п.
              в соседней новости, кстати пишется что бутстрап 2.2.2 вышел, а я последнюю неделю своим проектом не занимаюсь — не было времени и настроения
              • 0
                Если просто поставить пакет sample на чистый MVC4 проект — всё сразу работает.
                • 0
                  Ну я пытался передать ему все свои модели, но выпадает в краш… как вы этим унифицированным вьюшкам передавали свои модели?
                  • 0
                    Может еще кому пригодится, у меня была ошибка — отсутствие поля Id в модели. Я так понял без него не работает.
                • 0
                  А когда можно будет увидеть вашу статью?
                  • 0
                    Ну первый вариант этой статьи мне достаточно подпортил тут репутацию, а то, что я узнал за последний месяц — уже тянет на достаточное руководство, наверное, не факт что оно будет опубликовано на этом сайте…

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