Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Collapse]ASP.NET Core Bootstrap Controls
  Getting Started
  Grid View
  Charts
 [Expand]Site Navigation
 [Expand]Site Layout
 [Expand]Data Editors
 [Expand]Redistribution and Deployment
 [Expand]API Reference
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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

Expanded 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

Obtain your personal feed-authorization-key through your DevExpress account's Download Manager.

Expanded Add Dependencies

  1. Modify Startup.cs

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

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

  2. Modify _ViewImports.cshtml

    Add a namespace reference as follows:

  3. Modify _Layout.cshtml

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

Expanded 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:

Expanded 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:

  • Add the control’s Razor code to the created partial view. Specify AJAX requests route mapping for the new action method:

Expanded 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.

Style declaration:

Expanded 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/.

Expanded 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.

Expanded 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.

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

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:

How would you rate this topic?​​​​​​​