قالب بندی
صفحات وب در WP ( Page Layout )
مقدمه :
با استفاده از روش طراحی صفحات وب WP
در ASP.Net ، طراحی صفحات با ظاهر و قالب مشترک بسیار ساده و سریع خواهد بود . حتما
تا کنون با سایت ها و صفحات اینترنتی زیادی برخورد کرده اید که همه دارای ظاهر و
قالب یکسانی هستند ، یا به عبارت دیگر :
-
تمامی صفحات دارای هدر ( header )
و فوتر ( footer ) یکسان و مشابه هستند .
-
همچنین تمامی صفحات دارای قالب و
نمایه کلی یکسان و شبیه می باشند .
دقیقا همانند چیزی که در سایت خود ما
ملاحظه می کنید . تمامی صفحات دارای قالب یکسانی بوده و فقط محتوای آموزشی هر صفحه
تغییر می کند .
انجام چنین کاری با روش WP در ASP.Net بسیار ساده است . شما می توانید از بلوک های
یکسان و قابل استفاده چندین باره ( محتویات مشترک ) مثل هدرها ( headers ) یا
فوترها ( footers ) ها در صفحات مختلف استفاده کنید ، بدون اینکه نیاز داشته باشید
آنها را مجددا در هر صفحه از اول بنویسید . همچنین می توانید یک قالب کلی ( Layout
) را توسط یک فایل قالب برای صفحات خود تعیین نمایید .
بلوک های محتوای مشترک :
همانطور که در قسمت قبل توضیح دادیم ،
بیشتر سایت ها در صفحات خود دارای بخش های یکسان و تکراری هستند ( مثل هدرها و
فوترها ) که در هر صفحه تکرار می شوند .
در روش طراحی صفحات وب WP در ASP.Net ، می توانید با استفاده از دستور ( )
RenderPage ، محتویات هر فایل مورد نظر خود را در بخش لازم در صفحه قرار دهید .
این محتواها ( که درون یک فایل دیگر هستند ( می توانند در هر بخشی از صفحه که مورد
نظرتان است وارد شده و شامل متن ،
تگ های HTML ، دستورات برنامه نویسی و ... باشند ، مانند هر صفحه معمولی دیگر .
استفاده از هدرها و فوترهای یکسان مثال بسیار خوبی برای این مورد هستند . انجام این
کار تولید صفحات شما را بسیار سریع کرده و دیگر مجبور نیستید ، محتوای یکسان را در
هر صفحه کپی و Paste نمایید . همچنین حجم کد صفحات کاهش می یابند .
اما مهمترین و شاید سودمند ترین استفاده از روش صفحات مشترک و قالب ، این است که هر
گاه خواستید یک محتوی مشترک ( مثل هدر ) را تغییر دهید ، کافی است محتویات فایل آن
را اصلاح نمایید . سپس این اصلاحیه در تمامی صفحاتی که از آن هدر استفاده می کردند
، به صورت اتوماتیک اعمال می شوند . به جای اینکه مجبور شوید یک به یک هدر را در
هزاران صفحه سایت خود تغییر دهید !! .
مثال : مثال ساده زیر نحوه استفاده از دو فایل مختلف ، یکی برای
هدر و دیگری برای فوتر را در یک صفحه ASP.Net با کمک تابع ( ) RenderPage @ را نشان
می دهد :
|
کد
|
<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>
|
|
خروجی
|
محتویات فایل هدر
Hello Web Pages
This is a paragraph
محتویات فایل فوتر
|
استفاده از یک صفحه قالب (
Layout Page ) :
در قسمت قبل نحوه تکرار محتویات یکسان
در صفحات ASP.Net در روش WP را آموختید .
اما روش دیگر برای تولید صفحات یکسان و سریع ، استفاده از یک صفحه قالب یا الگو (
Layout Page ) است . صفحه الگو یا قالب ، ساختار صفحه را تعیین می کند نه محتویات
درون آن را ، یعنی می گوید صفحه به صورت کلی چه شکلی باشد .
سپس شما صفحات محتوا خود که حاوی مطالب سایت هستند را به صفحه الگو پیوند ( Link )
می زنید . این دو صفحه با هم ترکیب شده ، ساختار را از صفحه الگو به ارث برده و
محتویات را از صفحه محتوا دریافت می کنند . سپس یک صفحه واحد را تشکیل می دهند .
صفحه الگو یا قالب ، تعریفی همانند سایر صفحات معمولی ASP.Net دارد ، با این تفاوت
که در قسمتی که می خواهیم محتویات صفحه محتوا ، قرار بگیرند ، یک دستور ( )
RenderBody @ با نام صفحه محتوای مورد نظر درون آن ، تعریف می شود .
نکته بعدی این است که هر صفحه محتوا که آن نیز تعریفی همانند سایر صفحات ASP.Net
دارد ، و بایستی صفحه الگوی آن با یک کد اعلان Layout به صورت زیر در ابتدای صفحه
تعیین شود :
@{Layout="Layout.cshtml";}
برای درک بهتر به مثال زیر و نحوه
تلفیق در صفحه دقت نمایید :
|
کد صفحه قالب
Layout Page
|
<html>
<body>
<p> متن هدر</p>
@RenderBody()
<p> متن فوتر</p>
</body>
</html>
|
|
کد صفحه محتوا
|
@{Layout="Layout.cshtml";}
<h1>Welcome to Developer1</h1>
<p>
متن دلخواه
</p>
|
|
خروجی ترکیبی
|
متن هدر
Welcome to Developer1
متن دلخواه
متن فوترر
|
جلوگیری از نمایش برخی فایل ها
در مرورگر :
در سیستم ASP.Net ، فایل هایی که نام
آنها با علامت ( _ ) شروع شوند ، در مرورگر نشان داده نخواهند شد .
اگر می خواهید کاری کنید تا فایل های قالب که به تنهایی کامل نبوده و خروجی صحیح
ندارند ، امکان نمایش در مرورگر را نداشته باشند ، نام آنها را با علامت ( _ ) شروع
کنید . مثل نام های زیر:
|
مثال
|
_header.cshtm
_footer.cshtml
_Layout.cshtml
|
مخفی کردن اطلاعات حساس :
در ASP.Net ، یکی از راه های رایج برای
مخفی نمودن اطلاعات حساس از دسترس سایرین ( مثل رمز عبور پایگاه داده ، ایمیل ها یا
اطلاعات کاربری و ... ) ، قرار دادن آنها در یک فایل جدا به نام " _AppStart " به
صورت زیر است :
|
مثال
|
@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "username@example.com";
WebMail.Password = "your-password";
WebMail.From = "your-name-here@example.com";
}
|