X.Scaffolding Library

    Attention! Updated the package in NuGet. Details at the end of the article.

    With the release of Visual Studio 2013, ASP.NET MVC 5, and Entity Framework 6, the scaffold capabilities built into Visual Studio have become even better. However, until now, creating a new web application has to do a lot of actions that could be automated.
    Therefore, for myself and the developers I work with, the X.Scaffolding package was created that allows you to more efficiently create web applications. It is on the basis of this package that we are currently developing most of the new web applications for working with data.

    Today I decided to share this project with readers of Habrahabr. Perhaps it will seem interesting to someone and help in his work, while someone himself will want to participate in its development.

    As you know, Visual Studio provides a huge number of functions that allow you to automate routine operations and focus on the main tasks. One of such convenient and sufficiently demanded functions is the ability to generate editing forms for database entities. This feature appeared a long time ago, but with the release of Visual Studio 2013 it became and integration into the base application template of the bootstrap framework became in my opinion even more convenient. But as you know - there is no perfection to the limit.

    One of the reasons for creating the package was that now standard controls created by various extension methods like EditorFor do not generate completely valid code from the point of view of the bootstrap framework. As a result of this, pages with editors are not displayed very well. In order to avoid manual editing of styles, a set of custom extension methods was also developed.

    In addition, not all data types are now supported by standard extensions. For example, now in many of my projects the features of the package are often used to create an HTML editor, calendar and video preview.


    The key role in the library is played by the Extensions class, which contains extension methods for HtmlHelper):
    • HtmlEditorFor - Displays an HTML editor based on CKEditor 4
    • DatePickerFor - Displays bootstrap-style calendar
    • FileUploadFor - Displays an item to download a file.
    • ThumbnailFor - displays bootstrap-style prview for an image
    • TextEditorFor - displays bootstrap-style editor
    • MultilineTextEditorFor - displays a multi-line bootstrap-style editor
    • EmailEditorFor - Displays a bootstrap-style editor that has an HTML5 email type
    • VideoPlayerEditorFor - displays the player if the url is written in the field for a video published in YouTube, or Vimeo

    In order to ensure the correct operation of all extensions, some files were added to the package adding files to the structure of the web application and some dependencies. Let's consider them in more detail.

    Package structure

    After installing the X.Scaffolding NuGet package, elements such as are added to your web application:

    • Content \ global.css - contains the basic styles for the web application ( Modern UI was taken as the basis )
    • Content \ scaffolding.css - contains styles for individual controls generated by the ASP.NET MVC scaffold system
    • Scripts \ scaffolding.js - contains scripts common for the entire web application for initializing plug-ins
    • Views \ System \ Login.cshtml - login page template
    • Views \ _ViewStart.cshtml - page for automatically setting a template for all views in the project
    • favicon.ico - corporate icon

    Authorization module

    Модуль авторизации выполнен на основе шаблона с сайта bootsnipp.com

    In addition to files added directly by the X. Scaffolding package, some other packages and related files are also added to the project. Let's consider them in more detail.

    NuGet Plugin Packages

    • X.CKEditor - WYSIWYG editor for editing HTML (since the CKEditor team has not yet released the official NuGet package for version 4, I decided to do it myself)
    • chosen.jquery is a plugin for designing beautiful and convenient drop-down lists with search. More details in an article written by alizar
    • Bootstrap Datepicker - a plugin that allows you to add Bootstrap-style date pickers
    • Microsoft ASP.NET MVC 5 - since the library is primarily designed to expand the current version of MVC, a link to this version was added
    • EntityFramework 6 - the same goes for Entity Framework
    • Windows Azure Storage - a set of libraries that make it easier to work with web applications hosted in the cloud
    • Bootstrap 3 - I think you should not introduce this framework, especially since starting from Visual Studio 2013 a basic project is created with the already installed bootstrap package
    • PagedList.Mvc is a library that allows you to easily break lists into "pages". It also includes styles and code for implementing paging in template markup.
    • Microsoft jQuery Unobtrusive Validation - a package for "unobtrusive" validation. You can read more about him in an article written by Juty

    Join now!

    Everyone can get acquainted with the source code of the library, and expand its capabilities.
    Project source codes are available on GitHub .


    You can install the package from the NuGet repository :Install-Package xscaffolding

    Хочу сразу предупредить, что так как библиотека создавалась прежде всего для применения в собственных проектах, в ней может быть несколько моментов которые стоит учитывать при ее использовании:
    • сейчас библиотека рассчитана на то, что в проекте используется ASP.NET MVC 5 версии и Entiy Framework 6 версии
    • в веб-приложение при установке пакета добавляется фирменная favicon (обусловлено тем, что в большинстве своем установки пакета сейчас производятся для наших собственных проектов)
    • в веб-приложение при установке добавляется ссылка на пакет WindowsAzure.Storage, что может оказаться лишним для тех, кто не работает с Windows Azure

    Впрочем, исходные коды библиотеки сейчас находятся открытом доступе. И кроме того, если будет достаточный интерес к библиотеке — я планирую создать пакет X.Scaffolding.Core, в котором не будет привязки к вышеупомянутым пакетам и будет отсутствовать favicon.

    Since initially the package in NuGet contained both a library and design styles, I decided to divide it into two parts.
    • In X.Scaffolding.Core, I transferred the basic functionality (the library itself and dependencies for ASP.NET MVC 5, js libraries CKEditor, Bootstrap, etc.).
    • In X.Scaffolding added dependence on X.Scaffolding.Core, Entity Framework 6, Windows Azure Storage and abandoned styles Modern UI.

    Therefore, if you do not need extra css styles in the project, then you can use the X.Scaffolding.Core package .

    Also popular now: