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

מדריך ASP.NET MVC – היכרות עם WebGrid

ori_calvo ,‏ מכללת הי טק‏ ‏/‏ 31 מרץ, 2011
F+
F-

WebGrid הינה Helper Function המהוה חלק מספרית העזר WebPages הכלולה ב-namespace System.Web.Helpers.

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

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

להוספת WebGrid חדש פתח את הקובץ Views/Person/Index.cshtml והוסף את הקוד הבא בתחתית התצוגה:

<div class="addresses">
    @{
        WebGrid grid = new WebGrid(
source: this.Model.Addresses);
       
        @: @grid.GetHtml(
tableStyle: "grid",
columns: grid.Columns(
grid.Column("Value", "Address",
style: "columnAddress"),
grid.Column("Description", "Description",
style: "columnDescription")))
    }
</div
>

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

הרץ את התוכנית ובחן את התצוגה המעודכנת:

image

כאשר משתמשים ב-WebGrid איננו מוגבלים רק לעמודות מסוג טקסט אלא ניתן לשנות את התוכן של עמודה מסוימת לכל תוכן HTML אשר נבחר. פתח שוב את הקובץ Views/Person/Index.cshtml ועדכן את הקוד הבא:

<div class="addresses">
@{
  WebGrid grid = new WebGrid(source: this.Model.Addresses);

  @: @grid.GetHtml(
        tableStyle: "grid",
        columns: grid.Columns(
           grid.Column("Value", "Address", style:
"columnAddress"),
           grid.Column("Description", "Description",
style: "columnDescription"),
           grid.Column(null, null, style: "columnActions",
                        format:
                          @<text>
                             @Html.ActionLink(
                                "Delete",
                                "ConfirmDeleteAddress",
                                "Person",
                                new { id = item.ID },
                                null)
                          </text>)
        ))
    }

</div
>

שים לב כיצד הקוד מוסיף עמודה חדשה על העמודות הקודמות. הפעם, העמודה החדשה היא ללא כותרת וכן איננה משויכת לתכונה באובייקט Address (שני הפרמטרים הראשונים מסוג null). עם זאת, הקוד עושה שימוש בפרמטר format אשר דרכו ניתן לקבוע את התוכן ה-HTML-י אשר יוצג תחת העמודה המדוברת. שים לב לשימוש בתגית <text> אשר מכילה את ה-HTML הרצוי לעמודה. תחת התגית <text> אנו יכולים לכתוב כל קוד CSHTML תיקני ולהשתמש בפרמטר item על מנת לגשת לאובייקט אותו אנו מציגים כרגע.

הרץ את הקוד ובחן את התצוגה/התנהגות החדשה:

image

המימוש של WebGrid איננו מגיע עם CSS מותאם מראש ולכן יש לבנות אותו באופן ידני. פתח את הקובץ Content/Site.css ובחן את ה-CSS אשר משפיע על התצוגה של ה-WebGrid:

.grid
{
    border-collapse: collapse;
}

.grid th
{
    text-align: left;
}

.grid thead
{
    background-color: rgb(200,200,200);
}

.grid th a
{
    color: Green;
}

.grid .columnAddress
{
    width: 200px;
}
...

בפרק זה למדנו כיצד ניתן להשתמש בשירות WebGrid על מנת לייצר טבלאות בקלות.

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

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

תגובות למאמר



עוד במדריך

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

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