ContextQMD
Back to Devexpress

Responsive Web Application

aspnet-120713-whats-installed-visual-studio-integration-template-gallery-responsive-web-application-template.md

latest4.1 KB
Original Source

Responsive Web Application

  • Jun 21, 2024
  • 3 minutes to read

The Web Application template with a Responsive layout allows you to create an adaptive layout that includes several web pages based on DevExpress ASP.NET AJAX Web Forms controls.

Run Demo: Responsive Web Application

Watch Video: Build Responsive ASP.NET Websites with DevExpress

Create an Application

Follow the steps below to create a responsive web application.

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

  2. In the DevExpress ASP.NET Project Wizard, select Layout → Responsive , customize project settings, and click Create Project.

Add a Custom Page to The Project

Follow the steps below to add custom pages (FormLayout.aspx and Map.aspx):

  1. Add two new Web Form with Master Page items to your project.

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

  3. Add icons for the new menu items to the Images folder. The web application displays the icons when you collapse the menu to a vertical side menu.

Create a Layout for Custom Pages

The newly created Form Layout web form contains the following code:

aspx
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftPanelContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="RightPanelContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageToolbar" runat="server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
</asp:Content>

The LeftPanelContent section holds content that occupies the left navigation pane.
Add the following code to this section:

aspx
<asp:Content ID="Content2" ContentPlaceHolderID="LeftPanelContent" runat="server">
    <h3 class="leftpanel-section section-caption">Categories</h3>
    <dx:ASPxNavBar ...>
        <Groups>
            <dx:NavBarGroup>
                <Items>
                    <dx:NavBarItem Text="Category 1" Selected="true" Name="Category1" NavigateUrl="FormLayout.aspx" />
                    <dx:NavBarItem Text="Category 2" Name="Category2" NavigateUrl="FormLayout.aspx?2" />
                    <dx:NavBarItem Text="Category 3" Name="Category3" NavigateUrl="FormLayout.aspx?3" />
                </Items>
            </dx:NavBarGroup>
        </Groups>
    </dx:ASPxNavBar>
</asp:Content>

The image below shows the result.

The PageContent section holds the main content that occupies most of the screen space. You can create a page with a Simple or Autofit layout.

  1. In the Simple layout, the content is placed inside the PageContent container. You can see the same approach in the Home , GridView , Article , and FormLayout pages.

  2. In the Autofit layout, you can use adjustment delegates to fit content to the container. You can see the same approach in the Scheduler and Map pages.

View Example: Responsive Web Application

See Also