שימוש בתצוגות Razor ב Asp.net Mvc עבור דינמי Web Page Rendering

מבוא ל-Rar Views in ASP.NET MVC

ASP.NET MVC נשאר אבן הפינה של פיתוח אינטרנט על ערימה של Microsoft, המציע הפרדה נקייה של חששות ושליטה על תגובות HTTP. בלב מנוע הראייה שלה הוא Razor, סינטקס רב עוצמה המאפשר לך לערבב C# עם HTML חלקה מצגות (מסומנים עם ההרחבה FLT:0) הם הדרך סטנדרטית לייצר תוכן דינמי ב גירסאות של גירסאות של גירסאות של גירסאות אינטרנטיות.

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

מה הם תצוגות רזטור?

(הופנה מהדף סיגנר (Rice-side תבניות) המשלבות את הסימון HTML עם קוד C# מוטבע כאשר משתמש מבקש כתובת URL, צינור MVC מעבור את הבקשה לפעולה בקר.פעולה זו בדרך כלל מחזירה את ה-FLT:1 על ידי קורא FLT:2 המסגרת לאחר מכן לאתר את קובץ ה-FLT 3: 3 המתאים, מבצעת את קוד רזטור לייצור HTML, ושולחת אותו לדפדפנים של הלקוח.

היתרון העיקרי הוא כי Razor מאגד השקפות בכיתות .NET בריצה או זמן (בהתאם לתצורה של הפרויקט), המאפשר לך להשתמש במלוא העוצמה של .NET לרוץ זמן, כולל לולאות, מצבים, ביטויים מורכבים ואפילו טיפול יוצא דופן, ישירות בתוך הסימון שלך.

לדוגמה, מראה רייזר פשוט עשוי להיראות כך:

@{
 ViewBag.Title = "Home Page";
}

<h1>Welcome to @ViewBag.Title</h1>
<p>The current server time is @DateTime.Now.ToLongTimeString().</p>

כל מה שקודם ב-C#5 , הוא המעבר מ-HTML ל-C#.האופי 6 של ה-FLT הוא הליבה של מסכי רזאור, והמנוע חכם מספיק כדי להסיק היכן מסתיים קוד C# ו-HTML קורות חיים, אפילו בחללים, הורישים, או גבולות תגים.

Razor Syntax Dive

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

המונחים:

הצורה הפשוטה ביותר היא ביטוי קוינלי, שבו יחיד FLT 7 ואחריו ביטוי C# תפוקה התוצאה כטקסט.

<p>Your account balance is @balance.ToString("C2")</p>

אם הביטוי חוזר ל-(FLT:9 או יישם את ה-HTML:10), Razor לא יקוד את הפלט. עבור כל הסוגים האחרים, Razor באופן אוטומטי HTML-encode את הערך כדי למנוע צלקות בין-אתר (XSS).

קוד חסימות

שימוש ב-FLT:11 ואחריו זוג חזיות מחוספסות כדי לכתוב בלוקים מרובים של C#:

@{
 var greeting = "Hello";
 var name = "World";
 var message = greeting + ", " + name + "!";
}
<p>@message</p>

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

מבנה בקרה

(ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

@if (Model.IsAuthenticated)
{
 <span>Welcome back, @Model.UserName!</span>
}
else
{
 <a href="/Account/Login">Log in</a>
}

באופן דומה, לולאות משתלבות באופן טבעי:

<ul>
@foreach (var item in Model.Items)
{
 <li>@item.Name (@item.Price.ToString("C"))</li>
}
</ul>

הערה: (הפסקה:23) נדרש רק על מילת המפתח הפתוחה.ה ⁇ הסגירה היא פשוטה C# ו Razor נכון לחדש HTML בעת מפגש עם תג ה-FLT:24.

הערות

Razor מספק את ה-Syntax של תגובה משלה, המדביק תוכן מה-HTML שהפך לחלוטין:

@* This is a Razor comment. It will not appear in the output. *@

הערות HTML (ראהFLT:26) עדיין נשלחות לדפדפן והם גלויים במקור. השתמש הערות Razor עבור הערות מפתח הערות או כדי לחסום קוד באופן זמני.

דמויות מיוחדות

כדי להציג את הסמל של ה-FLT:27, השתמש ב- 28 לכתובות דואר אלקטרוני, רזור מזהה אותם באופן אוטומטי ואינו דורש בריחה.

תצוגות חזקות ומודל Binding

אחד הדפוסים החזקים ביותר ב-ASP.NET MVC משתמש בדעות מטיפוסיות מאוד במקום להסתמך על FLT:30 או FLT:31, אתה מצהיר על סוג המודל בחלק העליון של הנוף באמצעות הוראות FLT:32 (lowercase "m") זה נותן לך פיטורים ובדיקת תמיכה בתכונות של המודל.

@model IEnumerable<Product>

<h2>Product List</h2>
<table class="table">
 <thead>
 <tr>
 <th>Name</th>
 <th>Price</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var product in Model)
 {
 <tr>
 <td>@product.Name</td>
 <td>@product.Price.ToString("C")</td>
 </tr>
 }
 </tbody>
</table>

הבקר עובר את המודל באמצעות שיטת ה-FLT:34

public ActionResult Products()
{
 var products = db.Products.ToList();
 return View(products);
}

השקפות רבות-טיפוסיות גם מפשטות את ההגשה עם מודלים מחייבים.כאשר טופס פורסם, מסגרת MVC ממפה באופן אוטומטי בקשה נתונים לנכסים של פרמטר המודל בפעולה, בתנאי שמות קלט מתאימים לשמות הרכוש של המודל.

ViewBag, Viewdata ו-Tempdata

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

(ב) ,0) ,ראה: "החפץ הדינמי שמאפשר לך להגדיר תכונות שרירותיות.הוא מהווה עטוף מעל ל-FLT:36 דוגמה: FLT:37 גישה אליו בנוף עם FLT:38"
(ב) [15] ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
(FLT:0) TERFLT:1 דומה ל- ViewData, אך הוא נמשך מעבר ל-Switch יחיד.It מאוחסן בישיבה ו-הבהרנו לאחר קריאה.

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

