וובמאסטר - תיכנות ובניית אתרים

מדריך ASP.NET MVC – עבודה עם CSHTML

ori_calvo ,‏ מכללת הי טק‏ ‏/‏ 10 פברואר, 2011
F+
F-

בפרק הקודם ראינו כיצד ניתן להגדיר View חדש ולהשתמש בו מתוך ה-Controller. ראינו ש-ASP.NET MVC מגדיר Syntax מיוחד הקרוי Razor ובעזרתו ניתן לשלב קוד ו-HTML באותו קובץ.
בעבודה השוטפת עם Razor נתקלים בכמה שגיאות שכיחות אותן ניתן לפתור בקלות ע"י הבנה טובה יותר של היכולות של Razor. בפרק זה אנו נלמד כיצד מנוע התצוגה של ASP.NET MVC מפענח את קובץ ה-CSHTML וכיצד אנו בתור מפתחים יכולים לשנות את התנהגות ברירת המחדל שלו.

איך לשלב קוד 1 – ברירת המחדל בתוך קובץ ה-CSHTML הינה HTML. לכן אם נרשום בתוך הקובץ את התוכן המופיע מטה, המנוע של Razor יתייחס אל התוכן הזה כאל HTML ולא קוד.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

Html.ActionLink("Click Me", "Index")

עבור הקוד מעלה מתקבל ה-HTML הבא:

image

על מנת שהתוכן יובן כקוד יש להשתמש בתו המיוחד “@”:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@Html.ActionLink("Click Me", "Index")

 

image

 

איך לשלב קוד 2 – אם ברצוננו לרשום יותר מאשר שורת קוד אחת ניתן להשתמש ב- }@. שילוב זה מודיע למנוע התצוגה כי התוכן שבא לאחריו הינו קוד ולא HTML. את הקוד יש לסגור בעזרת התו {

@{
  int num = 10;
  for (int i = 0; i < num; i++)
  {
  }
}



איך לשלב קוד 3
– בדוגמא מעלה אם ברצוננו להשפיע על התצוגה בתוך גוף הלולאה עלינו להשתמש בתגית המיוחדת <text>. תגית זאת מודיעה למנוע התצוגה כי התוכן הינו HTML ולא קוד.

@{
    int num = 10;
    for (int i = 0; i < num; i++)
    {
        <text>hello</text>
    }
}

עבור הקוד מעלה יתקבל הפלט הבא:

image

לחילופין אפשר להשתמש בשילוב ":@" על מנת לציין התחלה של HTML. הקוד הבא מייצר את אותו פלט כמו הדוגמא הקודמת

@{
    int num = 10;
    for (int i = 0; i < num; i++)
    {
        @: hello
    }
}



איך לשלב קוד 4
– במקרים בהם נדרש לשתול בתוך ה-HTML תוכן הבנוי על סמך כמה תכונות של הקוד ניתן להשתמש בשילוב: ")@". לדוגמא הקוד הבא,

@{
    Group g = new Group() { ID = 123, Name = "Friends" };
   
    <p>
        @g.Name + @g.ID
    </p>
}

מייצר את ה-HTML הבא:

image

שימוש ב-")@" מייצר את ה-HTML ה"נכון":

@{
    Group g = new Group() { ID = 123, Name = "Friends" };
   
    <p>
        @(g.Name + g.ID)
    </p>
}

 

image

 

איך לשלב קוד 5 – ניתן להשתמש בשילוב "@*" וב-"*@" על מנת לייצר הערות בקובץ ה-CSHTML. הערות אלו "נמחקות" ע"י מנוע התצוגה ואינן חלק מה-HTML שמוחזר ל-Browser

@{
    Group g = new Group() { ID = 123, Name = "Friends" };
}   

@*
 
<p>
    @(g.Name + g.ID)
</p>

*@



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

@{
    Group g = new Group() { ID = 123, Name =
"<script type='text/javascript'>alert('hello');</script>" };
}   

<p>
    @g.Name
</p
>

יתקבל ה-HTML הבא:

image

על מנת שהמנוע לא יבצע HTML Encoding יש להשתמש בפונקציה Html.Raw

@{
    Group g = new Group() { ID = 123, Name =
"<script type='text/javascript'>alert('hello');</script>" };
}   

<p>
    @Html.Raw(g.Name)
</p
>

עבור הקוד מעלה נקבל את ההתנהגות הבאה:

Untitled

 

 

בפרק זה למדנו איך ניתן להשפיע על מנוע התצוגה הקרוי Razor ולגרום לו לבצע את הדבר ה”נכון”. בעבודה היום יומית מגלים כי לרוב Razor עושה מראש את הדבר הנכון והתו מיוחד "@" משמש אותנו כדי לעבור מ-HTML לקוד. באותם מקרים לא שכיחים המוזכרים מעלה ניתן להשתמש ביכולות יותר מיוחדות של המנוע כמו: ":@", ")@", "}@" ו-Html.Raw על מנת להשיג את ההתנהגות הרצויה.

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

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

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות