Getting Started

This tutorial describes how to integrate DevExpress Bootstrap Controls into a web application and gives a few tips on building adaptive page layouts and customizing the controls' appearance and functionality.

First of all, here are the prerequisites for your ASP.NET Core application:

If you're starting a new application, we recommend that you use our boilerplate project that already has all the required references added as described below. In this case, you can skip the Install DevExpress Packages and Add Dependencies sections below.

https://github.com/DevExpress/bootstrap-aspnetcore-starter

Install DevExpress Packages

Get DevExpress NuGet feed

Obtain your personal NuGet feed at nuget.devexpress.com. To learn more, refer to the Obtain Your NuGet Feed URL article.

In Visual Studio

To register the feed using Visual Studio, use the NuGet Package Manager's Options dialog. To learn more, refer to the Setup Visual Studio’s NuGet Package Manager 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

Add Dependencies

  1. Modify Startup.cs

    The comments in 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;
        });
    });
    
  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

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.

  • Create a separate partial view.
  • 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);
    }
    
  • 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;
}

NetCore_GettingStarted_CustomizeControlAppearance

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.

NetCore_GettingStarted_IconSets

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" />