מדריך ASP.NET MVC

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

‏ • Hi Tech

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 על מנת לייצר טבלאות בקלות.

תגיות: , , , ,

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

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!