המונחים: ViewStart

לייפוס לתת את היישום שלך מראה עקבי ותחושה על ידי הגדרת דף מאסטר משותף.A הפריסה היא קובץ (FLT:41 המכיל את המבנה החיצוני של דף (ראש, ניווט, רגל) ו-FLT:42 קורא היכן התוכן של תצוגות בודדות מוכנס.

לדוגמה, נראה כמו:

<!DOCTYPE html>
<html>
<head>
 <title>@ViewBag.Title - My App</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 <nav>...</nav>
 <main>
 @RenderBody()
 </main>
 <footer>...</footer>
 @Scripts.Render("~/bundles/js")
 @RenderSection("Scripts", required: false)
</body>
</html>

השקפות בודדות יכולות לציין איזו פריסה לשימוש.במוסכמות, קובץ ה-FLT:45 בתיקיה (FLT:46) קובע את הפריסה ברירת המחדל עבור כל ההשקפות בתיקיה זו:

@{
 Layout = "~/Views/Shared/_Layout.cshtml";
}

ניתן להתגבר על הפריסה בכל נקודת מבט ספציפית על ידי חתימה מחדש של הנכס (FLT:48 ).זה שימושי במיוחד עבור דפים שזקוקים לפרסה שונה לחלוטין, כגון דפי כניסה או דפי שגיאה.

תצוגות וצפייה ב-Commonents

(הדעות החלקיות הן שברים ניתנים לחזרה של UI שניתן להטמיע בתוך השקפות אחרות; הן מועילות במיוחד לצורות מורכבות, פריטים ברשימה או כל מרכיב שמופיע במקומות רבים.כדי ליצור תצוגה חלקית, פשוט ליצור קובץ FLT:49 בשם באופן קונבנציונלי עם דגש מוביל (למשל, FLT:50).

(ב) עיין ב[[1924]] ב[[1924]]

@Html.Partial("_ProductCard", item)

ההבדל הוא ש-FLT:54 מחזיר מחרוזת HTML, בעוד ש-FLT:55 כותב ישירות לזרם התגובה (מהיר באופן בהיר לחלקיקים גדולים, אך לא ניתן להשתמש בו בתוך בלוק קוד).

עבור רכיבים מורכבים יותר, לוגיקה-כבדים (כמו סיכום עגלת קניות הדורש גישה למסד נתונים), לשקול (0View ComponentsssssssureFLT:1 ). . View Components הם שיעורים מלאים עם שיטת Invoke / InvokeAsync שלהם, המאפשר הזרקת שירותים ועיבוד מורכב.

public class CartSummaryViewComponent : ViewComponent
{
 public async Task<IViewComponentResult> InvokeAsync()
 {
 var cart = await GetCartAsync();
 return View(cart);
 }
}

מתוך תפיסה זו, [[1924]]

סעיפים ו-RenderSection

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

@section Scripts {
 <script src="~/Scripts/page-specific.js"></script>
}

אם סעיף מוגדר כנדרש (ראה:60) כל ראיה המשתמשת בפריסה חייבת להגדיר אותו, או יוצא מן הכלל ישלח. השתמש בסעיפים הנדרשים עבור פריטים שהם יסודיים לדף, כגון אזור כותרת או תוכן מרכזי.

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

עזור HTML לעומת להקות

תצוגות רזאור מציעות שתי משפחות של כלי שרת ליצירת HTML: עוזרים ב-HTML ו-Ta Helpers.

(ב) ויקרא (ב) ויקרא (ב) ויקרא (ב) ויקרא (במדבר כ"ד): ויקרא (ב) ויקרא ויקרא י"ד) ו[[1924]], ו[[1924]]]]]]
(FLT:0) HelpersigFLT:1 הוצגו ב-ASP.NET Core אבל זמינים גם ב- ASP.NET MVC 5.x באמצעות חבילת NuGet (IRLT:64) הם מאפשרים לך לכתוב תגים דמויי HTML כי התהליכים, למשל, FLT:65 טאפר הם יותר טבעיים עבור end ותאפשר לך לכתוב תגים תואמים ושילוב תקפים.

