מדריך CSHTML

מדריך CSHTML – עבודה עם נתונים: עדכון מידע בבסיס הנתונים

‏ • John Bryce

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

  1. צור קובץ CSHTML חדש בשם EditProducts.cshtml.
  2. החלף את קוד ה-HTML הקיים בקוד הבא:
    @{    
        var db = Database.OpenFile("SmallBakery.sdf");    
        var selectQueryString = "SELECT * FROM Products ORDER BY Name";
    
    }
    <html>
    <head>
        <title>Edit Products</title>
    </head>
    
    <body>
        <h1>Edit Small Bakery Products</h1>
        <table>
          <thead>
            <tr>
              <th> </th>
              <th>Name</th>
              <th>Description</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            @foreach (var row in db.Query(selectQueryString)) {
              <tr>
                <td><a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>
                <td>@row.Name</td>
                <td>@row.Description</td>
                <td>@row.Price</td>
              </tr>
            }
          </tbody>
        </table>
    </body>
    </html>
    

    במבט ראשון נראה שהדף הזה מכיל את אותו הקוד של הדף המציג את רשימת המוצרים ListProducts.cshtml. ואכן, ההבדל היחיד ביניהם הוא העובדה שטבלת ה- HTML בדף זה כוללת עמודה נוספת אשר מציגה קישור של עריכה (Edit). כאשר לוחצים על קישור זה, הוא לוקח אותנו לדף UpdateProducts.cshtml (אותו ניצור מיד) בו נוכל לעדכן את הרשומה הנבחרת.

    בוא נבחן את הקוד אשר יוצר את הקישור של Edit:

    <td><a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>
    

    פעולה זו יוצרת תגית קישור (האלמנט a) אשר דף היעד אליו יפנה הקישור, המצויין במאפיין href הינו דינאמי. בדוגמא יפנה הקישור לדף UpdateProducts ויעביר לו כפרמטר בשורת הכתובת את מזהה המוצר לעריכה. כאשר הדף רץ, הקוד של הקישורים נראה כך:

    <a href="UpdateProducts/1">Edit</a></td>
    <a href="UpdateProducts/2">Edit</a></td>
    <a href="UpdateProducts/3">Edit</a></td>
    

    נשים לב שהקישור מפנה לכתובת המסתיימת ב- UpdateProducts/n, כאשר n הוא מזהה המוצר. כאשר המשתמש לוחץ על אחד מהקישורים הללו, התוצאה היא שהכתובת תראה בדומה לזה: http://localhost:18816/UpdateProducts/6

  3. הצג את הדף בדפדפן. הדף יציג את המידע בפורמט דומה לאילוסטרציה הבאה:

    לחץ להגדלה

    כעת, ניצור את הדף אשר נותן למשתמשים לעדכן את המידע. דף העדכון כולל בדיקות תקינות, על מנת לוודא שהמידע שהמשתמש הכניס אכן תקין. לדוגמא, הקוד בדף מוודא שהוכנס מידע לכל העמודות הדרושות.

  4. באתר SmallBakery, צור קובץ CSHTML חדש בשם UpdateProducts.cshtml.
  5. החלף את קוד ה- HTML בדף עם הקוד הבא:
    @{
        var db = Database.OpenFile("SmallBakery.sdf");
        var selectQueryString = "SELECT * FROM Products WHERE Id=@0";
    
        var ProductId  = UrlData[0];
        
        if (ProductId.IsEmpty()) 
        {
             Response.Redirect("~/EditProducts");
        } 
        
        var row = db.QuerySingle(selectQueryString, ProductId);
        var Name = row.Name;
        var Description = row.Description;
        var Price = row.Price;
        
        if (IsPost) 
        {
            Name = Request["Name"];
            if (String.IsNullOrEmpty(Name)) 
            {
              Validation.AddFieldError("Name", "Product name is required.");
            }
    
            Description = Request["Description"];
            if (String.IsNullOrEmpty(Description)) 
            {
              Validation.AddFieldError("Description", "Product description is required.");
            }
            
            Price = Request["Price"];
            if (String.IsNullOrEmpty(Price)) 
            {
              Validation.AddFieldError("Price", "Product price is required.");
            }
    
            if(Validation.Success) 
            {
                var updateQueryString = 
                  "UPDATE Products SET Name=@0, Description=@1, Price=@2 WHERE Id=@3" ;
                db.Execute(updateQueryString, Name, Description, Price, ProductId);
                
                Response.Redirect("~/EditProducts"));
            }
        }
    }
       
    <html>
    <head>
        <title>Add Products</title>
    </head>
    
    <body>
        <h1>Update Product</h1>  
        
        @Html.ValidationSummary()
        
        <form method="post" action="" > 
            <fieldset>
                <legend>Update Product</legend>
                <div>
                    <label>Name:</label>
                    <input name="Name" type="text" size="50" value="@Name" />
                </div>
                <div>
                    <label>Description:</label>
                    <input name="Description" type="text" size="50" value="@Description" />
                </div>
                <div>
                    <label>Price:</label>
                    <input name="Price" type="text" size="50" value="@Price" />
                </div>
                <div>
                    <label> </label>
                    <input type="submit" value="Update" class="submit" />
                </div>
            </fieldset>
        </form>
    </body>
    </html>
    

    חלק ה-HTML בדף זה מכיל דברים שכבר ראינו בשלבים קודמים בפרק. הוא מכיל טופס בסיסי לעריכת פרטי המוצר וכפתור Submit לשליחת הפרטים המעודכנים לשרת לצורך עדכון בסיס הנתונים. בנוסף, יש שימוש
    בפקודה Html.ValidationSummary() לצורך הצגת הודעות השגיאה למשתמש במידה ויש כאלו.

    נסביר את בלוק הקוד שבדף במספר חלקים. ראשית, אנו פותחים את קובץ הנתונים לצורך שליפת פרטי המוצר ועדכונו. כיוון שאנו מעוניינים לשלוף נתונים של פריט בודד נשתמש במשפט ה- SQL הבא:

    SELECT * FROM Products WHERE Id=@0
    

    פעולה זו תשלוף את המוצר אשר המזהה הייחודי שלו (השדה ID) מתאים לערך שעבר לפרמטר @0. (מכיוון ש – Id הינו המפתח הראשי – Primary key, ולכן חייב להיות ייחודי, רק רשומת מוצר אחת יכולה להיבחר בדרך זו).

    הזכרנו קודם שכתובת הדף תהיה בפורמט http://www.domain.com/UpdateProducts/n כאשר n הוא מזהה המוצר לעריכה. על מנת לקבל את המזהה מתוך שורת הכתובת ולהעבירו למשפט ה- Select, ניתן לקרוא את הערך שעבר לדף כחלק מה-Url, בשימוש בתחביר הבא:

    var ProductId = UrlData[0];
    

    במידה ולא מצאנו את מזהה המוצר בשורת הכתובת, לא נדע איזה מוצר לשלוף ולעדכן, לכן ננתב את המשתמש לעמוד EditProducts.

    if (ProductId.IsEmpty()) 
    {
      Response.Redirect("~/EditProducts");
    } 
    

    על מנת לשלוף את רשומת המוצר, אנו משתמשים בפעולת ה – QuerySingle אשר מחזירה רק רשומה אחת המתאימה לתנאי החיפוש (ואכן ודאי ששליפה לפי מזהה ייחודי של רשומה תכיל לכל היותר רשומה אחת).

    var row = db.QuerySingle(selectQueryString, ProductId);
    

    השורה היחידה מוחזרת לתוך משתנה ה- row. ניתן לקבל מידע מתוך כל שדה ולהכניס אותו לתוך משתנה מקומי בדרך זו:

    var Name = row.Name;
    var Description = row.Description;
    var Price = row.Price;
    

    לאחר מכן, נבדוק האם אנחנו בפעולת Post ואם כן, נבצע סדרה של בדיקות תקינות לערכים שהוזנו ע"י המשתמש. במידה והנתונים תקינים, נרצה לעדכן את המוצר עם פרטיו החדשים. לשם כך, נשתמש פקודת ה- SQL הבאה לצורך עדכון בסיס הנתונים:

    UPDATE Products SET Name=@0, Description=@1, Price=@2, WHERE ID=@3
    

    בפקודת SQL Update זו, אנו מציינים כל עמודה שאנו רוצים לעדכן ואת הערך שאנו רוצים להכניס לתוכה. בקוד הנ"ל, הערכים מצוינים על-ידי שימוש בממלאי המקום @0,@1,@2 וכן הלאה. (כמו שצוין קודם לכן, למען שמירה על כללי הבטיחות, כדאי תמיד להעביר ערכים למשפט SQL על-ידי שימוש בפרמטרים(.

    כאשר אנו קוראים לפקודה db.Execute, אנו מעבירים את המשתנים אשר מכילים את הערכים לפי הסדר שמתאים לרשימת הפרמטרים במשפט ה–SQL:

    db.Execute(updateQueryString, Name, Description, Price, ProductId);
    

    לאחר שמשפט ה-Update בוצע, נקרא לפעולה הבאה על מנת להפנות את המשתמש חזרה למסך העריכה, כך שלאחר סיום העריכה, יוכל המשתמש לבחור מוצר נוסף לעדכון.

    Response.Redirect("~/EditProducts");
    

  6. שמור את הדף, והרץ את הדף EditProducts.cshtml לבחירת מוצר לעדכון. בחר מוצר כלשהו שתרצה לעדכן ולחץ על הקישור Edit שלידו למעבר לעמוד העדכון. עדכון את פרטיו ולחץ על Update.

תגיות: ,

ליאור זמיר

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

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