יצירת Control חדש (CustomControl) - חלק א'
מבוא
בסדרת מדריכים זו - אסביר איך ליצור Custom Conotrol (להלן "פקד") לדפי ה - ASP.NET. הפקדים ב - ASP.NET הם כלי מאוד חזק. היתרונות הם רבים וכאן אכתוב רק מעט מהם:
- פקדים עוזרים לשמור על קוד נקי ולהפריד את העיצוב (דפי ה - ASPX) מהקוד (CodeBehind).
- פקדים מתקמפלים וניתן להשתמש בהם שוב ושוב בדפים ופרוייקטים שונים (ואף לשים אותם ב - GAC)
- הפקדים משמשים כ - "קופסה שחורה", שבאה לספק לנו התנהגות כלשהי, וניתן לנהל אותם בקלות באמצעות מתודות, אירועים ו - Propeties שהם חושפים (אלו מופיעים גם ב - Intellisense).
- הפקדים יכולים לכלול בתוכם משאבים שנחוצים להפעלתם כגון קבצי JavaScript, קבצי CSS וכיו"ב - ומונעים מאיתנו להתעסק עם הוספת קבצים אלו בכל דף.
- פקדים יכולים לשלב בתוכם קוד צד שרת שמשולב עם קוד צד לקוח, לנהל ולהעבי מידע ב - ViewState, לעבוד עם פקדים אחרים ועוד ועוד.
ההתחלה
על מנת שנוכל ליצור פקד בקלות, ניצור אתר חדש ב - Visual Studio ( > ) ונבחר ב - Empty Web Site.
בתוך האתר ניצור תיקיית ASP ששמה App_Code, ונוסיף class חדש, שהוא יהיה הפקד שלנו. נקרא לו HelloWorldControl.cs, בקוד שנוצר מה - Visual Studio נוסיף הורשה - הפקד שלנו צריך לרשת מ - System.Web.UI.Control. הקוד של הפקד עכשיו צריך להראות כך (אחרי שהעפנו namespaces מיותרים):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
using System;
using System.Web;
using System.Web.UI;
/// <summary>
/// Summary description for HelloWorldControl
/// </summary>
public class HelloWorldControl : System.Web.UI.Control
{
public HelloWorldControl()
{
//
// TODO: Add constructor logic here
//
}
} |
עכשיו יש לנו את הקוד הבסיסי לפקד. ולו נוסיף (או נדרוס, זכרו - מי שמשתמש ב - override מחבל בחיי אדם) את הפונקציה שמרנדרת את הפקד (הלא היא Render):
protected override void Render(HtmlTextWriter writer)
{
writer.Write("Hello World!");
}
כאן אני מניח שאתם מבינים מה יקרה עכשיו אם נוסיף את הפקד לדף כלשהו. אבל בכל זאת, אסביר בקצרה מה עשינו כאן:
- יצרנו class חדש בשם HelloWorldControl, שזה יהיה שמו של הפקד.
- ירשנו מ - System.Web.UI.Control שהיא מחלקת האם (או האב) של כל הפקדים ב - ASP.NET.
- דרסנו את המתודה Render - זוהי מתודה המקבלת אובייקט מסוג HtmlTextWriter, שעליו נסביר בקצרה לאחר שתסיימו לקרוא את שלושת הסעיפים הללו. מתודה זו יוצרת את הקוד שיפלוט הפקד לדף ה - ASPX.
האובייקט HtmlTextWriter נועד על מנת לעבוד וליצור קוד Html בקלות. המתודה בה השתמשנו היא Write, מתודה זו פשוט כותבת את הטקסט שהיא מקבלת. אם נרצה ליצור תג Html כלשהו, נוכל להשתמש במתודות נוספות, כגון RenderBeginTag ו - RenderEndTag:
- RendrBeginTag - מקבלת String או HtmlTextWriterTag שהוא enumeration שמונה תגיות שונות של Html, ויוצרת תגית פתיחה ב - Html.
- RenderEndTag - סוגרת את התגית האחרונה שנפתחה.
אם נרצה שהפקד יציג את צמד המלים "Hello World" בכותרת מסוג Heading1, נוכל לבצע זאת כך:
protected override void Render(HtmlTextWriter writer)
{
writer.RenderBeginTag(HtmlTextWriterTag.H1);
writer.Write("Hello World!");
writer.RenderEndTag();
}
עכשיו אחרי שיצרנו את הקונטרול הפשוט שנקרא HelloWorldControl, נשים אותו תחת ה - namespace שנקרא MyControls ונוסיף אותו לדף ASPX. לצורך כך ניצור דף ASP.NET חדש בפרוייקט שלנו ונקרא לו Default.aspx.
בראש הדף (אחרי הגדרת ה - @Page) "נרשום" את הפקד שלנו על מנת שה - ASP.NET יזהה אותו, באמצעות Register:
<%@ Register Namespace="MyControls" TagPrefix="hwc" %>
והסבר:
- Register משמש על מנת "ליידע" את הדף על פקדים חדשים.
- Namespace - ה - namespace תחתיו יושב ה - Control שלנו.
- TagPrefix - ה - Prefix של התגים (לדוגמה ה - Prefix של TextBox הוא asp, ולכן השם של התג הוא asp:TextBox). במקרה הזה בחרתי ב - hwc, שזה ראשי תיבות של Hello World Control.
- ומה עם שם התג? השם יהיה השם של ה - class.
במקרה הזה, הפקד שלנו יושב בתוך תיקיית ה - App_Code (משמע באותו פרוייקט), בד"כ רצוי ליצור את הפקדים בפרוייקט נפרד, על מנת שיהיה לנו DLL שנוכל להוסיף לכל פרוייקט. במקרה זה נוסיף גם את המאפיין Assembly - וערכו יהיה השם של ה - Assembly של הפרוייקט.
עכשיו נעשה Build לאתר (בקיצור: Ctrl + Shift + B), ולאחר שהוא התקמפל בהצלחה, ניגש לדף ה - ASPX שלנו וננסה להוסיף את הפקד החדש שיצרנו. הנה תמונה:
אפשר לראות כי הפקד מופיע ב - Intellisense של ה - VS. עכשיו נוסיף אותו, נקמפל ונריץ. הקוד:
<hwc:HelloWorldControl runat="server"/>
נריץ את האתר - ונוכל לראות את התוצאה: H1 ובתוכו המלים Hello World.
סוף דבר לחלק א'
בזה סיימתם את השלב הראשון בבניית פקד פשוט ביותר והבנה של יצירת פקד חדש. בחלקים הבאים אסביר איך ליצור לפקד מאפיינים, אירועים, משאבים (כגון קבצי JavaScript) ועוד.
יצירת Custom Controls - חלק ב' - Properties & Exceptions