במדריך זה נראה פקדי תצוגה בסיסיים ב – ASP.NET ואת ה–HTML הנוצר מהם עבור הדפדפן.

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

Label – תווית

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

בתוך הדף שלנו עלינו לגרור מה – Toolbox את פקד ה – Label או לכתוב את הקטע הבא:

<asp:Label ID="lblHello" Text="Hello ASP.NET" runat="server" />

ב – Designer נראה את ה – Label בצורה כזו:

כמו בפקד TextBox, מאפיין ה – Text קובע מה ייכתב , אלא שבניגוד לפקד TetBox, למשתמש אין אפשרות לשנות את הכיתוב.

ב – HTML שנוצר עבור הדפדפן נראה את התגית SPAN עבור ה – Label שהגדרנו:

<span id="Span1">Hello ASP.NET</span>

Image – הצגת תמונה

פקד זה מציג תמונה הקיימת באתר שלנו או באתר אחר. בדף שלנו נגדיר אותו לדוגמא כך:

<asp:Image runat="server" AlternateText="Webmaster logo" 
  ImageUrl="https://www.webmaster.org.il/images/logo.gif"   
  ToolTip="Webmaster logo" ID="imgLogo" />

kpes שלuשה מאפיינים: האחד הוא ה – ImageUrl המגדיר את הכתובת של התמונה, השני הוא ה – AlternateText המגדיר את הכיתוב החלופי לתמונה עבור גולשים עם מוגבלויות, מנועי חיפוש וגם מה להציג במידה ומסיבה כלשהי לא מצליחים לטעון את התמונה, השלישי הוא הכיתוב המופיע כשעוברים עם העכבר על התמונה.

ב – Designer יראה הפקד כך:

ה – HTML שיווצר עבור הדפדפן הוא:

<img id="img1" src="https://www.webmaster.org.il/images/logo.gif" 
  title="Webmaster logo" alt="Webmaster logo" />

כאשר הפקד ייקבל את התג img עם המאפיין src עבור הכתובת של התמונה, title עבור המאפיין Tooltip ו – alt עבור AlternateText.

Table – הצגת טבלה

פקד זה מציג טבלה בדפדפן. על מנת שהטבלה תכיל משהו נוסיף לפקד הזה גם פקדי בנים: TableRow ו – TableCell אשר יהפכו ב – HTML לתגיות tr ו – td בהתאמה.

הכתיבה בדף ה – ASPX עבור טבלה עם שורה ועמודה אחת תהיה כך:

<asp:Table runat="server" ID="myTable">
  <asp:TableRow ID="TblRow1" runat="server">
    <asp:TableCell ID="TblCell1" runat="server"></asp:TableCell>
  </asp:TableRow>
</asp:Table>

ניתן גם להוסיף שורות לטבלה ותאים לשורה ב – Code Behind באופן הבא:

TableRow row = new TableRow();
TableCell cell = new TableCell();
row.Cells.Add(cell);
myTable.Rows.Add(row);

ה – HTML המתקבל כתוצאה ממה שכתבנו ב – ASPX נראה כך:

<table id="Table1">
  <tr id="Tr1">
    <td id="Td1"></td>
  </tr>
</table>

BulletedList – רשימת פריטים

פקד זה מציג רשימה כאשר ליד כל פריט מופיע סימן (bullet) כלשהו – אותו סימן ליד כל הפריטים.

לפקד הזה ישנם פקדי בנים, בדומה מאוד לטבלה. הבנים האלו נקראים ListItem, אלא שבניגוד ל – TableRow ו – TableCell אלו אינם פקדים ממש ולכן לא מוסיפים להם "runat="server.

על מנת לייצר רשימה עם שני פריטים נרשום את הקוד הבא ב –ASPX:

<asp:BulletedList ID="myBulletedList" 
  runat="server" BulletStyle="Circle">
  <asp:ListItem Text="Item 1">
  </asp:ListItem>
  <asp:ListItem Text="Item 2">
  </asp:ListItem>
</asp:BulletedList>

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

ב – Designer נראה את הרשימה באופן הבא:

ה – HTML שנוצר כתוצאה ממה שכתבנו ב – ASPX הוא:

<ul id="Ul1" style="list-style-type: circle;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>