מדריך CSHTML

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

‏ • John Bryce

עד עכשיו ראינו איך להציג מידע על גבי דף, ולצורך כך יצרנו את טבלת ה- 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, מולטימדיה, בניית אתרי אינטרנט ואינטראנט. פיתוח הדרכה ומתן ייעוץ טכנולוגי.

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