مقدمه
یکی از مشخصه های مشترک سایت های user-friendly این است که دارای نمای یک صفحه در کل صفحات (site-wide page layout) و scheme راهبری هستند. ASP.NET 2.0 دو ویژگی جدید معرفی می کند که پیاده سازی نمای یک صفحه در کل صفحات و scheme راهبری را بسیار ساده می کند: صفحات اصلی و راهبری سایت. صفحات اصلی به برنامه نویسان اجازه ایجاد یک template به پهنای سایت را با ناحیه های تعیین شده و قابل ویرایش می دهد. این template، را می توان صفحات ASP.NET در سایت اعمال نمود. چنین صفحات ASP.NET فقط به داشتن محتوا برای ناحیه های تعیین شده و قابل ویرایش نیاز دارند – همه markupهای دیگر در صفحات اصلی در تمامی صفحات ASP.NET که از صفحه اصلی استفاده می کنند، یکی است. این مدل به برنامه نویسان اجازه تعریف و متمرکز کردن نمای یک صفحه در کل صفحات را می دهد، و بدین ترتیب ایجاد ظاهر و احساسی یکپارچه را در تمامی صفحاتی که براحتی آپدیت می شوند، آسان می کند.
سیستم راهبری سایت (site navigation system) هم مکانیزمی برای برنامه نویسان ایجاد می کند تا نقشه سایت را تعریف کنند و هم یک API برای نقشه سایت که به طور برنامه ریزی شده ای query شود. کنترل های جدید راهبری Web– یعنی Menu، TreeView، و SiteMapPath – render کردن کل یا بخشی از نقشه سایت را در یک عنصر رایج در navigation user interface آسان می کند. ما از site navigation provider پیش فرض استفاده خواهیم کرد، بدین معنی که نقشه سایت ما در فایلی با فرمت XML تعریف می شود.
جهت نشان دادن این سه مفهوم و قابل استفاده کردن tutorialهای وبسایتمان، این مقاله را به تعریف نمای یک صفحه در کل صفحات، پیاده سازی نقشه سایت، و اضافه کردن راهبری UI اختصاص می دهیم.
شکل 1: نتیجه پایانی این مقاله
مرحله اول: ایجاد صفحه اصلی
قدم اول، ایجاد صفحه اصلی سایت است. در حال حاضر سایت فقط ازTyped DataSet (Northwind.xsd، در پوشه App_Code)، کلاس های BLL (ProductsBLL.cs، CategoriesBLL.cs، و غیره در پوشه App_Code )، دیتا بیس (NORTHWND.MDF، در پوشه App_Code )، فایل پیکر بندی (Web.config)، و یک فایل CSS stylesheet (Styles.css) تشکیل شده است.
شکل 2: فایل ها در پروژه ما
برای ایجاد یک صفحه اصلی، روی نام پروژه در Solution Explorer کلیک راست کنید و Add New Item را اضافه کنید. سپس تایپ Master Page را از لیست templateها انتخاب کنیو و نام آن را Site.master بگذارید.
شکل 3: اضافه کردن یک Master Page به وب سایت
site-wide page layout را در صفحه اصلی تعریف کنید. می توانید از viewی Design استفاده کنید و هر Layout یا Web کنترلی که نیاز دارید اضافه کنید، یا می توانید بطور دستی markup را در viewی Source اضافه کنید. من در صفحه اصلی، از styleهایی با تنظیمات CSS که در فایل خارجی Style.css تعریف شده، و cascading style sheetها برای موقعیت یابی (positioning) استفاده می کنم. در حالیکه نمی توان از روی markupیی که در زیر نشان داده شده نمی توان اظهارنظر کرد، قوانین CSS طوری تعریف می شوند که محتویات راهبری <div> کاملاً position می شود، طوری که در سمت چپ ظاهر می شود و دارای پهنای ثابت 200 پیکسل است.
Site.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Working with Data Tutorials</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">Working with Data Tutorials</span>
<span class="breadcrumb">TODO: Breadcrumb will go here...</span>
</div>
<div id="content">
<asp:contentplaceholder id="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:contentplaceholder>
</div>
<div id="navigation">
TODO: Menu will go here...
</div>
</form>
</div>
</body>
</html>
یک صفحه اصلی، هم page layout استاتیک را تعریف می کند و هم ناحیه هایی را که می توان توسط صفحات ASP.NET که از صفحه اصلی استفاده می کنند، ویرایش کرد. این ناحیه ها، که محتوایشان قابل ویرایش است، توسط کنترل ContentPlaceHolder نشان داده می شوند، و می توان در محتویات <div> مشاهده کرد. صفحه اصلی ما دارای یک ContentPlaceHolder واحد است، اما ممکن است دارای ContentPlaceHolders چندگانه نیز باشد.
با markupیی که در بالا وارد شده، سوییچ کردن به viewی Design، layout صفحه اصلی را نشان می دهد. هر صفحه ASP.NET که ار این master page استفاده می کند، دارای همین layout یک شکل خواهد بود، و قابلیت مشخص کردن markup برای ناحیه MainContent خواهد داشت.
شکل 2: صفحه اصلی، هنگام مشاهده از طریق Design View
![clip_image001[4]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B4%5D.gif "clip_image001[4]")
مرحله دوم: اضافه کردن یک home page به وب سایت
حالا با صفحه اصلی ای که تعریف کرده ایم، آماده اضافه کردن صفحات ASP.NET به وب سابت هستیم. بیایید با اضافه کردن Default.aspx به home page شروع کنیم. روی نام پروژه در Solution Explorer راست کلیک کنید و Add New Item را انتخاب کنید. آپشن Web Form را از لیست template انتخاب کنید و فایل را نامگذاری کنید. چک باکس "Select master page" را نیز تیک بزنید.
شکل 5: اضافه کردن یک New Web Form، و تیک زدن چک باکس "Select master page"
![clip_image002[10]](http://articles.tahlildadeh.com/image.axd?picture=clip_image002%5B10%5D_thumb.gif "clip_image002[10]")
بعد از OK کردن، برنامه از ما می پرسد این صفحه ASP.NET جدید باید از کدام صفحه اصلی استفاده کند. در حالیکه می توانید چندین master page در پروزه تان داشته باشید، ممکن است شما فقط یکی را انتخاب کنید.
شکل 6: انتخاب صفحه اصلی ای که این صفحه ASP.NET باید استفاده کند
![clip_image003[6]](http://articles.tahlildadeh.com/image.axd?picture=clip_image003%5B6%5D.gif "clip_image003[6]")
بعد از انتخاب master page، صفحه ASP.NET جدید شامل markup زیر خواهد بود:
Default.aspx
<%@
Page Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Title="Untitled Page" %>
<asp:Content
ID="Content1"
ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>
در کد راهنمایی @page، یک reference به فایل صفحه اصلی وجود دارد که مورد استفاده قرار گرفته (MasterPageFile="~/Site.master")، و markup صفحه ASP.NET، شامل یک کنترل Content برای هر یک از کنترل های ContentPlaceHolder است که در صفحه اصلی تعریف شده. کنترل Content جایی است که markupیی را که می خواهید در ContentPlaceHolder متناظر ظاهر شود، قرار می دهید. صفت Title کد راهنمایی @page را روی home تنظیم کنید و یک content خوش آمد گویی به کنترل Content اضافه کنید:
Default.aspx
<%@
Page Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Title="Home" %>
<asp:Content
ID="Content1"
ContentPlaceHolderID="MainContent" Runat="Server">
<h1>Welcome to the Working with Data Tutorial
Site</h1>
<p>
This site is being built as part of a set of tutorials that illustrate some of the new data access
and databinding features in ASP.NET 2.0 and Visual Web Developer.</p>
<p>Over time, it will include a host of samples that demonstrate:</p>
<ul>
<li>Building a DAL (data access layer),</li>
<li>Using strongly typed TableAdapters and DataTables</li>
<li>Master-Detail reports</li>
<li>Filtering</li>
<li>Paging,</li>
<li>Two-way databinding,</li>
<li>Editing,</li>
<li>Deleting,</li>
<li>Inserting,</li>
<li>Hierarchical data browsing,</li>
<li>Hierarchical drill-down,</li>
<li>Optimistic concurrency,</li>
<li>And more!</li>
</ul>
</asp:Content>
صفت Titleموجود در کد راهنمای @Page، ب ما اجازه تعیین عنوان صفحه از صفحه ASP.NET را می دهد، گرچه عنصر <title> در صفحه اصلی تعریف می شود. همچنین می توانیم با استفاده از Page.Title ، عنوان را به طور برنامه ریزی شده ای تعیین کنیم. همچنین توجه داشته باشید که referenceهای صفحه اصلی به stylesheetها (از قبیل Style.css) به طور اتوماتیک آپدیت می شوند، طوری که در صفحه ASP.NET کارایی دارند، بدون درنظر گرفتن اینکه صفحه ASP.NET در ارتباط با صفحه اصلی، در کدام دایرکتوری قراردارد.
با سوییچ کردن به viewی Design، می بینیم صفحه اصلی ما در browser چه نمایی دارد. توجه کنید که در
viewی Design برای صفحات ASP.NET ، که فقط ناحیه هایی با محتویات قابل ویرایش، را می توان ویرایش کرد، markup غیر ContentPlaceHolder که در صفحه اصلی تعریف شده، خاکستری رنگ می شود.
شکل 7: Design View برای صفحه ASP.NET، هم نواحی قابل ویرایش را نشان می ده8د هم نواحی غیر قابل ویرایش
![clip_image001[6]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B6%5D.gif "clip_image001[6]")
وقتی از صفحه Default.aspx بازدید می شود، موتور ASP.NET بطور اتوماتیک محتویات صفحه اصلی را با محتویات ASP.NET ادغام می کند، و محتویات ادغام شده به HTML، را که به browser درخواست کننده ارسال می شود، render می کند. وقتی محتویات صفحه اصلی آپدیت می شود، همه صفحات ASP.NET که از این صفحه اصلی استفاده می کند، دفعه بعد که request می شوند، محتویات شان را با محتویات جدید صفحه اصلی ادغام می کنند. بطور خلاصه، مدل صفحه اصلی به یک page layout template واحد اجازه تعریف شدن را می دهد، و تغییراتش بلافاصله در کل سایت منعکس می شود.
افزودن صفحات ASP.NET اضافی به وب سایت
بیایید نگاهی به چگونگی اضافه کردن stubهای صفحات ASP.NET به سایت بیتدازیم که نهایتا شامل demoهای مختلف گزارش گیری خواهد شد. در مجموع بیش از 35 demo وجود خواهد داشت، پس بجای ایجاد همه صفحات stub، بهتر است فقط چند صفحه ایجاد کنیم. از آنجاییکه categoryهای زیادی از demo نیز وجود خواهد داشت، به منظور مدیریت بهترdemoها، پوشه ای را برای categoryها ایجاد می کنیم. فعلاً سه پوشه زیر را ایجاد می کنیم:
- BasicReporting
- Filtering
- CustomFormatting
نهایتاً، فایل های جدید را Solution Explorer اضافه کنید،همانطور که در شکل 8 نشان داده شده. هنگام اضافه کردن هر فایل، تیک زدن چک باکس "Select master page" را فراموش نکنید.
شکل 8: ایجاد کردن فایل های جدید
![clip_image002[12]](http://articles.tahlildadeh.com/image.axd?picture=clip_image002%5B12%5D.gif "clip_image002[12]")
مرحله سوم: ایجاد نقشه سایت
یکی از چالش های مدیریت یک وبسایت که از چندین صفحه تشکیل شده است، در اختیار گذاشتن روشی راحت برای کاربران جهت پیمایش (navigate) در سایت است. ابتدا باید ساختار پیمایشی ساخت را تعریف کرد. سپس باید این ساختار را به عناصر user interfaceقابل پیمایش، از قبیل منوها یا breadcrumbها تبدیل کرد. نهایتاً، کل این فرآیند باید مراقبت شوند و هنگامی که صفحات جدید به سایت اضافه می شوند وصفحات قبلی پاک می شوند، آپدیت شوند. قبل از ASP.NET، برنامه نویسان در ایجاد ساختار پیمایشی سایت، مراقبت از آن، و انتقال آن به عناصر user interface قابل پیمایش مختار بودند. اما با ASP.NET، برنامه نویسان می توانند از سیستم راهبری انعطاف پذیر درون سایت استفاده کنند.
سیستم راهبری (یا پیمایش) سایت، ابزاری را را برای تعریف نقشه سایت و سپس دسترسی به این اطلاعات از طریق یک API برنامه ریزی شده در اختیار می گذارد. ASP.NET با یک تهیه کننده نقشه سایت ship می کند که از داده های نقشه سایت انتظار دارد در یک فایل XML ذخیره شود. اما از آنجاییکه سیستم راهبری سایت بر اساس مدل provider ساخته می شود، می توان آنرا برای ساپورت روش های جایگزین serialize کردن اطلاعات نقشه سایت گسترش داد. یک روش برای ایجاد یک site map provider، تهیه نقشه سایت بر اساس ساختار سیستم فایل است.
در این مقاله از site map provider پیش فرض استفاده می کنیم که با ASP.NET 2.0 شیپ (ship) می کند. برای ایجاد نقشه سایت، کافیست روی نام پروژه در Solution Explorer کلیک راست کنید و Add New Item و سپس آپشن Site Map را انتخاب کنید. نامش را Web.sitemap بگذارید و روی دکمه Add کلیک کنید.
شکل 9: اضافه کردن نقشه سایت به پروژه تان
![clip_image003[8]](http://articles.tahlildadeh.com/image.axd?picture=clip_image003%5B8%5D.gif "clip_image003[8]")
فایل نقشه سایت، یک فایل XML است. توجه داشته باشید که Visual Studio، برای ساختار نقشه سایت، IntelliSense در اختیار می گذارد. فایل نقشه سایت باید دارای نُدِ <siteMap> به عنوان نُدِ (node) اصلی باشد، که باید دقیقاً حاوی یک عنصر فرزند <siteMapNode> باشد. اولین عنصر <siteMapNode> می تواند حاوی شماره ای اختیاری از عناصر فرزندی <siteMapNode> باشد.
نقشه سایت را جهت کپی برداری ساختار سیستم تعریف کنید. بدین ترتیب که، یک عنصر <siteMapNode> برای هر یک از سه پوشه، و عناصر فرزند <siteMapNode> را برای هریک از صفحات ASP.NET در آن پوشه ها اضافه کنید؛ به صورت زیر:
Web.sitemap:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Default.aspx" title="Home" description="Home">
<siteMapNode title="Basic Reporting" url="~/BasicReporting/Default.aspx"
description="Basic Reporting Samples">
<siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"
title="Simple Display" description="Displays the complete contents of a database table." />
<siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"
title="Declarative Parameters" description="Displays a subset of the
contents of a database table using parameters." />
<siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"
title="Setting Parameter Values" description="Shows how to set
parameter values programmatically." />
</siteMapNode>
<siteMapNode title="Filtering Reports" url="~/Filtering/Default.aspx"
description="Samples of Reports that Support Filtering">
<siteMapNode url="~/Filtering/FilterByDropDownList.aspx"
title="Filter by Drop-Down List" description="Filter results using a drop-down list." />
<siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"
title="Master-Details-Details" description="Filter results two levels down." />
<siteMapNode url="~/Filtering/DetailsBySelecting.aspx"
title="Details of Selected Row" description="Show detail results for a selected item in a GridView." />
</siteMapNode>
<siteMapNode title="Customized Formatting" url="~/CustomFormatting/Default.aspx"
description="Samples of Reports Whose Formats are Customized">
<siteMapNode url="~/CustomFormatting/CustomColors.aspx" title="Format Colors"
description="Format the grid's colors based on the underlying data." />
<siteMapNode url="~/CustomFormatting/GridViewTemplateField.aspx"
title="Custom Content in a GridView" description="Shows using the
TemplateField to customize the contents of a field in a GridView." />
<siteMapNode url="~/CustomFormatting/DetailsViewTemplateField.aspx"
title="Custom Content in a DetailsView"
description="Shows using the TemplateField to customize the contents of a field in a DetailsView." />
<siteMapNode url="~/CustomFormatting/FormView.aspx" title="Custom Content in a FormView"
description="Illustrates using a FormView for a highly customized view." />
<siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx" title="Summary Data in Footer"
description="Display summary data in the grid's footer." />
</siteMapNode>
</siteMapNode>
</siteMap>
نقشه سایت، ساختار پیمایشی وب سایت را تعریف می کند، که یک hierarchy است که بخش های مختلف سایت را توصیف می کند. هر عنصر <siteMapNode> در Web.sitemap، نشانگر بخشی در ساختار پیمایشی سایت است.
شکل 10: نقشه سایت، یک ساختار پیمایشی Hierarchical را نشان می دهد
![clip_image001[8]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B8%5D_1.gif "clip_image001[8]")
ASP.NET ساختار نقشه سایت را از طریق کلاس SiteMap در .NET Framework اکسپوز (expose) می کند. این کلاس دارای خصوصیت CurrentNode است، که اطلاعات قسمتی را که کاربر در حال حاضر بازدید است بازمی گرداند؛ خصوصیت RootNode، ریشه نقشه سایت را بازمی گرداند. هم خصوصیت CurrentNode هم RootNode نمونه های SiteMapNod را که دارای خصوصیاتی نظیر ParentNode، ChildNodes، NextSibling، PreviousSibling، و غیره است که به سلسله نقشه سایت اجازه می دهد walk شوند.
مرحله چهارم: نمایش یک منو بر اساس نقشه سایت
می توان به داده ها در ASP.NET به طور برنامه ریزی شده دسترسی پیدا کرد. متلاً در ASP.NET 1.x، یا بطور تعریفی از طریق کنترل های منبع جدید داده ها. چندین کنترل درونی برای منبع داده ها از قبیل کنترل SqlDataSource برای دسترسی به داده های بانک اطلاعاتی رابطه ای، کنترل ObjectDataSource برای دسترسی به داده ها از کلاس ها، و غیره وجود دارد. حتی می توانید کنترل های منبع داده های (data source) سفارشی خودتان را نیز ایجاد کنید.
کنترل های منبع داده ها به عنوان یک پروکسی بین صفحه ASP.NET شما و داده های بنیادی عمل می کند. بمنظور نمایش داده های بازیابی شده کنترل منبع داده ها، معمولا کنترل وب دیگری به صفحه اضافه می کنیم و آن را به کنترل منبع داده ها bind می کنیم. برای bind کردن یک کنترل وب به کنترل منبع داده ها؛ کافیست property کنترل DataSourceID را روی مقدار ID property کنترل منبع داده ها تنظیم کنید.
جهت کمک به کارکردن با داده های نقشه سایت، ASP.NET، حاوی کنترل SiteMapDataSource است که به ما اجازه bind کردن کنترل وب در مقابل نقشه سایتمان را می دهد. دو کنتل وب – یعنی TreeView و Menu – معمولاً برای فراهم نمودن یک navigation user interface بکار می روند. جهت bind کردن د اده های نقشه سایت به یکی این دو کنترل، کافیست یک SiteMapDataSource به صفحه، همراه با یک کنترل TreeView یا Menu اضافه کنید، که نتیجتاخصوصیت DataSourceID شان نیز ً تنظیم می شود. مثلاً، می توان با استفاده از markup زیر یک کنترل Menu به صفحه اصلی اضافه نمود:
<div id="navigation">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
For a finer degree of control over the emitted HTML, we can
bind the SiteMapDataSource control to the Repeater control, like so:
<div id="navigation">
<ul>
<li><asp:HyperLink runat="server" ID="lnkHome"
NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
<ItemTemplate>
<li>
<asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%
1: # Eval("Title")
%></asp:HyperLink>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server" ShowStartingNode="false" />
</div>
کنترل SiteMapDataSource، سلسله مراتب نقشه سایت را در یک زمان، یک level باز می گرداند، و با node اصلی نقشه سایت شروع می کند (در سایت ما Home)، و سپس level بعدی (Basic Reporting، Filtering Reports، Customized Formatting)، و الی آخر. هنگام bind کردن SiteMapDataSource به یک تکرار کننده (Repeater)، level اول بازگردانده شده را باز می گرداند و ItemTemplate برای هر نمونه از SiteMapNode در level اول را بع عنوان مثال ذکر می کند. برای دسترسی به property معینی از SiteMapNode، می توان از Eval ((propertyName) استفاده کرد که روش دست یابی ما به propertyهای SiteMapNode's Url و Title برای کنترل HyperLink است.
<li>
<a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
</li>
<li>
<a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
</li>
<li>
<a href="/Code/CustomFormatting/Default.aspx">Customized Formatting</a>
</li>
nodeهای نقشه سایت (Basic Reporting، Filtering Reports، و Customized Formatting)، level دوم از نقشه سایت را که در حال render شدن است، تشکیل می دهد، نه level اول را. دلیلش این است که خصوصیت ShowStartingNode در SiteMapDataSource روی false تنظیم شده است، که باعث می شود SiteMapDataSource، ند اصلی نقشه سایت را bypass کند و در عوض با بازگرداندن level دوم در سلسله مراتب نقشه سایت شروع کند.
جهت نشان دادن زیرگزارش ها برای Basic Reporting، Filtering Reports، و Customized Formatting SiteMapNodes، می توان یک تکرا کننده ((Repeater به تکرار کننده ItemTemplate ابتدایی اضافه کرد. این تکرار کننده تانویه، به خصوصیت ChildNodes نمونه SiteMapNode، بایند (bind) می شود، مانند زیر:
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
<ItemTemplate>
<li>
<asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%
1: # Eval("Title")
%></asp:HyperLink>
<asp:Repeater runat="server" DataSource='<%# ((SiteMapNode)
Container.DataItem).ChildNodes %>'>
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%
1: # Eval("Title")
%></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
</asp:Repeater>
این دو تکرار کننده، منجر به markup زیر می شوند (بعضی از markupها بمنظور خلاصه شدن، حذف شده اند) :
<li>
<a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
<ul>
<li>
<a href="/Code/BasicReporting/SimpleDisplay.aspx">Simple Display</a>
</li>
<li>
<a href="/Code/BasicReporting/DeclarativeParams.aspx">Declarative Parameters</a>
</li>
<li>
<a href="/Code/BasicReporting/ProgrammaticParams.aspx">Setting Parameter Values</a>
</li>
</ul>
</li>
<li>
<a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
...
</li>
<li>
<a href="/Code/CustomFormatting/Default.aspx">Customized Formatting</a>
...
</li
با استفاده از styleهای CSS که از کتاب The CSS Anthology: 101 Essential Tips, Tricks, and Hacks نوشته Rachel Andrew انتخاب شده اند، عنصرهای <ul> و <li> طوری style می شوند که markup، منجر به خروجی visual زیر می شود:
شکل 11: منویی تشکیل یافته از از دو تکرار کننده و مقداری CSS
![clip_image001[10]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B10%5D_2.gif "clip_image001[10]")
این منو در صفحه اصلی قرا دارد و به نقشه سایتی که در Web.sitemap تعریف شده، bind می شود، بدین معنی که هر تغییری در نقشه سایت بلافاصله در همه صفحاتی که از صفحه اصلی Site.master استفاده می کنند، منعکس می شود.
غیر فعال کردن ViewState
تمامی کنترل های ASP.NET، را می توان روی حالت view stateشان مقاومت کنند، که به صورت یک فیلد فرم مخفی موجود در HTML رندر شده، serialize می شود. View state توسط کنترل هایی استفاده می شوند که حالتشان را که در postbacks، از قبیل داده هایی که به کنترل وب داده ها bind شده، بصورت برنامه ریزی شده ای تغییر می کند، یاد آوری کند. در حالیکه view state، به اطلاعات اجازه می دهد در postbacks یاد آوری شوند، اندازه markupیی را که باید به client ارسال شود را افزایش می دهد، و اگر با دقت monitor نشود، می تواند منجر به bloat شدید صفحه شود. کنترل های Data Web – مخصوصاً GridView – برای اضافه کردن مقادیر زیادی markup به یک صفحه، بسیار نامناسب هستند. در حالیکه چنین افزایشی ممکن است برای broadband یا کاربران intranet کم اهمیت باشد، view state می تواند چندین ثانیه را به round trip برای کاربران dial-up اضافه کند.
جهت درک تاثیر view state، صفحه ای را در مرورگر باز کنید و سپس منبع ارسال شده توسط web page را مشاهده کنید ( درInternet Explorer ، به منوی View بروید و آپشن Source را انتخاب کنید). همچنین می توانید page tracing را روشن کنید تا تخصیص view state را که توسط هریک از کنترل ها روی صفحه استفاده شده است، مشاهده کنید. اصلاعات view state، دریک فیلد فرم مخفی بنام __VIEWSTATE سریالایز می شود، که بلافاصله بعد از باز کردن تگ <form> در عنصر <div> قرار می گیرد. view state فقط هنگامی مقاومت می کند که یک Web Form در حال استفاده شده وجود داشته باشد؛ اگر صفحه ASP.NET شما حاوی <form runat="server"> در syntax تعریف شده نباشد، آنگاه یک فیلد فرم مخفی __VIEWSTATE در markup رندر شده وجود نخواهد داشت.
فیلد فرم VIEWSTATE که توسط صفحه اصلی generate شده است، تقریباً 1800 بایت را به مارک آپ generate شده صفحه اضافه می کند. این bloat اضافی به علت وجود کنترل Repeater است، همانطور که محتوای کنترل SiteMapDataSource برای view state مقاومت می کنند. در حالیکه ممکن است 1800 بایت اضافی زیاد هیجان انگیز بنظر نرسد، اما هنگام استفاده از یک Gridview با فیلدها و رکوردهای زیاد، view state براحتی توسط یک فاکتور 10 یا بیشتر swell می شود.
می توان view state را از طریق تنظیم خصوصیت EnableViewStateروی false، در صفحه یا control level غیر فعلا نمود، و بدین طریق، اندازه مارک آپ رندر شده را کاهش می دهد. از آنجاییکه view state برای کنترل وب داده ها، داده های bind شده به کنترل وب داده ها را در postbacks نگه می دارد، هنگان غیر فعال کردن view state برای یک کنترل وب داده ها، داده ها را باید روی هر postback، بایند کرد. در ASP.NET نسخه 1.x، این مسئولیت به عهده برنامه نویس آن صفحه است، اما در ASP.NET 2.0، اگر نیاز باشد، کنترل های وب داده ها، دوباره به کنترل منبع داده ها روی هر postback بایند می شوند.
جهت کاهش view state صفحه، بیایید خصوصیات EnableViewState کنترل Repeater را روی false تنظیم کنیم. می توان این کار را از طریق پنجره properties در Designer یا بطور تعریفی در Source view انجام داد. بعد از اعمال این تغییر، مارک آپ تعریفی Repeater باید این گونه باشد:
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
EnableViewState="False">
<ItemTemplate>
... ItemTemplate contents omitted for brevity ...
</ItemTemplate>
</asp:Repeater>
بعد از این تغییر، اندازه view state رندر شده صفحه به 52 بایت می رسد، کاهشی 97 درصدی در اندازه view state. در این مقاله، من view state کنترل های وب داده ها را بطور پیش فرض غیر فعال می کنم تا اندازه مارک رندر شده را کاهش دهم. در اکثر متال ها، خصوصیت EnableViewState روی false تنظیم می شود و بدون ذکر شدن انجام می شود. تنها زمانی که view state مورد بحث قرار می گیرند، در سناریوهایی است که باید فعال شود تا کنترل وب داده ها عملکرد مورد انتظار را براورده سازند.
مرحله پنجم: اضافه کردن Breadcrumb Navigation
جهت تکمیل صفحه اصلی، بیایید یک عنصر UI راهبری breadcrumb به هر صفحه اضافه کنیم. breadcrumb سریعاً موقعیت کنونی کاربر را در سلسله مراتب سایت نشان می دهد. اضافه کردن breadcrumb بسیار آسان است – کافیست یک کنترل SiteMapPath به صفحه اضافه کنید؛ هیچ کدی لازم نیست.
برای سایت خودمان، این کنترل را به هدر <div> اضافه کنید:
<span class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</span>
breadcrumb، صفحه کنونی ای را که کاربر در سلسله مراتب نقشه سایت در حال مشاهده است نشان می دهد.
شکل 12: Breadcrumb، صفحه کنونی را نشان می دهد
![clip_image001[12]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B12%5D.gif "clip_image001[12]")
مرحله ششم: اضافه کردن صفحه پیش فرض برای هر بخش
tutorialهای سایت ما به چند بخش مختلف تقسیم می شوند – Basic Reporting، Filtering، و Custom Formatting، و غیره – با یک پوشه برای هر category و tutorialهای معادل در صفحات ASP.NET در آن پوشه. به علاوه، هر پوشه حاوی یک صفحه Default.aspx است. برای این صفحه پیش فرض، بیایید همه tutorialها را برای بخش کنونی نمایش دهیم. بدین معنی که، برای Default.aspx در پوشه BasicReporting لینک هایی به SimpleDisplay.aspx، DeclarativeParams.aspx، و ProgrammaticParams.aspx داریم. در اینجا می توانیم از کلاس SiteMap و یک کنترل وب داده ها یرای نمایش این اطلاعات بر اساس نقشه سایت که در Web.sitemap تعریف شده استفاده کرد.
بیایید لیستی بدون ترتیب را با استفاده از یک Repeater دوباره نشالن دهیم، اما این بار ما عنوان و توصیف tutorialها را نشان می دهیم. از آنجاییکه مارک آپ و کد انجام این کار باید برای هر صفحه Default.aspx تکرار شود، می توانیم این UI logic را در User Control انکپسوله (encapsulate) کرد. پوشه ای بنام UserControls در این وبسایت ایجاد کنید و آنرا به یک آیتم جدید از تایپ User Control بنام SectionLevelTutorialListing.ascx اضافه کنید، و سپس مارک آپ زیر را اضافه کنید:
شکل 13: یک New Web User Control به پوشه UserControls اضافه کنید
![clip_image002[14]](http://articles.tahlildadeh.com/image.axd?picture=clip_image002%5B14%5D.gif "clip_image002[14]")
SectionLevelTutorialListing.ascx
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="SectionLevelTutorialListing.ascx.cs"
Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate>
<li><asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'
Text='<%# Eval("Title") %>'></asp:HyperLink>
- <%
1: # Eval("Description")
%></li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
SectionLevelTutorialListing.ascx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class UserControls_SectionLevelTutorialListing :
System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
// If SiteMap.CurrentNode is not null,
// bind CurrentNode's ChildNodes to the GridView
if (SiteMap.CurrentNode != null)
{
TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;
TutorialList.DataBind();
}
}
}
در مثالRepeater قبلی، ما داده های SiteMap را بطور تعریفی به Repeater بایند کردیم؛ اما کنترل یوزر SectionLevelTutorialListing این کار را به صورت برنامه ریزی شده ای انجام می دهد. در ایونت هندلر Page_Load، چک می شود آیا این بازدید، اولین بازدید از سایت است ( نه یک postback) و آیا URL این صفحه
به یک node در نقشه سایت map می شود. اگر این User Control در صفحه ای که یک مدخل <siteMapNode> متناظر است استفاده شود، SiteMap.CurrentNode به صورت node باز می گردد و هیچ داده ای به Repeater بایند نمی شود. فرض کنیم یک CurrentNode داریم، ما مجموعه ChildNodes هایش را به Repeater بایند می کنیم. از آنجاییکه نقشه سایت ما طوری نصب می شود که صفحه Default.aspx در هر بخش، ند (node) بالایی یا پدر همه tutorialهای موجود در آن بخش است، این کد لینک ها و توصیفات همه tutorialهای آن بخش را نشان خواهدداد، همانگونه که در screen shot زیر نشان داده شده است.
بعد از اینکه این Repeater ایجاد شد، صفحات Default.aspx را در هر پوشه باز کنید، و سپس به viewی Design بروید و فقط فرم User Control را از Solution Explorer به روی Design، یعنی جاییکه می خواهید لیست tutorialها ظاهر شوند، درگ کنید.
شکل 14: User Control به Default.aspx اضافه شده است
![clip_image001[14]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B14%5D.gif "clip_image001[14]")
شکل 15: Tutorialهای Basic Reporting ایست شده اند
![clip_image002[16]](http://articles.tahlildadeh.com/image.axd?picture=clip_image002%5B16%5D.gif "clip_image002[16]")
خلاصه
با نقشه سایت تعریف شده و master page تکمیل شده، حالا ما دارای یک page layout یکدست و یک navigation scheme برای tutorial]ای مربوط به داده هایمان هستیم. با نادیده گرفتن تعداد صفحاتی که به سایتمان اضافه کرده ایم، آپدیت کردن نمای کلی صفحه یا اطلاعات راهبری سایت، فرآیندی سریع و ساده است؛ زیرا این اطلاعات متمرکز می شوند. مخصوصاً اینکه اطلاعات page layout در Site.master صفحه اصلی و نقشه سایت در Web.sitemap تعریف می شوند. نیاز به نوشتن هیچ کدی برای انجام این site-wide page layout و مکانیزم راهبری نداریم.
اشتراک