מדריך ASP.NET MVC – תצוגה חלקית

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

לדוגמא, תאר לך מצב שבו אנו מעוניינים לחזור על אותו HTML כמה פעמים בתצוגות שונות ואפילו כמה פעמים באותה תצוגה. בדוגמא שלנו, אנו מעוניינים שחלק מן התצוגות יציגו תפריט של אפשרויות. התפריט צריך להשתנות בהתאם למודל אליו התצוגה מחוברת. לדוגמא, כאשר הקבוצה הנוכחית שמוצגת למשתמש הינה הקבוצה הראשית אזי אין טעם להציג למשתמש את האפשרות של "Back to parent". אפשרות זו צריכה להיות גלויה רק כאשר האובייקט המוצג הינו קבוצה לא ראשית או פרטי איש קשר.

ASP.NET MVC מאפשר לבצע Encapsulation של HTML לכדי קובץ תצוגה מסודר אשר ניתן לשימוש חוזר בתצוגות אחרות. תצוגה שכזו נקראת Partial View וניתן לייצר אותה באופן דומה לתצוגות רגילות (מלאות).

עמוד על הספרייה Views\Group ובחר באמצעות העכבר את האפשרות …Add | View
בחלון שנפתח בחר את האפשרויות הבאות:

לחיצה על מקש Add תייצר קובץ חדש בשם Menu.cshtml. ערוך את הקובץ באופן הבא:

@model AddressBook.Models.Group
 
<div class="menu">
    @if (this.Model.Parent != null)
    {
        @Html.ActionLink("Back to parent", "Index", "Group", 
            new { id = this.Model.Parent.ID }, null);
    }
    
    @Html.ActionLink("New group", "Create", "Group", 
        new { parentId = this.Model.ID }, null)
 
    @Html.ActionLink("New person", "Create", "Person", 
        new { parentId = this.Model.ID }, null)
    
    <hr />
</div>

שים לב כי הקוד נראה דומה מאוד לתצוגה רגילה ומשתמש גם הוא במילה השמורה model@. ההבדל בין Partial View לתצוגה מלאה הוא בכך שלרוב אנחנו נשתמש ב-Partial View בתצוגות אחרות ולא ישירות מתוך ה-Controller

פתח את הקובץ Views\Group\Index.cshtml וערוך אותו באופן הבא:

@model AddressBook.Models.Group
           
@using AddressBook.Models;
 
<div class="itemTitle">
    ...
</div>
 
@{Html.RenderPartial("Menu", this.Model);}
 
<div class="items">
    ...
</div>

שים לב לשימוש בפונקציה Html.RenderPartial. פונקציה זו כותבת ישירות לתוך ה-Response Stream את התוכן של התצוגה החלקית “menu”. מאחר והפונקציה איננה מחזירה string אלא כותבת ישירות ל-Response Stream יש להשתמש ב-Razor Syntax מהסוג }@ ולא @ בלבד. בנוסף, הפונקציה מקבלת כפרמטר את שם ה-Partial View אשר יש להציג וכן את אובייקט המודל בו יש להשתמש.

למעשה, אין הבדל מבחינת ממשק המשתמש בין הגרסא הנוכחית לקודמת, ועדיין הצלחנו בעזרת Partial View לייצר HTML המאוכסן בקובץ נפרד ולהשתמש בו מתוך תצוגה אחרת. טכניקה זו עוזרת מאוד בהתמודדות עם HTML ארוך ומורכב.

בפרק זה למדנו כיצד ניתן לייצר תצוגה חלקית וכיצד להשתמש בה בתצוגות מלאות אחרות. בפרק הבא נמשיך ונשפר את המראה של התוכנית שלנו הפעם בעזרת שילוב של הוראות CSS.