User Controls
.ascx ויש לו קובץ C# נלווה לקוד צד השרת. בתוך טבלה מוסיפים שני לייבלים, שם הספר ומחיר, ואובייקט תמונה ביניהם. את גובה התמונה מגדירים כדי שכל הכרטיסים יהיו אחידים.BookName (מחרוזת) שמחזיר ומעדכן את הטקסט של לייבל השם.BookPrice (decimal) שממיר את הטקסט של הלייבל. בקבלה נעשה Convert.ToDecimal, ובשליחה Convert.ToString.BookImage (מחרוזת) שמעדכן את ImageUrl של התמונה.Register עם המקור (src), שם התגית וקידומת התגית. בתגית של הפקד מגדירים ערכים בעזרת המאפיינים החדשים. כדי לשנות את שם הקידומת למשהו ברור, המרצה שינה את השם ל-MyWebControls.Page.LoadControl מקבלת את נתיב ה-ASCX ומחזירה אובייקט מסוג Control, שממירים לסוג BookControl. מעבירים לו את הערכים, מוסיפים אותו לאוסף Controls של פאנל, ומוסיפים בין הפקדים רכיב LiteralControl עם <br/> לרווח.TableRow ו-TableCell, מוסיפים את הפקד לתא, ומוסיפים שורה חדשה בכל שלושה תאים (בדיקת i % 3). בשיעור הוכח שההגדרה של הרג'יסטר ב-web.config לא עבדה כשהדף והפקד היו באותה תיקייה, ולכן הפקד הועבר לתיקייה נפרדת.פרקי ההרצאה: User Controls
תמלול ההרצאה: User Controls
הטקסט המלא של הדקות הראשונות בהרצאה «User Controls» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אוקיי, בשיעור הקודם ראינו איך אנחנו יכולים להרחיב יכולות של פקד קיים אנחנו נעשה את זה כאשר אנחנו רוצים לקחת פקד שהוא מאוד מאוד מאוד דומה לפקד שהוא כבר קיים ולתת לו רק יכולת נוספת אבל מה קורה אם הפקד שאנחנו רוצים לבנות בעצם מורכב מכמה רכיבים קיימים ולא מאחד?
בואו נראה דוגמה יכולת מצב שאני בונה חנות ספרים ואני רוצה במספר מקומות באתר שלי להציג מידע לגבי ספר המידע אמור להכיל את שם הספר, אמור להכיל את המחיר ובוא נניח שאמור להכיל תמונה בקשר לספר.
אם הייתי רוצה לקחת את העיצוב הזה ולבנות אותו רק במקום אחד בכל האתר שלי, כל מה שהייתי צריך לעשות זה פשוט לבנות את העיצוב הזה של לייבל של מחיר, לייבל של שם הספר ותמונה רק באותו מקום שבו הייתי רוצה את הרכיב הזה.
אבל במידה ואני רוצה לקחת את הפיסת עיצוב הזאת ולהגדיר אותה בכל מיני מקומות באתר זה אומר שאני צריך לקחת את העיצוב הזה ולחזור עליו בכל מיני מקומות באתר ועדיף אולי לבנות רכיב שזה מה שהוא יודע לעשות.
כלומר, לבנות רכיב חדש שיש לו לייבל עבור מחיר של ספר, לייבל עבור שם הספר ותמונה עבור התמונה של הספר. ואז אני יכול לקחת את הרכיב הזה ולשכפל אותו כיחידה סגורה בכל מקום באתר, פה אני רוצה בדיוק את העיצוב הזה.
זה חוסך ממני לכתוב את העיצוב הזה שוב ושוב ושוב ושוב. אז בואו נראה איך אני עכשיו בונה רכיב שמסוגל להציג פרטים.
בואו ניקח את הדוגמה של הספר. מה שאני צריך לעשות, דבר ראשון, ולהוסיף לאתר שלי קובץ חדש שנקרא Web User Control. אנחנו רואים אותו פה.
הקובץ הזה זה קובץ בעל סיומת ASCX, C עבור Control. קודם כל ניתן לו שם. קובץ הזה מכיל תגית אחת שנקראת Control יש בה מאפיינים דומים לתגית Page וביחד עם הקובץ הזה יש לנו קובץ C-Sharp שמחזיק את קוד צד השרת כל הקובץ של ה-ASCX נועד בשביל העיצוב והקוד של ה-C-Sharp נועד בשביל קוד צד השרת אז בואו נחשוב מה העיצוב שאנחנו רוצים בואו
ניקח לצורך הפשטות עיצוב שמחזיק שם ספר, מחיר ותמונה. נעצב את זה בתוך טבלה. יש לנו כרגע את הלייבל עבור שם הספר.
בואו נגדיר עוד לייבל עבור המחיר ובואו נגדיר ביניהם אובייקט תמונה. קודם כל, דבר ראשון, בנינו פה את העיצוב עצמו של הרכיב.
ובמקום לשכפל לכל מקום שהייתי רוצה להציג שם ספר, תמונה של הספר ומחיר, כל מה שהייתי צריך לעשות זה להגדיר את הפקד החדש שאנחנו בונים ו-sb.net תשכפל עבורנו את הקוד הזה.
נגדיר רק שהתמונה בעלת מימדים גבוהים. אוקיי, בואו נסתכל איך זה מיוצג. אם אני עובר לדיזיין, אז אני רואה שיש לי מעין רכיב סטנדרטי או עיצוב סטנדרטי של טבלה.
אני רואה פה Label שנקראת lbl.book.name, אני רואה את התמונה של הספר שאמורה להיות ואני רואה את lbl.book.price. אוקיי, עדיין לא שמתי את הפקד הזה על דף.
אז אנחנו הולכים עכשיו לשים את הפקד הזה על אחד הדפים. נגדיר רק את ההייט 180 ויותר פרופורציונלי. אוקיי, בואו נלך עכשיו לדף ונראה איך אני מגדיר את הרכיב הזה על גבי הדף.
הרכיב הזה נמצא בקובץ BookControl.ascx. דבר ראשון, מה שאני צריך לעשות זה להכיל תגית מיוחדת שנקראת תגית רג'יסטר, בדומה לפעילות הרכיבים הקודמים שלמדנו, שמאפשרת לדף לדעת איפה הרכיב הזה נמצא, ואז רק אני אוכל להשתמש איתו בקוד שלי.
את התגית הזאת אני יכול להגדיר בראש כל דף, או שאני יכול להגדיר אותה פעם אחת ב-Web Config, וזה פותר לי את הבעיה עבור כל הדפים. בואו נראה קודם כל איך אני מגדיר את זה בראש הדף.
אז השיטה פשוטה, במקום לכתוב את זה, אני פשוט הולך לאזור ה-Design של הדף, לוקח מחלונית ה-Solution Explorer את קובץ ה-ASCX, וגורר אותו לתוך הדף שלי ועוזב.
ברגע שעשיתי את זה, ויז'ל סטודיו, אם אני מסתכל בסורס של הדף, כתבה לי פה למעלה את תגית הרג'יסטר. בואו נסתכל מה המאפיינים שכתובים בתגית הרג'יסטר.
דבר ראשון, אני רואה מאפיין שנקרא src. src מחזיק לי את המיקום של קובץ ה-ascx בפרויקט שלי. לאחר מכן tag name מחזיק לי את שם התגית ו-tag prefix מחזיק לי את קידומת התגית.
בנוסף אני רואה כאן כבר AFPX, בקובץ ה-AFPX שלי אני רואה קונטרול אחד שנכתב לי. בואו נסתכל עוד פעם מה ההבדל בין tag prefix לבין tag name.
אם הייתי משתמש ב-asp.2.textbox, רכיב סטנדרטי של asp.net, ESP זה הפרפיקס, זה הקידומת של הרכיב שלנו. טקסט בוקס זה השם שלו. לכן, טאג פרפיקס זה הקידומת שניתנת עבור הרכיב החדש שלנו.
טאג ניים זה השם של הרכיב. קונטרול נשמע לי מאוד מאוד סביר והגיוני. UC1 נראה לי קצת לא ברור. UC, קיצור של יוזר קונטרול. אז בואו נחליף ל-UC1 את השם ל-MyWebControls.
ולכן יש לנו פה את התחילית my web controls ושם יש לי book control כעת לדף שלי יש control אחד שמתאר ספר כמובן שיכלתי לשכפל אותו ולהחזיק כל מיני קונטרולים כאלה על הדף בואו נסתכל נראה שכעת הדף שלנו אמור להכיל שני רכיבים בואו נריץ את זה ואכן אנחנו רואים שני רכיבים שאמורים לתאר ספר שנמצאים לי על הדף כמובן אני לא רואה מידע לגבי הרכיבים מפני שהמידע הריק ואני
באמת רואה מקום של תמונה שאמור להיות כאן וכאן. אוקיי, בואו נסתכל עכשיו איך אני מגדיר את המידע שהרכיב אמור להציג.
אם אני מסתכל מבחינת קובץ ה-ASCX, קובץ ה-ASCX זה הרכיב עצמו והאובייקט החדש שבניתי או הרכיב החדש שבניתי. הוא יודע להחזיק מידע לגבי ספר אחד אבל הוא כמובן לא אמור לדעת מה המידע של הספר,