לדוגמה, יצירת טופס עם עוזרי טאג נראית כמו:

<form asp-action="Submit" asp-controller="Home" method="post">
 <label asp-for="Email"></label>
 <input asp-for="Email" />
 <span asp-validation-for="Email"></span>
 <button type="submit">Submit</button>
</form>

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

אימות וטעמה

תצוגות רזאור פועלות בשיתוף מערכת אימות ב-ASP.NET MVC.You יכול להציג שגיאות אימות ברמת המודל ונכסים באמצעות עזרה ב-HTML או טאג Helpers.TheFLT:67 מציגות את כל השגיאות בבת אחת, ו-FLT:68 מראה שגיאות עבור שדה ספציפי.

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

כאשר אתה משתמש ב-Ta Helpers, אורך אימות מותווסף באופן אוטומטי ומאוכלס במהלך מודל המחייב אם אימות נכשל.סימן אימות זה של הלקוח בצד השני נוצר באמצעות סטיות נתונים על המודל שלך, כגון FLT:70, FLT:71 ו-FLT:72.

כדי לאפשר אימות של לקוח שאינו אובססיבי, יש לוודא כי ספריות JavaScript ההכרחיות (FLT:73 ו-FLT:74) כלולות בפריסת שלך, בדרך כלל בסעיף 75.

Razer with AJAX ו- Partial Rendering

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

public ActionResult ProductDetails(int id)
{
 var product = db.Products.Find(id);
 if (product == null) return HttpNotFound();
 return PartialView("_ProductDetails", product);
}

בצד הלקוח, השתמש ב-JQuery או ב-FLT:77 עוזר לטעון את התוצאה החלקית למכל:

