創(chuàng)建一個(gè)響應(yīng)式Web應(yīng)用程序

---

點(diǎn)擊獲取DevExpress ASP.NET Web Forms下載

DevExpress技術(shù)交流群4：715863792      歡迎一起進(jìn)群討論

具有響應(yīng)式布局的Web Application模板允許您創(chuàng)建包含多個(gè)基于 DevExpress ASP.NET AJAX Web Forms控件的網(wǎng)頁自適應(yīng)布局。

創(chuàng)建一個(gè)應(yīng)用程序

按照以下步驟創(chuàng)建響應(yīng)式 Web 應(yīng)用程序。

1. 運(yùn)行DevExpress Web App模板庫，然后選擇Web Application模板，單擊Run Wizard。

2. 在DevExpress ASP.NET項(xiàng)目向?qū)е校x擇Layout → Responsive，自定義項(xiàng)目設(shè)置，然后單擊Create Project。

向項(xiàng)目添加自定義頁面

按照以下步驟添加自定義頁面（FormLayout.aspx 和 Map.aspx）：

1. 添加兩個(gè)新的Web Form with Master Page項(xiàng)目到你的項(xiàng)目中。

在Solution Explorer部分右鍵單擊應(yīng)用程序名稱，然后選擇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>

下圖顯示了結(jié)果。

3. 將新菜單項(xiàng)的圖標(biāo)添加到Images文件夾，當(dāng)您將菜單折疊為垂直側(cè)邊菜單時(shí)，Web應(yīng)用程序會(huì)顯示這些圖標(biāo)。

圖標(biāo)名稱應(yīng)與相應(yīng)節(jié)點(diǎn)的標(biāo)題值重復(fù)。 例如，對(duì)于title=”Map”的節(jié)點(diǎn)，圖標(biāo)名稱為“Map.svg”和“Map-white.svg”。

為自定義頁面創(chuàng)建布局

新創(chuàng)建的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 部分包含占據(jù)左側(cè)導(dǎo)航窗格的內(nèi)容。將以下代碼添加到此部分：

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>

下圖顯示了結(jié)果：

PageContent 部分包含占據(jù)大部分屏幕空間的主要內(nèi)容，您可以創(chuàng)建具有簡(jiǎn)單或自動(dòng)調(diào)整布局的頁面。

1. 在Simple布局中，內(nèi)容放置在PageContent容器內(nèi)，您可以在 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>

下圖顯示了結(jié)果：

2. 在 Autofit 布局中，您可以使用調(diào)整委托使內(nèi)容適合容器，您可以在 Scheduler 和 Map 頁面中看到相同的方法。

將以下代碼添加到 Map.aspx 文件中：

ASPX

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

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

調(diào)整委托是在您調(diào)整瀏覽器窗口大小時(shí)項(xiàng)目調(diào)用的客戶端函數(shù) (Content → Script.js)，您可以將以下代碼作為腳本添加到 Map.aspx 文件或?qū)⑦@些函數(shù)添加到 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)
}

下圖顯示了結(jié)果：