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

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

ליאור זמיר ,‏ ג'ון ברייס הדרכה‏ ‏/‏ 6 יולי, 2010
F+
F-
עד עכשיו ראינו איך להציג מידע על גבי דף, ולצורך כך יצרנו את טבלת ה- HTML בעצמנו. ישנה דרך קלה יותר והיא להשתמש ב- WebGrid שיוצר עבורנו טבלת HTML המציגה מידע ותומכת במספר אפשרויות לפורמט, מאפשרת לדפדף בין עמודי מידע ומיון לפי העמודות בטבלה.
  1. צור קובץ CSHTML חדש בשם ListProducts_WebGrid.cshtml.

  2. החלף את קוד ה-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()
    


  3. הרץ את הדף וראה את טבלת המוצרים המכילה את המידע מבסיס הנתונים.

    במידה ובסיס הנתונים ישנן מספר גדול של מוצרים, נרצה להציגן בקבוצות, למשל בגודל 5 מוצרים בקבוצה, לפי מיון כלשהו (שם הפריט).

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

    var grid = new WebGrid(data, defaultSort: "Name", rowsPerPage: 5);
    


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

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

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

    @grid.GetHtml(
            columns: grid.Columns(
                grid.Column("Name", "Product"),
                grid.Column("Description", format:@@item.Description),
                grid.Column("Price", format:@$@item.Price)
            )
        )
    


  7. 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>
    


  8. באיזור הקוד של הדף, הוסיף את ההגדרות הבאות לשורת יצירת ה- 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:@$@item.Price)
        )
    )
    

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

    לחץ להגדלה

ליאור זמיר, ג'ון ברייס הדרכה

כיום אני ה- Webmaster של תוכנית החדשנות של HPE Software.
לפני כן, הייתי מנהל תחום Webmaster ומרצה בכיר בג'ון-ברייס (במשך 9 שנים) בקורסים לפיתוח ותיכנות באמצעות Microsoft .NET, מולטימדיה, בניית אתרי אינטרנט ואינטראנט. פיתוח הדרכה ומתן ייעוץ טכנולוגי.
תגיות: ASP.NET‏  /  CSHTML‏  

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

תגובות למאמר



עוד במדריך

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

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