@Ajax.ActionLink("View Details", "ProductDetails", new { id = item.Id },
 new AjaxOptions { UpdateTargetId = "detailsContainer" })

עליך לכלול את התסריט של ה-67:79 (המדריך ל-FLT:80) עוזרי העבודה. לחלופין, באפשרותך לכתוב ג'קוריפל:81 קורא לזה עדכונים באופן ידני את המכל.

המונחים: Razor Views

למרות שהשקפות רזאור מופרשות, עדיין יש מלכודות ביצועים להימנע:

(FLT:0) ללא לוגיקה מוגזמת בהשקפות.FLT:1 שמור על השקפות פשוטות ככל האפשר; להעביר חישובים מורכבים, שינויים בנתונים, וכללי עסקים לבקר, שכבת השירות או מודל ראייתי.
(ב) [ה]] ב[[1924]], [[1924]]]], [[1924]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]], [[1924]]]]]]]]]]]]]]
(ב) [13] כפליים מספר ההשקפות החלקיות שניתנו ל-Pages.FLT 1:1 כל אחת (FLT:86 Call מוסיפה מעל פני השטח.If a Part is Usedפעמים רבות בלולאה, לשקול בניית ה-HTML בבקר באמצעות סטרלינגר או גנרטור HTML מותאם אישית.
(ב) [ה]ה]: [ה], [ה], [ה], [ה], אם תפישתך תלויה בנתונים הכוללים שאילתות מסד נתונים או שיחות API חיצוניות, תגדיר את פעולת הבקר כ-FLT:87 ותקרא ל-FLT:88 לפני שעבר את המודל.
(ב) ב[[1924]], [[1924]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]], [[1924]]]]]]]]]], [[1924]]]]]]]], [[1924]]]]]]]]]]]]]], [[1924]]]]]]]], [[1924]]]]]], [[1924]]]], [[1924]], [[1924]]]]]]]]]]]]]]]]]]]]]], [[1924]]]]]]]], [[1924]]]]]]]], [[1924]], [[1924]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]

Best Practices for Keepable Razor Views

(FLT:0) תמיד להשתמש במודלים מטיפוסים בחזקה 1FLT) ולהימנע מצפייה ב- ViewBag עבור נתונים עיקריים.זה משפר את בדיקת ה-FLT וקריאה.
(ב) ,0) לאחר שמות מוסכמות: 10 צפיות צריך להתאים שמות של פעולות בקר, וחלקים צריך להיות קידומו עם דגש.
(ב) ,0) להציג את התצוגה והעורך תבניות של העורך 1 (FLT: 1) עבור תצוגות נתונים שניתן לשנותן.
(ב) ,0) ,Separate CSS ו- JavaScriptFLT:1 מהשקפות, לשים רק סגנונות מינימליים; להשתמש ב-Bundling ו- מינוף עבור משאבים חיצוניים.
(FLT:0Write Units for Controllers and View Models.Build.archer) 1:1 בעוד שהשקפות עצמן קשות לבחינה, ודא כי הנתונים עברו אליהן נכונים.
(ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

מסקנה

תצוגות רזאור הן עמוד השדרה של דור HTML דינמי ב-ASP.NET MVC.S.S.S.S.S.S.S.M.S.MVC.S. syntax הנקי שלהם, שילוב חלק עם C#, ותמיכה בטיפות חזקות, פריסות, חלקיות, ו-AJAX, אתה יכול ליצור חוויית משתמש עשירה ללא ביצועים גמישים, כמו שיפור איכות פיתוח, כמו גם פיתוח של פונקציות עבודה.

(ב) לעיין בתיעוד Microsoft הרשמי של FLT:0Razor SyntaxFelo:2Partial ViewsFLT 3:0Razor SyntaxFLT:1, FLT:2 Partial ViewsFLT 3, ו-FLT:4Tag Helpers in ASP.NET CoreFLT:5 (אשר חל גם על MVC 5 עם הפניות מתאימות).