Prerequisites

Quick Steps

Use any of the three approaches described below to start developing with DevExpress Bootstrap controls for ASP.NET Core. If you are starting a new project, the recommendation is that you use the Visual Studio template or boilerplate project. The reason is simple: they contain all the required references for dependencies and DevExpress packages. In doing so, you can skip the sections of this tutorial that describe how to do this manually.

Creating a new application in Visual Studio

If you have the DevExpress .NET Components Suite installed on your local Windows machine, you can create a new application using the Visual Studio template available through the Visual Studio New Project dialog. In this dialog, select the DevExpress Template Gallery and click OK. Next, select the ASP.NET Core Bootstrap project template in the invoked Template Gallery.

Starting with the boilerplate project

You can create your application on any platform using the DevExpress starter project available on GitHub: https://github.com/DevExpress/bootstrap-aspnetcore-starter. This project already has all the required references and contains sample pages demonstrating common practices. You can remove these pages from the project as described in the included README file.

Starting from scratch or integrating in an existing project

You can manually configure any ASP.NET Core application to work with DevExpress Bootstrap controls using the two steps below.

  1. Add the NuGet package reference to your application. For details, refer to the Install DevExpress Packages section.
  2. Modify project files to integrate all required resources into your application. Details are described in the Add Dependencies section.

Install DevExpress Packages

In Visual Studio

To register the feed using Visual Studio, use the NuGet Package Manager’s Options dialog. To learn more, refer to the DevExpress NuGet packages Knowledge Base article.

Install the DevExpress.AspNetCore.Bootstrap package into your project using the NuGet Project Manager.

Cross-Platform Projects

For cross-platform projects developed with other IDEs, including Visual Studio Code, register the feed by editing the global or project-specific NuGet.config file.

Run the following command in the console:

dotnet add package DevExpress.AspNetCore.Bootstrap -s https://nuget.devexpress.com/{feed-authorization-key}/api

You can obtain your personal feed authorization key from nuget.devexpress.com.

Add Dependencies

1. Modify Startup.cs

The comments in the code below indicate which lines you’ll need to add to the file.

// add a using statement for cleaner code
using DevExpress.AspNetCore;

public void ConfigureServices(IServiceCollection services) {
    // set up the services utilized by DevExpress controls
    services.AddDevExpressControls();
    services.AddMvc();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) {
    // register DevExpress middleware components before calling UseMvc()
    app.UseDevExpressControls();
    app.UseStaticFiles();
    app.UseMvc(routes => {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}");
    });
}

You can set up additional options (like the Bootstrap version or icons library) via the Bootstrap method (available through the overloaded AddDevExpressControls method parameter)

services.AddDevExpressControls(options => {
    options.Bootstrap(bootstrap => {
        bootstrap.Mode = BootstrapMode.Bootstrap3;
    });
});

Chart controls have additional dependencies including JQuery, Globalize, and DevExtreme. To resolve these dependencies automatically, set up the Resources property (available through the overloaded AddDevExpressControls method parameter). This property specifies which static resources should be automatically attached to all the application’s pages.

services.AddDevExpressControls(options => {
     options.Resources = ResourcesType.DevExtreme | ResourcesType.ThirdParty;
});

The Resources property accepts the following flags:

If required, you can use the DevExtreme flag separately from the ThirdParty flag and manually register the third-party libraries. However, it is not possible to use the ThirdParty flag separately because it would make it impossible to register the DevExtreme resources manually.

If the ThirdParty flag is switched off, you can register the required resources manually as shown below (the order in which the resources are registered is important):

<script src="https://code.jquery.com/jquery-migrate-3.0.1.min.js" integrity="sha256-F0O1TmEa4I8N24nY0bya59eP6svWcshqX1uzwaWC4F4="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/event.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/supplemental.js"></script>
    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/message.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/number.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/currency.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/date.js"></script>

Note that the CLDR library’s resources are automatically attached based on the current culture regardless if the ResourcesType.ThirdParty flag is used.

2. Modify _ViewImports.cshtml

Add a namespace reference as follows:

@using DevExpress.AspNetCore
3. Modify _Layout.cshtml

The comments in code below indicate which lines you’ll need to add to the file.

<html>
  <head>
      @* required META declarations *@
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
      <title>DevExpress Bootstrap Controls for ASP.NET Core</title>
      @* reference Bootstrap – see Bootstrap docs for version-specific line of code *@
      <link rel="stylesheet" href="~/lib/bootstrap/dist/bootstrap.min.css" />
      @* automatically render style references required by DevExpress *@
      @Html.DevExpress().StyleSheets()
  </head>
  <body>
      @RenderBody()
      @* add a jQuery reference *@
      <script src="~/lib/jquery/dist/jquery.js"></script>
      @* automatically render script references required by DevExpress *@
      @Html.DevExpress().Scripts()
  </body>
