創建一個響應式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="http://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="http://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)
}

下圖顯示了結果：