מדריך CSHTML – עבודה עם טפסים

מהו טופס

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

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

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

הגדרת טופס

הגדרת טופס מתבצעת באופן הבא:

<html>
<head>
    <title>Forms</title>
</head>
<body>
    <form method="post" action="">
        <input type="text" name="txtSearch" />
        <input type="submit" value="Search" />
    </form>
</body>
</html>

בדוגמא הנ"ל, תגית ה- body מכילה טופס המצוין ע"י התגית form. ה טופס מכיל הגדרה בשם method שבדרך כלל מקבלת get או post, שהן שתי שיטות שונות להעברת הערכים לשרת. לא נתמקד כרגע בהבדלים ביניהן, ובדוגמאות שלנו נכתוב תמיד post. ההגדרה action מציינת מיהו הדף שיקבל את הפרמטרים המועברים בטופס בעת לחיצה על הכפתור Submit. במקרים רבים (כמו בדוגמא הנ"ל) נשאיר את המאפיין action ריק, כך שהדף הנוכחי הוא זה שיקבל את הפרמטרים. במידה ונרצה לעבור לדף אחד, נוכל לציין את שמו בהגדרה זו.

בתוך הטופס יהיו פקדים מסוג input כשלכל אחד מהם המאפיין name, המציין את שם השדה (בהמשך נראה איפה משתמשים בשם הזה) ו- type, המציין את סוג הפקד (שדה טקסט, כפתור, רשימה וכו').

בכל טופס יהיה גם כפתור "שלח" שהוא פקד מסוג input שבמאפיין type יקבל את הערך submit.

אם נריץ את הדף המכיל את הקוד הנ"ל, נקבל טופס המכיל שדה טקסט אחד ולידו כפתור עם הטקסט Search.

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

יצירת טופס ראשון

להלן דוגמא ליצירת מחשבון:

<html>
<head>
    <title>Calculator</title>
</head>
<body>
    <form method="post" action="">
        <input type="text" name="num1" />
        <input type="text" name="num2" />
        <select name="operation">
            <option value="add">+</option>
            <option value="sub">-</option>
            <option value="mul">*</option>
            <option value="div">/</option>
        </select>
        <input type="submit" value="Calculate" />
    </form>
</body>
</html>

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

הרצת הדף, תציג את הטופס הבא:

בתור משתמש נזין את שני המספרים לחישוב, נבחר את הפעולה לביצוע ונלחץ על כפתור החישוב כדי לשלוח את הערכים לשרת כדי לבצע את החישוב ולהחזיר את התוצאה למשתמש.

עבודה עם הערכים בצד השרת וקבלת התוצאות בצד הלקוח

כעת מרצה לכתוב את הקוד שירוץ בצד השרת, יקבל את הערכים שהזין המשתמש ויעבד אותם. במקרה שלנו – יחשב את החישוב ויחזיר את התוצאה למשתמש.

ראינו בתחילת הפרק כי לטופס הוגדר מאפיין method="post" שמשמעותו שליחת ערכי הטופס לדף היעד בצד השרת, בין אם זה הדף הנוכחי או דף אחר כלשהו. איך נוכל לדעת בדף מסויים האם זוהי הטעינה הראשונה של הדף במהלך הגלישה, או שהגענו לדף דרך פעולת post של טופס ויש לנו ערכים לקבל? לצורך כך נוכל להשתמש במאפיין מיוחד בשף בשם IsPost.

בראש הדף, נוסיף את קטע הקוד הבא:

@{
    var result = "";
    if(IsPost)
    {
        result = "Post";
    }
}

קטע הקוד הנ"ל, המתחיל בהסימן @{ ומסתיים ב- { ירוץ בצד השרת ולא יוצג ללקוח. בקוד זה, נגדיר משתנה בשם result מסוג מחרוזת ונאתחל אותו להיות מחרוזת ריקה. לאחר מכן נבדוק האם המאפיין IsPost החזיר true, ואם כן נשנה את הערך של result להכיל את המחרוזת Post.

בתוך הטופס, מתחת לכפתור ה- Submit נרצה להציג את ערך המשתנה result.

<input type="submit" value="Calculate" />
@result

בשלב זה, יכיל הטופס את הקוד הבא:

@{
    var result = "";
    if(IsPost)
    {
        result = "Post";
    }
}

<html>
<head>
    <title>Calculator</title>
</head>
<body>
    <form method="post" action="">
        <input type="text" name="num1" />
        <input type="text" name="num2" />
        <select name="operation">
            <option value="add">+</option>
            <option value="sub">-</option>
            <option value="mul">*</option>
            <option value="div">/</option>
        </select>
        <input type="submit" value="Calculate" />
        @result
    </form>
</body>
</html>

אם נריץ את הדף הנוכחי, נקבל את הטופס כפי שראינו אותו קודם:

אם נלחץ על כפתור ה- Calculate יתבצע Post לשרת, הדף ירוץ שוב אך הפעם המאפיין IsPost יחזיר true והמשתנה result יקבל את הערך Post ויוצג ליד הכפתור.

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

Request["operation"]

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

@{
    var result = "";
    if(IsPost)
    {
        var num1 = Request["num1"].AsInt();
        var num2 = Request["num2"].AsInt();
        var action = Request["operation"];
 
        int res = 0;
        if(action == "add")
        {
            res = num1 + num2;
        }
        else if (action == "sub")
        {
            res = num1 - num2;
        }
        else if (action == "mul")
        {
            res = num1 * num2;
        }
        else if (action == "div")
        {
            res = num1 / num2;
        }
        result = res.ToString();
    }
}

בתחילת הקוד הנ"ל, מאותחל המשתנה result להיות מחרוזת ריקה. במידה וזו פעולת Post והועברו פרמטרים לשרת, נוציא את הערכים של שני המספרים והפעולה לחישוב שהוזנו ע"י המשתמש. שימו לב שכיוון שערכים מתקבלים בצד השרת כמחרוזת ולא כמספר ועלינו להמיר אותם למספרים לצורך החישוב. נעשה זאת ע"י שימוש בהוספת הקריאה . AsInt() לאחר הפניה לקבלת הערך מהאובייקט Request.

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

בסופו של דבר נציב במשתנה result שיוצג למשתמש את הערך שנמצא ב – res. כיוון שהמשתנה result הוא מסוג מחרוזת ולא מספר עלינו להשתמש בפונקציה ToString() על מנת להמיר את הערך של res למחרוזת.

אם נריץ את הדף, נקבל את הטופס שיצרנו.

נזין בו ערכים ונלחץ עם כפתור החישוב, ונקבל את התוצאה.

הצגת הערכים שנשלחו לשרת על גבי הטופס

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

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

<input type="text" name="num1" value=@Request["num1"] />
<input type="text" name="num2" value=@Request["num2"] />
<select name="operation" value=@Request["operation"]>
    <option value="add">+</option>
    <option value="sub">-</option>
    <option value="mul">*</option>
    <option value="div">/</option>
</select>

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

תגיות: ASP.Net, CSHTML

ליאור זמיר

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

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