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

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

בחלק זה נראה איך ליצור טופס אשר יאפשר למשתמשים להוסיף מוצר חדש לטבלת ה – Products. לאחר שרשומת מוצר חדש נכנסה לבסיס הנתונים, הדף יציג את הטבלה המעודכנת על-ידי שימוש בדף ListProducts.cshtml שיצרנו בחלק הקודם.

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

בתוך האתר SmallBakery, צור קובץ CSHTML חדש וקרא לו InsertProducts.cshtml.

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

@{
    var db = Database.OpenFile("SmallBakery.sdf");
    var Name = Request["Name"];
    var Description = Request["Description"];
    var Price = Request["Price"];
    
    if (IsPost) 
    {        
        // Read product name.
        Name = Request["Name"];
        if (Name.IsEmpty()) 
        {
           Validation.AddFieldError("Name", "Product name is required.");
        }

        // Read product description.
        Description = Request["Description"];
        if (Description.IsEmpty()) 
        {
          Validation.AddFieldError("Description", "Product description is required.");
        }
        
        // Read product price
        Price = Request["Price"];
        if (Price.IsEmpty()) 
        {
          Validation.AddFieldError("Price", "Product price is required.");
        }
      
        // Define the insert query. The values to assign to the 
        // columns in the Products table are defined as parameters 
        // with the VALUES keyword.
        if(Validation.Success) 
        {
            var insertQuery =
		"INSERT INTO Products (Name, Description, Price) " +
                "VALUES (@0, @1, @2)";
            db.Execute(insertQuery, Name, Description, Price);
        
            // Display the page that lists products.
            Response.Redirect("~/ListProducts");
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>Add Products</title>
</head>
<body>
    <h1>Add New Product</h1>
      
    @Html.ValidationSummary()
     	
    <form method="post" action="">
        <fieldset>
            <legend>Add 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="Insert"
			 class="submit" />
            </div>
        </fieldset>
    </form>
</body>
</html>

נסביר את הקוד הנ"ל במספר שלבים. הטופס, מכיל שלושה שדות: שם, תיאור ומחיר והוא נראה כך:

כאשר המשתמש לוחץ על כפתור ה–Insert, הקוד בראש הדף יפעל. ראשית, יפתח קובץ הנתונים – SmallBakery.sdf, ונגדיר משתנים שיקבלו את מהטופס את הערכים אותם הזין המשתמש. שנית, נבדוק את תקינות הנתונים שהועברו ע"י שימוש בפונקציית הבדיקה IsEmpty() ונשתמש באובייקט Validation כדי לדווח על שגיאות למשתמש במידה ויש כאלו.

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

var insertQuery = "INSERT INTO Products (Name, Description, Price) " +
                  "VALUES (@0, @1, @2)";

נשים לב שמשפט ה- SQL הנ"ל מכיל ממלאי מקום עבור הפרמטרים המסומנים ע"י הסימן @ ‏ (@0,@1,@2) . על מנת לבצע את פקודת ההכנסה, נשתמש בפקודה db.Execute() עם משפט ת ה- SQL שיצרנו ונעביר גם את הערכים להכנסה שישתלבו בפקודה במקום ממלאי במקום, לפי הסדר בהם הועברו:

db.Execute(insertQuery, Name, Description, Price);

הערה כאמצעי בטיחות, תמיד מומלך להעביר ערכים למשפטי SQL בשימוש עם פרמטרים כפי שאפשר לראות בדוגמא הקודמת. דרך זו נותנת לנו את הסיכוי לבדוק את תקינות המידע של המשתמש, וכן זה עוזר להגן על התקפות לשליחת פעולות זדוניות אל מול בסיס הנתונים (מכונה לעיתים – SQL injection attacks).

לאחר שפקודת ה- INSERT בוצעה, אנו שולחים את המשתמש לדף המכיל את רשימת המוצרים ע"י שימוש בפונקציה Response.Redirect() ונעביר את שם עמוד היעד:

Response.Redirect("~/ListProducts");

אם בדיקת התקינות לא הצליחה, אנחנו מדלגים על פעולת ההוספה (ה-Insert). במקום זאת, נציג סיכום של הודעות השגיאה למשתמש ע"י שימוש ב- Html.ValidationSummary().

הצג את הדף InsertProducts בדפדפן.
מבלי להזין ערכים, לחץ על כפתור ה- Insert כדי להפעיל את בדיקות התקינות, וקבל את הודעות השגיאה מהשרת.
מלא את הטופס בנתונים תקינים Insert. הדף ListProducts.cshtml מוצג ומראה את הרשומה החדשה. בטבלת הנתונים.

תגיות: ASP.Net, CSHTML

ליאור זמיר

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

מאמרים נוספים של ליאור זמיר

מדריך CSHTML

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

עוד בנושא זה

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

תגיות