آموزش ASP.Net به زبان ساده > آموزش مدل صفحات وب WP
> قالب بندی صفحات وب در 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";
}
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :