آموزش ASP.Net به زبان ساده     >     آموزش مدل صفحات وب WP     >     قالب بندی صفحات وب در WP ( Page Layout )

مقدمه :

با استفاده از روش طراحی صفحات وب WP در ASP.Net ، طراحی صفحات با ظاهر و قالب مشترک بسیار ساده و سریع خواهد بود . حتما تا کنون با سایت ها و صفحات اینترنتی زیادی برخورد کرده اید که همه دارای ظاهر و قالب یکسانی هستند ، یا به عبارت دیگر :

  1. تمامی صفحات دارای هدر ( header ) و فوتر ( footer ) یکسان و مشابه هستند .
  2. همچنین تمامی صفحات دارای قالب و نمایه کلی یکسان و شبیه می باشند .

دقیقا همانند چیزی که در سایت خود ما ملاحظه می کنید . تمامی صفحات دارای قالب یکسانی بوده و فقط محتوای آموزشی هر صفحه تغییر می کند .
انجام چنین کاری با روش 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 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1