创建一个响应式Web应用程序

点击获取DevExpress ASP.NET Web Forms下载

DevExpress技术交流群4：715863792      欢迎一起进群讨论

具有响应式布局的Web Application模板允许您创建包含多个基于 DevExpress ASP.NET AJAX Web Forms控件的网页自适应布局。

创建一个应用程序

按照以下步骤创建响应式 Web 应用程序。

1. 运行DevExpress Web App模板库，然后选择Web Application模板，单击Run Wizard。

2. 在DevExpress ASP.NET项目向导中，选择Layout → Responsive，自定义项目设置，然后单击Create Project。

向项目添加自定义页面

按照以下步骤添加自定义页面（FormLayout.aspx 和 Map.aspx）：

1. 添加两个新的Web Form with Master Page项目到你的项目中。

在Solution Explorer部分右键单击应用程序名称，然后选择Add → New Item → Web Form with Master Page。

2. 将sitemap nodes添加到App_Data/ApplicationMenuDataSource.sitemap文件。

XML

<?xml version="1.0" encoding="utf-8"?>
<siteMap xmlns="//schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<siteMapNode url="javascript:void(0);">
<siteMapNode url="Default.aspx" title="Home">
</siteMapNode>
<!--...-->
<siteMapNode url="FormLayout.aspx" title="FormLayout">
</siteMapNode>
<siteMapNode url="Map.aspx" title="Map">
</siteMapNode>
</siteMapNode>
</siteMap>

下图显示了结果。

3. 将新菜单项的图标添加到Images文件夹，当您将菜单折叠为垂直侧边菜单时，Web应用程序会显示这些图标。

图标名称应与相应节点的标题值重复。 例如，对于title=”Map”的节点，图标名称为“Map.svg”和“Map-white.svg”。

为自定义页面创建布局

新创建的Form Layout web表单包含以下代码：

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>

LeftPanelContent 部分包含占据左侧导航窗格的内容。将以下代码添加到此部分：

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>

下图显示了结果：

PageContent 部分包含占据大部分屏幕空间的主要内容，您可以创建具有简单或自动调整布局的页面。

1. 在Simple布局中，内容放置在PageContent容器内，您可以在 Home、GridView、Article 和 FormLayout 页面中看到相同的方法。

将以下代码添加到 FormLayout.aspx 文件中：

ASPX

<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
<dx:ASPxPageControl ID="pageControl" Width="100%" runat="server"
ActiveTabIndex="0" EnableHierarchyRecreation="True" EnableTabScrolling="true">
<!--...-->
</dx:ASPxPageControl>
</asp:Content>

下图显示了结果：

2. 在 Autofit 布局中，您可以使用调整委托使内容适合容器，您可以在 Scheduler 和 Map 页面中看到相同的方法。

将以下代码添加到 Map.aspx 文件中：

ASPX

<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
<iframe id="mapControl" width="100%" src="//www.google.com/maps/..."></iframe>

<script type="text/javascript">
onMapControlInit(); // AdjustControl
</script>
</asp:Content>

调整委托是在您调整浏览器窗口大小时项目调用的客户端函数 (Content → Script.js)，您可以将以下代码作为脚本添加到 Map.aspx 文件或将这些函数添加到 Script.js：

JS

function adjustMapContainer() {
var mapControl = document.getElementById('mapControl');

// Calculate the available height's value for the map control
var footerWrapperHeight = document.getElementById('footerWrapper').offsetHeight;
var height = window.innerHeight - footerWrapperHeight - headerPanel.GetHeight();

// Assign the map control's height
mapControl.height = height;
}

function onMapControlInit(s, e) {
AddAdjustmentDelegate(adjustMapContainer); // The adjustment delegate is invoked each time you change the map control container (for instance, resize the browser window, expand/collapse the side menu, and so on)
}

下图显示了结果：