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

מדריך ASP.NET - פקדים: פקדי הזנה סטנדרטיים

IdoFlatow ,‏ מכללת סלע‏ ‏/‏ 3 פברואר, 2011
F+
F-

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

TextBox - שדה טקסט שניתן לכתוב בו

להוספת פקד TextBox נגרור אותו לדף שלנו מתוך ה-Toolbox:

ASPNET - toolbox

לאחר גרירת הפקד לדף ייכתב הקטע הבא בתוך הדף:

<asp:TextBox ID="txtHello" runat="server" Text="Hello ASP.Net" />

ההגדרה “runat=”server הכרחית לכל פקד שעובדים איתו בצד השרת (Code Behind).

ה – ID משמש כמזהה של הפקד. ניתן ב – Code Behind לגשת לפקד כאשר ה – ID הוא שם הפקד. לדוגמא, אם נרצה להגדיר מה שייכתב בתוכו ב – Code Behind נעשה זאת כך:

txtHello.Text = "Hello ASP.Net";

אם נעבור ל – Designer נראה את ה – TextBox כך:

ASPNET - פקד TextBox

שימו לב שמה שכתבנו במאפיין Text הוא מה שנכתב בתוך תיבת הטקסט בהתחלה. המשתמש, כמובן, יכול לשנות זאת.

על-מנת לראות כיצד הדף נראה בדפדפן, נלחץ על הכפתור הימני של העכבר על הדף שמופיע ב-Solution Explorer ונבחר ב - View in browser.

ASPNET - View In Browser

אם נתבונן בקטע ה – HTML של תיבת הטקסט, נראה שזו התוצאה:

<input name="txtHello" type="text" 
  value="Hello ASP.Net" id="Text1" 
/>

CheckBox – תיבת סימון

הפקד הזה משמש לסימון, נשתמש בו בעיקר כאשר נרצה שהמשתמש יסמן נתון מסויים ב כן / לא, לדוגמה:

ASPNET - פקד CheckBox

בדומה ל – TextBox – גם אותו ניתן לגרור מתוך ה – Toolbox והוא נכתב באופן הבא:

<asp:CheckBox ID="Checkbox1" 
  Text="אני מעוניין לקבל פרסומות" runat="server" 
/>

שימו לב שניתן להגדיר את הכיתוב שיהיה ליד ה – Checkbox במאפיין Text.

בסופו של דבר – ה – HTML שיתקבל הוא :

<input id="Checkbox2" type="checkbox" name="Checkbox1" />
<
label for="Checkbox1"> אני מעוניין לקבל פרסומות</label
>

ניתן לראות מכאן שהוגדרו ב – HTML שני אלמנטים, האחד הוא ה – Checkbox עצמו שמוגדר על-ידי פקד input והשני הוא ה – label (שימו לב, זהו label של HTML ולא של ASP.NET) המכיל את הכיתוב שליד ה – CheckBox ומקושר אליו ע"י המאפיין for שלו.

RadioButton – לחצן רדיו

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

ASPNET - פקד RadioButton

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

<asp:RadioButton ID="RadioButton0" Text="0-4" 
  GroupName="group1" runat="server" 
/>
<
asp:RadioButton ID="RadioButton1" Text="4-8" 
  GroupName="group1" runat="server" 
/>
<
asp:RadioButton ID="RadioButton2" Text="8-12" 
  GroupName="group1" runat="server" 
/>
<
asp:RadioButton ID="RadioButton3" Text="12-16" 
  GroupName="group1" runat="server" 
/>

שימו לב שלכל אחד מלחצני הרדיו יש ID אחר. על מנת שלחיצה על אחד תבטל את האחרים, עלינו לתת להם אותו ערך במאפיין GroupName.

אם נסתכל על ה-HTML שנוצר בעמוד נראה את המבנה הבא:

<input id="Radio1" type="radio" name="group1" 
  value="RadioButton0" 
/>
<
label for="RadioButton0">0-4</label
>
<
input id="Radio2" type="radio" name="group1" 
  value="RadioButton1" 
/>
<
label for="RadioButton1">4-8</label
>
<
input id="Radio3" type="radio" name="group1" 
  value="RadioButton2" 
/>
<
label for="RadioButton2">8-12</label
>
<
input id="Radio4" type="radio" name="group1" 
  value="RadioButton3" 
/>
<
label for="RadioButton3">12-16</label
>

שימו לב גם כאן ל –label ליד כל radio button, כמו כן שימו לב לכך שמה שכתבנו ב – GroupName מגיע ל – name, ומה שכתבנו ב – ID מגיע ל – value.

DropdownList – רשימה נגללת

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

ASPNET - פקד DropDownListהגדרת הפקד בדף תראה כך:
<asp:DropDownList runat="server" ID="ddlAge">
</
asp:DropDownList
>

כעת הגדרנו רשימה ריקה, על מנת להוסיף לרשימה פריטים נשתמש ב – ListItem עבור כל פריט, כך שהגדרת הפקד תראה כך:

<asp:DropDownList runat="server" ID="DropDownList1">
  <asp:ListItem Text="0-4" Value="0" />
  <asp:ListItem Text="4-8" Value="1" />
  <asp:ListItem Text="8-12" Value="2" />
  <asp:ListItem Text="12-16" Value="3" 
/>
</
asp:DropDownList
>

כאשר ה – Text הוא מה שמוצג למשתמש, וה – Value הוא מה שישלח לשרת במידה והפריט יבחר.

נתבונן כעת ב – HTML שנוצר כתוצאה מה – DropDownList:

<select name="ddlAge" id="Select1">
  <option value="0">0-4</option>
  <option value="1">4-8</option>
  <option value="2">8-12</option>
  <option value="3">12-16</option
>
</
select
>

כאן אנחנו יכולים לראות שאת ה – DropDownList מייצגת תגית select (לעומת ה – input אותו ראינו בשאר הפקדים) וכל ListItem מיוצג ע"י תגית option, כאשר ה – value שלו מקביל ל – Value אותו הגדרנו וה – Text אותו הגדרנו נמצא בין התג הפותח והסוגר של כל option.

 

ניתן לקרוא עוד אודות פקדים ב – HTML במאמר מדריך HTML - טפסים.

IdoFlatow, מכללת סלע

יועץ ומרצה בקבוצת סלע לתחומי Web ו-Data. עוסק בתחומים Asp.Net, WCF, Silverlight, IIS ו-Entity Framework.
כותב הקורס הרשמי של מיקרוסופט ל-WCF וכן שותף בכתיבת הספר ASP.NET Programmer's Reference (ISBN 978-0470505458)
תגיות: ASP.NET‏  /  .net‏  /  פיתוח‏  /  צד שרת‏  /  מדריך‏  

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

תגובות למאמר



עוד במדריך

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

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