מדריך CSHTML – עבודה עם נתונים: הצגת מידע עם WebGrid Helper

ליאור זמיר ‏ • John Bryce

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

צור קובץ CSHTML חדש בשם ListProducts_WebGrid.cshtml.

החלף את קוד ה-HTML הקיים בקוד הבא:

@{ 
    var db = Database.OpenFile("SmallBakery.sdf");
    var selectQueryString = "SELECT * FROM Products ORDER BY Id";
    var data = db.Query(selectQueryString);
    var grid = new WebGrid(data);
}
<html>
    <head>
        <title>Displaying Data Using WebGrid </title>
    </head>
    <body>
    
    <h1>Small Bakery Products</h1>
    
    @grid.GetHtml()
</html>

בדף הנ"ל אנו מבצעים שליפה של נתונים לפי משפט SELECT לתוך משתנה בשם data. בעזרת ה- data שקיבלנו בחזרה מהשאילתה, נעטוף ב- WebGrid ע"י הפקודה:

var grid = new WebGrid(data);

בחלק ה- HTML, במקום ליצור טבלת נתונים בעצמנו, נציג את ה- Grid ע"י שימוש בפקודה:

@grid.GetHtml()

הרץ את הדף וראה את טבלת המוצרים המכילה את המידע מבסיס הנתונים.
במידה ובסיס הנתונים ישנן מספר גדול של מוצרים, נרצה להציגן בקבוצות, למשל בגודל 5 מוצרים בקבוצה, לפי מיון כלשהו (שם הפריט).
באיזור הקוד של הדף, הוסיף את ההגדרות הבאות לשורת יצירת ה- WebGrid:
```
var grid = new WebGrid(data, defaultSort: "Name", rowsPerPage: 5);
```
הגדרות אלו יגרמו לרשימת להציג רק 5 מוצרים בכל קבוצה, במיון לפי השדה Name. הרץ את הדף וראה את טבלת המוצרים המכילה את המידע מבסיס הנתונים בחלוקה לקבוצות ובמיון המתאים.
WebGrid מאפשר לנו גם לשלוט על אילו עמודות נרצה להציג, באיזה סדר ובאיזה פורמט. לדוגמא, נרצה לקבוע שתיאור המוצר יהיה בכתב נטוי וליד מחיר המוצר יוצר הסימן $.

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

@grid.GetHtml(
        columns: grid.Columns(
            grid.Column("Name", "Product"),
            grid.Column("Description", format:@@item.Description),
            grid.Column("Price", format:@[email protected])
        )
    )

WebGrid מאפשר לנו לשלוט גם בסגנונות העיצוביים של האלמנטים בטבלה. בחלק ה- HTML של הדף, הוסף את הגדרת ה- Style הבאה מתחת לתגית ה- title:

<head>
    <title>Displaying Data Using WebGrid </title>
    <style type="text/css">
         h1 {font-size: 14px;}
        .grid { margin: 4px; border-collapse: collapse; width: 600px; }
        .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
        .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
        .alt { background-color: #E8E8E8; color: #000; }
        .product { width: 200px; }
    </style>
</head>

באיזור הקוד של הדף, הוסיף את ההגדרות הבאות לשורת יצירת ה- WebGrid:

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Name", "Product", style: "product"),
        grid.Column("Description", format:@@item.Description),
        grid.Column("Price", format:@[email protected])
    )
)

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

לחץ להגדלה

תגיות: ASP.Net, CSHTML

מדריך CSHTML

מדריך CSHTML – עבודה עם נתונים: הצגת מידע עם WebGrid Helper

עוד בנושא זה

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

תגיות