Getting Started

Apr 15, 2019
7 minutes to read

IMPORTANT

Bootstrap Controls for ASP.NET Core are in maintenance mode. We don’t add new controls or develop new functionality for this product line. Our recommendation is to use the ASP.NET Core Controls suite.

NOTE

See Online Demos: https://demos.devexpress.com/aspnetcore-bootstrap/GettingStarted

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

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;
    });
});

Modify _ViewImports.cshtml

Add a namespace reference as follows:
- C#
```
@using DevExpress.AspNetCore
```

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:

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))
```

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))

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; }
            //...
}

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();
    }
}

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

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:
- C#
```
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" />

Add TypeScript Type Definitions

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

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 <version>\Components\Sources\DevExpress.Web.ASPxScriptIntelliSense\devexpress-aspnetcore-bootstrap.d.ts file to your project.
For non-Visual Studio users: Include type definitions to your script files using triple-slash directives.
```
/// <reference path=".../devpexress-aspnetcore-bootstrap.d.ts" />
```

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();
})

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

IMPORTANT

NOTE

Install DevExpress Packages

Get DevExpress NuGet feed

In Visual Studio

Cross-Platform Projects

Add Dependencies

Render DevExpress Controls

Configure Controls for AJAX in Razor Pages

Configure Controls for AJAX

Customize a control’s appearance

Create Adaptive Layouts

Use Bootstrap Themes

Change Icons

Add TypeScript Type Definitions