מדריך ASP.NET MVC – הגדרות פריסה

ori_calvo ‏ • Hi Tech

בעיה קלאסית בפיתוח אפליקציה WEB-ית היא השיתוף של קטעי HTML בין תצוגות שונות. לרוב, יש חלקים מסוימים כמו ה-Header וה-Footer אשר חוזרים על עצמם. בפרק זה נלמד כיצד ליצור מראה אחיד לכל התצוגות בתוכנית מבלי לפגוע בשוני של כל תצוגה.

להורדת הקוד של הפרק הקודם לחץ כאן

פתח את הקובץ Shared\_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
 
    ...
</head>
 
<body>
    @RenderBody()
</body>
</html>

קובץ זה מגדיר את המראה הכללי של האתר. שים לב כי זהו קובץ ה- CSHTML היחיד בפרויקט אשר מכיל תגיות HEAD ו-BODY. אם נתבונן בתצוגה אחרת בתוכנית לדוגמא: Views\Group\Index.cshtml

@model AddressBook.Models.Group
           
@using AddressBook.Models;
 
<div class="itemTitle">
    Current group: @this.Model.Description
</div>
 
<div class="menu">    
    ...
</div>
 
<div class="items">
    ...
</div>

נגלה כי תצוגה זו איננה מגדירה את תגיות ה-BODY וה-HEAD.

למעשה כל תצוגה בתוכנית למעט Layout.cshtml_ מייבאת באופן אוטומטי את ה-HTML מתוך Layout.cshtml_ ומחדירה במקום הקריאה לפונקציה RenderBody את התוכן ה-HTML המוגדר בתוכה. הרצת התוכנית ובחינת ה-HTML בצד ה-Browser מראה כיצד שתי התצוגות מתחברות לכדי HTML שלם:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    ...

</head>
 
<body>

<div class="groupTitle">
    ...
</div>
 
<div class="menu">
    ...
</div>
 
<div class="item">
    ...
</div>
 
<div class="item">
    ...
</div> 
</body>
</html>

החלק המסומן בירוק הוא תוצאה של התצוגה Index.cshtml והחלק המסומן באפור הינו תוצאה של התצוגה Layout.cshtml_

פתח את הקובץ Views\Shared\_Layout.cshtml והוסף header ו-footer:

<body>
    <div class="header">
        Address Book
        <hr />
    </div>
 
    @RenderBody()
 
    <div class="footer">
        <hr />
        Address Book
    </div>
</body>

הרץ את התוכנית ובחן את התצוגות השונות. שים לב כיצד כולן "נהנות" מה-HTML שהגדרת בקובץ ה-layout

וכן,

במקרים מסוימים אנו מעוניינים לאפשר לתצוגות השונות להחדיר HTML נוסף מעבר ל-RenderBody בתוך HTML המסגרת. לדוגמא, נניח שהתצוגה Views\Group\Create.cshtml מעוניינת להשתמש בקוד JavaScript על מנת למקם את סמן העריכה על תיבת הטקסט Name.

כידוע קישור לקובץ JavaScript רצוי שיישב בתוך תגית ה-Head. הבעיה היא שלתצוגה Create אין גישה לתגית זו (היא מוגדרת בקובץ ה-Layout). על מנת לפתור את הבעיה פתח את קובץ ה-Layout והוסף Section חדש תחת תגית ה-head:

<head>
	...
 
	@RenderSection("head", false)
</head>

פתח עכשיו את קובץ התצוגה Views\Group\Create.cshtml והוסף התייחסות ל-Section החדש שזה עתה הגדרנו:

@section head
{
}

צור את הקובץ Scripts/Group/Create.js:

/// <reference path="../jquery-1.4.4-vsdoc.js" />
 
jQuery(document).ready(function ()
{
  jQuery("#Name").focus().select();
});

הקוד משתמש בפונקציות העזר של jQuery. אנו נדבר על jQuery בהרחבה בהמשך המדריך. בינתיים פשוט העתק את הקוד לתוך הקובץ. חזור לקובץ התצוגה וגרור את הקובץ Create.js מתוך ה-Solution Explorer אל תוך קובץ התצוגה כך שייוצר הקוד הבא:

@section head
{
    <script src="../../Scripts/Group/Create.js" 
            type="text/javascript"></script>
}

הרץ את התוכנית ובחן את תצוגת ה-Create. שים לב כיצד סמן העריכה נמצא על תיבת הטקסט Name:

בפרק זה למדנו כיצד ניתן לעדכן את תצוגת הפריסה של התוכנית וליצור בתוכה Sections חדשים אשר מאפשרים לתצוגות האחרות ל"החדיר" HTML משלהם לתוך ה-HTML הראשי. בפרק הבא נלמד על עוד טכניקה המאפשרת לשתף HTML זהה בין תצוגות שונות.

תגיות: .net, ASP.NET MVC, מדריך, פיתוח, צד שרת

מדריך ASP.NET MVC

מדריך ASP.NET MVC – הגדרות פריסה

עוד בנושא זה

תגובות בפייסבוק

תגיות