[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Collapse]What's Installed
   Control Demos
  [Expand]Real-World Sample Applications
  [Collapse]Visual Studio Integration
    Menu Entries
    Project Wizard
   [Collapse]Template Gallery
     Blog Web Application Project Template
     Responsive Web Application Template
    Insert DevExpress MVC Extension Wizard
    NuGet Packages
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Responsive Web Application Template

The Responsive Web Application template allows you to create an adaptive layout in your application. The template includes several adaptive web pages based on DevExpress ASP.NET AJAX WebForms controls or MVC extensions.

 

Refer to the following points to find more information about DevExpress ASP.NET templates.

Expanded Getting Started

Follow the steps below to create an application based on the Responsive Web Application template.

  1. Launch the DevExpress Template Gallery, select the Responsive Web Application template, and click Run Wizard.

     

  2. Specify the application's base color and font settings in the Project Wizard.

     

  3. Click Create Project to close the wizard and create the project.

Expanded Project Structure

The wizard creates the project with the following structure.

 

  • The Account folder contains Login/Register forms.
  • The App_Data folder contains formatted text articles and an xml file for the main menu (ApplicationMenuDataSource.sitemap).
  • The Code folder contains the following files.

    • The AuthHelper.cs file provides authentication API for Login/Register forms.
    • The DBContenxt.cs file provides sample data for a grid and scheduler.
  • The Content folder contains the following folders and files.

    • The Images folder contains project images and icons.
    • The Content.css file provides styles required for formatted text articles.
    • The Layout.css file provides styles required for the project's layout.
    • The Script.js file provides client code for the navigation UI and layout.
  • The Root.master file provides markup and code-behind for the navigation UI and layout.

Expanded Add a Custom Page to The Project

See the online example that demonstrates the Responsive Web Application template-based application with two custom pages: Form Layout and Map.

To add custom pages to the project, do the following:

  1. Add new items (Web Forms with Master Page) to your project.

     

  2. Add sitemap nodes to the App_Data/ApplicationMenuDataSource.sitemap file.

    The image below shows the result.

     

  3. Add icons for the new menu items to the Images folder. The icons are displayed when the menu is collapsed to a vertical side-menu.

    Note that icon names should duplicate the corresponding node's title value. For example, for a node with title="Map", corresponding icon names are "Map.svg" and "Map-white.svg".

Expanded Create a Layout For Custom Pages

The newly created web form with a master page contains the following code.

The LeftPanelContent section holds the content that occupies the left navigation pane.

The image below shows the result.

 

The PageContent section holds the main content that occupies most of the screen space.

You can provide a page with a Simple or Autofit layout.

  1. In the Simple layout, the content is placed inside the PageContent container.

    This approach is used in the Home, GridView, Article, and FormLayout pages.

    The image below shows the result.

     

  2. In the Autofit layout, the content is placed inside the PageContent container and adjusted to the container's full height and width using adjustment delegates.

    This approach is used in the Scheduler and Map pages.

    The adjustment delegates are client functions that are called each time the browser window is resized.

    The image below shows the result.

Is this topic helpful?​​​​​​​