</html>

Render DevExpress Controls

The following sample code shows how you can render DevExpress ASP.NET Core Bootstrap controls now that you’ve prepared your project:

@(Html.DevExpress()
    .BootstrapAccordion("myAccordion")
    .Groups(groups => {
        groups.Add().Text("Tables")
            .Items(items => {
                items.Add()
                    .Text("Users")
                    .IconCssClass("fa fa-user");
                items.Add()
                    .Text("Tasks")
                    .IconCssClass("fa fa-tasks");
            });
        groups.Add().Text("Analysis")
         .Items(items => {
             items.Add()
                 .Text("Dashboard")
                 .IconCssClass("fa fa-dashboard");
             items.Add()
                 .Text("KPI")
                 .IconCssClass("fa fa-percent");
         });
    })
)

Configure Controls for AJAX in Razor Pages

Follow the steps below to configure AJAX controls within Razor Pages:

  1. Add an AJAX control to the Razor Page with a page model by implementing the control in a page markup.
    @(Html.DevExpress().BootstrapGridView("myGridView")
        .Bind(Model.GridData))
  2. Configure the control routing.
    @(Html.DevExpress().BootstrapGridView("myGridView")
        .Routes(routes => {
            routes.MapRoute(route => {
                route.RouteValues(new { handler = "MyGridViewHandler" });
            });
    		routes.MapRoute(route => {                                    
    			route.RouteType(DevExpress.AspNetCore.Bootstrap.GridViewRouteType.UpdateRow).RouteValues(new { handler = "MyGridViewUpdateHandler" });
    		});
        })
        .Bind(Model.GridData))
  3. Add a property of the IDevExpressControlAccessor type into your view and initialize this property value in the view's constructor to use the DevExpress members in a view:
    public class MyGridViewPartialModel : PageModel {
        public MyGridViewPartialModel(IDevExpressControlAccessor dx) {
            DevExpress = dx;
            //...
        }
            protected IDevExpressControlAccessor DevExpress { get; }
    			//...
    }
  4. Add a custom handler method for AJAX-requests into the Page’s code-behind file. The method name should start with the "OnPost" prefix + the routing method's parameter ("MyGridViewHandler" in the example above):
    public class MyGridViewPartialModel : PageModel {
        public IActionResult OnPostMyGridViewHandler() {
            var grid = DevExpress.GridView(this, "myGridView");
            return grid.GetActionResult();
        }
        public IActionResult OnPostMyGridViewUpdateHandler(GridDataClass model) {
            //Update Model
            var grid = DevExpress.GridView(this, "myGridView");
            return grid.GetActionResult();
        }
    }
  5. Locate the AJAX DevExpress Controls inside an HTML form element or add an antiforgery token to the page manually using an HTML @Html.AntiForgeryToken helper object as follows:
    @Html.AntiForgeryToken();
    @(Html.DevExpress().BootstrapGridView("myGridView")
        .Routes(routes => {
            routes.MapRoute(route => {
                route.RouteValues(new { handler = "MyGridViewHandler" })
            });
    		routes.MapRoute(route => {                                    
    			route.RouteType(DevExpress.AspNetCore.Bootstrap.GridViewRouteType.UpdateRow).RouteValues(new { handler = "MyGridViewUpdateHandler" });
    		});
        })
        .Bind(Model.GridData))

Configure Controls for AJAX in ASP.NET Core MVC Views

A few of our controls use AJAX for client-server communication. For example, the client Grid View control initiates an AJAX request every time an end user edits data, navigates between pages or performs a data shaping operation. Follow the steps below to configure an AJAX control.

  1. Create a separate partial view.
  2. Add a default AJAX processing action method to the controller to process AJAX requests from the control. This action should return the created partial view:
    public ActionResult MyGridViewAction() {
        return PartialView("MyViewName", Model);
    }
  3. Add the control’s Razor code to the created partial view. Specify AJAX requests route mapping for the new action method:
    @(Html.DevExpress().BootstrapGridView("myGridView")
        .RouteValues(routes => {
            routes.MapRoute(r => r.Action("MyGridViewAction"))
        })
        .Bind(Model))

Customize a control’s appearance

Each control in the suite has a CssClasses() method that provides access to the control’s style settings. The Razor code sample below demonstrates how you can use this method to assign a CSS class to a Bootstrap Button.

@(Html.DevExpress()
    .BootstrapButton("myButton")
    .CssClasses(css => css.Control("my-button"))
    .Text("My Button")

Style declaration:

.my-button {
    border-radius: 0;
}
Button Custom Appearance

Create Adaptive Layouts

The DevExpress Bootstrap Controls seamlessly integrate with layout features provided by the Bootstrap framework. To construct adaptive web applications, make sure to use page layouts based on the Bootstrap grid system http://getbootstrap.com/docs/4.0/layout/grid/.

<div class="container">
  <div class="row">
    <div class="col">
      LEFT NAVIGATION
    </div>
    <div class="col-sm-8">
      MAIN CONTENT
    </div>
  </div>
</div>

Use Bootstrap Themes

DevExpress Bootstrap controls are natively rendered using Bootstrap framework components. No configuration is required to apply an external Bootstrap theme.

In page markup, replace the link to the default bootstrap.css file with the link to the themed bootstrap.css file (which is delivered with any bootstrap theme) and the custom theme will be applied to all controls on the page.

Change Icons

DevExpress Bootstrap controls use icon fonts to display icons within their visual elements. The default Embedded icon set can be replaced with FontAwesome or Glyphicons Halflings set (the latter included by default into the Bootstrap 3 package). You can also replace each individual icon with a custom one in CSS.

Embedded:
Embedded Icons

Glyphicons:
Glyphicons Icons

FontAwesome:
Font Awesome Icons

To switch icon sets, use the iconSet property available in the services.AddDevExpressControls() options parameter. For example, the following code enables FontAwesome icons:

services.AddDevExpressControls(options => {
  options.Bootstrap(bootstrap => {
    bootstrap.IconSet = BootstrapIconSet.FontAwesome;
  });
});

Note that you would need to download FontAwesome icons separately, then add the font and CSS files to your project and link the FontAwesome CSS to your master page:

<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />

Localize Controls

DevExpress controls support 5 languages – English, German, Spanish, Japanese and Russian. To localize the controls, download the corresponding localization package (for example, DevExpress.AspNetCore.Bootstrap.de) and modify the Startup.cs as shown below:

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    // The localization middleware must be configured before any middleware that may check the request culture. 
    app.UseRequestLocalization(new RequestLocalizationOptions {
        DefaultRequestCulture = new RequestCulture(culture: "de-DE", uiCulture: "de-DE"),
        SupportedUICultures = new List<CultureInfo> { new CultureInfo("en-US"), new CultureInfo("de-DE") 
    }});    
}

Note that specifying the SupportedUICultures property is mandatory – this is the list of cultures your application supports. The culture specified using the DefaultRequestCulture property is used as a fallback culture when no other culture is requested, or the requested culture does not exist.

Refer to the Globalization and localization in ASP.NET Core topic in Microsoft documentation for more information.





Add TypeScript Type Definitions

Follow the steps below to include TypeScript type definitions in your ASP.NET Core project.

  1. Download and add type definitions (*.d.ts files) to your project directory using one of the approaches below.
    • Npm Package Manager.

      Execute the following command within your project directory:

      npm install @types/devpexress-aspnetcore-bootstrap --save-dev

      This command adds the DevExpress TypeScript type definitions and a dependency entry to your project's package.json file.

    • The DefinitelyTyped repository.

      Download the index.d.ts file and add it to your project directory.

    • DevExpress controls installation.

      Install DevExpress controls to your machine and copy the C:\Program Files (x86)\DevExpress ##.#\Components\Sources\DevExpress.Web.ASPxScriptIntelliSense\devexpress-aspnetcore-bootstrap.d.ts file to your project.

  2. For non-Visual Studio users: Include type definitions to your script files using triple-slash directives.

    /// <reference path=".../devpexress-aspnetcore-bootstrap.d.ts" />
  3. Use JSDoc comments or declare expressions to specify a global type for controls, for example:

    @(Html.DevExpress()
        .BootstrapButton("defaultButton")
        .Text("Button")
        .ClientSideEvents(events => events
        .Click("onButtonClick")))

    Define the global button type using the following JSDoc comments:

    /** @type {DevExpress.AspNetCore.BootstrapButton} */
    var defaultButton= defaultButton;
     
    /** @param {DevExpress.AspNetCore.ButtonClickEventArgs} args */
    function onButtonClick(args) {
        console.log(this.getText())
    }
        
    setTimeout(function (args) {
      defaultButton.doClick();
    })
Screen Size
Color Themes
Demo QR Code