ASP.NET

Web Services ASP.NET כתב: אקת'ם חאג' יחיא ליווי מקצועי : ארז קלר www.corner.co.il

מבוא ל- ASP.NET. • יצירת טפסי Web. • הפרדה בין קוד לרכיבי תצוגה – Code Behind. • טיפול באירועים. • קובץ קונפיגורציה – Web.Config. • פקדים. • פקדים מותאמים אישית. • שמירת מצב (State) .

מבוא ל- ASP.NET מאפייני ASP.NET • ASP.NET היא טכנולוגיה מבית היוצר של מיקרוסופט שמיועדת לפיתוח אפליקציות לרשת. • טכנולוגיה זו הינה חלק מה- Microsoft .NET Framework, ולכן יכולה להשתמש בכל רכיבי ה-Class Library של NET.. • מיועדת לעבודה בצד השרת. • הדפים שנוצרים מתורגמים בעזרת מנוע מיוחד המותקן בצד השרת ומוחזרים ללקוח כדפי HTML. • כמו כל טכנולוגיות .NET גם ASP.NET היא OOP .

מבוא ל- ASP.NET מאפייני ASP.NET - המשך • כמו כל תוכנית הכתובה ב- .NET גם יישומי ASP.NET מקומפלים מראש, ועוברים אינטרפטציה בזמן בקשה. • ASP.NET אינה שפת תכנות אלא טכנולוגיה שמשתמשת במספר שפות תכנות כמו C#, VB.NET J#, JSCRIPT.NET וכו... • לכתיבת קוד בשפות תכנות יש יתרון גדול על כתיבת קוד בשפות סקריפטים כמו JScript ו' VBScript.

מבוא ל- ASP.NET מאפייני ASP.NET – המשך • ב- ASP.NET קוד ה- HTML מופרד מהקוד הלוגי של הדף (Code Behind), הפרדת הקוד מהמראה הוויזואלי של הדף מהווה יתרון עצום, עליו נדבר בהמשך. • ב- ASP הקלאסית היו 5 אובייקטים, עליהם התבסס קוד ה- Script , ב- ASP.NET ישנם למעלה מ- 3400 מחלקות מוכנות לשימוש. • טכנולוגיית ASP.NET היא לא רק טכנולוגיה ליצירת אתרי אינטרנט, אלא, מכילה גם את שירותי הרשת (Web Services) באמצעותם יישומים יכולים לקבל שירותים דרך הרשת. • ASP.NET מכילה פקדי שרת (Web Controls), שמפשטים את העבודה ומתאימים את הקוד לדפדפן שקרא להם ומוכרים על ידי השרת, הפעלת אירועים מתבצעת בצד השרת.

מבוא ל- ASP.NET מאפייני ASP.NET – המשך • מגדירה קבצי קונפיגורציה (mashine.config ו' web.config) אשר מכילים את ההגדרות של האפליקציה או חלקים ממנה. • יותר יציבה ומאובטחת. • שילוב טוב יותר עם XML ו-ADO.NET . • איתור באגים קל יותר.

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET אפליקציית ASP.NET מכילה את הקבצים הבאים: • .aspx – ASP.NET Web Form • .aspx.cs – code behind page – פונקציונליות • . Global.asax – קובץ שמכיל את כל המשתנים הגלובליים והאירועים ברמת האפליקציה ,לדוגמה: מה יתבצע כאשר האפליקציה עולה או יורדת. • Web.config – הגדרות קונפיגורציה.

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET דף aspx מכיל שלושה חלקים עיקריים: • הנחיית הדף (page directive): הגדרות מאפייני הדף. • קוד צד-לקוח וקוד צד-שרת : קוד המופעל על ידי הלקוח (דפדפן) למשל JScript והקוד שרץ בצד השרת (IIS). • HTMLופקדי השרת: מגדיר את מראה הדף על ידי פקדי HTML או פקדי שרת (שהם חידוש משמעותי ב- ASP.NET)

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET הנחיית הדף (Page directive) • מרכיב חשוב בדף aspx. • מספק הנחיות טיפול בדף ל- Parser ול- Compiler. • מוגדר בראש הדף בין התגיות : התגית <% page@<% . דוגמה: <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false“ Inherits="WebApplication1.WebForm1" %> הגדרת שפה התכנות הקובץ שמכיל את קוד צד-השרת לטיפול באירוע הדף המחלקה הממומשת ב- Code Behind

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET קוד צד-לקוח (Client Side) וקוד צד-שרת (Server Side) • דפי aspx יכולים להכיל קוד שרץ בצד השרת וקוד שרץ בצד הלקוח. • קוד שרץ בצד לקוח יכול להגדיר אלמנטים עיצוביים (שינוי צבע רקע של פקד בזמן שהעכבר עובר מעליו), בדיקת תקינות קלט משתמש וכו'. • תפקידו של קוד שרץ בצד שרת הוא לטפל באירועי הפקדים ואירועי היישום. • יתרונותיו של קוד בצד שרת : הקוד מוסתר מהלקוח, מקומפל, יכול לגשת למשאבי השרת, יכול להשתמש בכל מרכיבי .NET

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET קוד צד-לקוח - דוגמה • ניתן להוסיף את קטע הקוד הבא בין תגיות ה- Head של הדף: • קוד צד שרת נכתב ב- Jscript או ב- VBScript . • <script language="javascript"> • function Form1_onmousemove() • { • document.bgColor="c5c5ff"; • } • </script>

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET קוד צד שרת • קוד צד שרת ניתן לכתוב בדף aspx או בדף נפרד המכונה code behind. • לדוגמה: public class WebForm1 : System.Web.UI.Page { … private void Button1_Click(object sender, System.EventArgs e) { int num1=int.Parse(TextBox1.Text); int num2=int.Parse(TextBox2.Text); Label1.Text=(num1+num2).ToString(); } ... }

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET • דף aspx מורכב משני קבצים: • MyPage.aspx – כתוב בפורמט HTML . • MyPage.aspx.cs – כתוב בשפת .NET כלשהיא. • בדף aspx מוגדר העיצוב/המראה של האתר, מכיל הגדרות של פקדי HTML ופקדי שרת. כל הפקדים חייבים להופיע בין התגיות. . . </form> <form>. כמו כן , בדף זה ניתן לכתוב את קוד צד הלקוח. • דף aspx.cs מכונה Code Behind מטפל באירועי הפקדים ואירועי היישום בצד שרת.

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET פקדי שרת מוגדרים באמצעות תגיות מיוחדות, לדוגמה: <asp:TextBox id="TextBox1" runat="server"> <asp:TextBox/> בעת החזרת הדף ללקוח הם מתורגמים לתגיות HTML סטנדרטיות : <input type="text" id="TextBox1" />

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET דוגמה: MyPage.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"><title>Untitled Page</title></head> <body> <form id="form1" runat="server"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged"></asp:TextBox> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> </form> </body> </html>

מבוא ל- ASP.NET מבנה אפליקציית ASP.NET דוגמה : MyPage.aspx.cs public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { Label1.Text = TextBox1.Text; } } טיפול באירוע פקד בצד שרת

מבוא ל- ASP.NET מודל ההרצה (Request\Response) מודל ההרצה מתאר מצב שבו הלקוח מבקש דף באמצעות שליחת בקשה לשרת, השרת מגיב ומספק את הדף המבוקש ללקוח. התהליך : • הלקוח שולח בקשה (Request) לשרת. • השרת בודק את סיומת הקובץ, אם מדובר בסיומת מסוג htm או ,htmlהוא שולף את הקובץ המבוקש ומחזיר אותו מיידית ללקוח. • אם מדובר בסיומת מסוג aspx, (זה מה שמעניין אותנו בשלב זה( הבקשה עוברת תהליך עיבוד ולאחר מכן המידע מועבר ללקוח.

דפדפן שרת בניית בקשה שליחת בקשה לשרת עיבוד הבקשה הצגת הדף שליחת דף HTML לדפדפן יצירת דף HTML מבוא ל- ASP.NET מודל ההרצה (Request\Response) תהליך הבקשה/תגובה:

מבוא ל- ASP.NET מודל ההרצה (Request\Response) • כאשר השרת מזהה בקשה עם סיומת aspx הוא מעביר את הבקשה מיד ל"מנוע" ASP.NET. • מנוע ה- ASP.NET מבצע אינטרפטציה לשפת הביניים (IL או MSIL) וממיר אותה לשפת מכונה (Native Code). • ה-CLR שומר את שפת המכונה של הדף. • אחרי שהקוד עבר הידור מתחיל שלב קישור קוד המקור ,תרגום פקדי השרת לתגיות HTML ועיבוד אירועי המערכת. • בסוף ASP.NET מתאימה את הקוד לסוג הדפדפן שבקש את הדף ושולחת אליו קובץ HTML.

מבוא ל- ASP.NET מבוא ל- ASP.NET מודל ההרצה (Request\Response) בקשת הדף בפעם הראשונה Server Client בקשה לדף aspx קבלת HTML MSIL NATIVE CODE INTERPRETER

מבוא ל- ASP.NET • מודל ההרצה (Request\Response) • כאשר הלקוח מבקש את הדף בפעם השנייה, ה-CLR בודק אם היה שינוי בקוד. אם כן asp.net תבצע אינרפטציה מחדש לדף. • אם בבקשה השניה לא היה שינוי בקוד, asp.net לא תבצע את האינרפטציה וזמן החזרת הדף ללקוח יקטן בצורה משמעותית.

מבוא ל- ASP.NET מודל ההרצה (Request\Response) בקשת הדף בפעם השנייה Server Client בקשה לדף aspx קבלת HTML X MSIL NATIVE CODE X INTERPRETER

מבוא ל- ASP.NET . • יצירת טפסי Web . • הפרדה בין קוד לרכיבי תצוגה – Code Behind. • טיפול באירועים. • קובץ קונפיגורציה – Web.Config. • פקדים. • פקדים מותאמים אישית. • שמירת מצב (State) .

יצירת טפסי Web • דפי aspx הם קבצי טקסט הכתובים בפורמט HTML. • דפי aspx מכילים טופס WEB (Web Form) אחד ויחיד. • בטופס WEB מעצבים את הדף על ידי הצבת פקדים. • הם מוצגים כמסמכי HTML בדפדפן. • אפשר לכתוב אותם בכל עורך טקסט רגיל כמו למשל בפנקס הרשימות. • כדי שהשרת ידע שמדובר בטופס aspx, חייבים לתת לו את הסיומת aspx.

יצירת טפסי Web • ישנן שני דרכים ליצירת טפסי Web: • כתיבת ידנית של קוד בעורך טקסט פשוט כמו פנקס הרשימות. • שימוש בסביבות עבודה ותוכנות מתוחכמות כמו Visual Studio .Net. • עדיף להשתמש בסביבת הפיתוח, מספקת כלים גראפיים שמקלים על תהליך העיצוב של הטופס - What You See Is What You Get (WYSIWYG)

יצירת טפסי Web כתיבה בעזרת פנקס הרשימות כתיבת הקוד הבא פנקס הרשימות : <%@ Page language="c#" %> <HTML> <HEAD> <title>Test page</title> </HEAD> <body> <form id="Form1" method="post" runat="server"> <asp:Label id="Label1" runat="server"> hello world </asp:Label> </form> </body> </HTML>

יצירת טפסי Web כתיבה בעזרת פנקס הרשימות - המשך • שמור את הקובץ בשם test.aspx על השרת המקומי במחשב שלך. • השרת המקומי נמצא בדרך כלל בכונן C בתיקיה: c:/Inetpub/wwwroot, במידה והוא נמצא בכונן אחר, שנה את השם שלו בהתאם. • הפעל את הדפדפן וכתוב את שם הקובץ וכתובת השרת המקומי בכתובת ה- URL. http://localhost/test.aspx • קוד זה יציג את המשפט "hello world”.

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

יצירת טפסי Web יצירת דף באמצעות Visual Studio.NET • יצירת פרויקט חדש מסוג ASP.NET WebApplication, והגדרת שם לפרוייקט.

יצירת טפסי Web יצירת דף באמצעות Visual Studio.NET - המשך • לחיצה על OK מציגה את העורך הגראפי (Designer) של VS.NET.

יצירת טפסי Web יצירת דף באמצעות Visual Studio.NET – המשך • בחלון ב- SolutionExplorer מופיעים מרכיבי הפרוייקט,נתעלם מכולם ונתמקד בקובץ WebForm1.aspx. • זהו קובץ שנוצר אוטומטית בעת יצירת הפרוייקט. ניתן להשתמש בו, לשנות לו את השם או למחוק אותו. • הקובץ מכיל טופס אחד כמו כל קבצי ה- aspx . • ניתן להוסיף לפרוייקט קבצי aspx נוספים.

יצירת טפסי Web יצירת דף באמצעות Visual Studio.NET – המשך הוספת קובץ aspx לפרוייקט: • לחיצה ימנית על שם הפרויקט ב- Solution Explorer . • בחירת Add ומהתפריט שנפתח בוחרים Add Web Form.

יצירת טפסי Web יצירת דף באמצעות Visual Studio.NET – המשך הוספת קובץ aspx לפרוייקט - המשך: • בחלון שנפתח משנים את שם ברירת המחדל של הקובץ ל-MyFirstWebForm.aspx.

יצירת טפסי Web יצירת דף באמצעות Visual Studio.NET – המשך הוספת קובץ aspx לפרוייקט - המשך: • כאשר נלחץ על Open נקבל טופס Web חדש. • כעת ניתן לגרור לטופס החדש שנוצר פקדים.

יצירת טפסי Web יצירת דף באמצעות Visual Studio.NET – המשך הוספת פקדים לטופס: • נגרור תיבת טקסט (TextBox) וכפתור (Button) מארגז הכלים שנמצא בצד שמאל של הטופס ונציב אותם בטופס.

יצירת טפסי Web יצירת דף באמצעות Visual Studio.NET – המשך • בתחתית הטופס קיימת תווית המאפשרת לעבור בין קוד ה- HTML לטופס העיצוב ולהפך. • כאשר נרצה לראות את קוד ה- HTML שנוצר נלחץ על המילה HTML שבתווית.

יצירת טפסי Web יצירת דף באמצעות Visual Studio.NET – המשך הוספת פקדים לטופס: • מקליקים הקלקה כפולה עם העכבר על הכפתור ובחלון שנפתח נכתוב את הקוד הבא (המסומן בכחול): private void Button1_Click(object sender, System.EventArgs e) { TextBox1.Text="hello word"; } החזרה לטופס העיצוב מתבצעת באמצעות התווית View Designer (התווית השנייה משמאל) או באמצעות SHIFT+F7.

Code Behind • דף aspx מורכב מרכיבי תצוגה המגדירים את חזות הטופס וקוד המטפל באירועי הפקדים. • רכיבי התצוגה מוגדרים באמצעות קוד HTML . • הטיפול באירועים מתבצע באמצעות שפת .NET כלשהיא (C#, VB.NET וכו') • ישנן שלוש שיטות להוספת קוד ל- Web Form: • Mixed Code: הקוד ותגיות ה- HTML נמצאים באותו קובץ ומעורבים זה בזה. • Inline Code: הקוד ותגיות ה- HTML נמצאים באותו קובץ אבל מופרדים אחד מהשני באמצעות התגית <SCRIPT>. • Code Behind: הקוד ותגיות ה- HTML נמצאים בקבצים נפרדים.

Code Behind • Code Behind הוא אחת האפשרויות החדשות ב- ASP.NET, פותחה על מנת להפריד את קוד המקור מקוד ה- HTML. • חלום רטוב של מפתחי ה- ASP הקלאסי. • מגדיר קובץ נפרד מקובץ ה- aspx לצורך טיפול באירועי הפקדים בטופס. • על פי טכניקה זו עיצוב הדף נקבע בקובץ aspx ונכתב בפורמט HTML , הטיפול באירועים מתבצע בקובץ נפרד ששמו זהה לשם קובץ ה- aspx אולם בתוספת סיומת תקנית של השפה בה הוא נכתב ( cs או vb). • לדוגמה : עיצוב הטופס נקבע בקובץ MyPage.aspx והקוד המטפל באירועי הפקדים נכתב בקובץ MyPage.aspx.cs .

<tags> Code Code Behind השוואה בין קוד שנמצא בתוך הקובץ לקוד שנמצא בנפרד מהקובץ (Code Behind). Code Behind Single File <tags> Code Form1.aspx Form1.aspx Form1.aspx.cs

Code Behind יתרונות • מפתחים (developers) ומעצבים (Designers) יכולים לעבוד בנפרד. המעצב מתמקד בעיצוב הוויזואלי של הדף, בזמן שהמפתח מתמקד בכתיבת הקוד בלבד. • אחרי הקומפילציה ה- Code Behind הופך לקובץ MSIL עם הסיומת dll ותוכנו מוסתר. • קריא וברור יותר. • תחזוקה קלה יותר, שינוי הקוד אינו משפיע על האלמנטים הויזואליים, ושינוי מראה הדף אינו משפיע על הקוד. • הקבצים קטנים ומסודרים יותר. • הקוד יכול להכתב בכל שפות הדוט.נט.

Code Behind • שני הקבצים, דף ה- aspxודף ה- code behind חייבים להיות מקושרים אחד לשני. • קישור שני הדפים נעשה באמצעות התגית @page שנקראת תגית הנחיית הדף (page directive). • אחרי קישור הקבצים הם יעבדו ביחד כיחידה אחת. קובץ ה-Code Behind WForm1.aspx <%@ Page language="c#" Codebehind="WForm1.aspx.cs" Inherits="WebApp1.WForm1" %>

Code Behind WebForm1.aspx WebForm1.aspx.cs

Code Behind • בסיום הכתיבה המהדר מקמפל את כל קבצי ה- Code Behind לקובץ dll אשר מותקן בספריה Bin שבעצמה נמצאת בספריה הוירטואלית. • כאשר הלקוח מבקש דף aspx (Request), ה-CLR מבצע אינרפטציה ל-dll מריץ אותו ומקשר אותו לדף ה- aspx המתאים, רק לאחר מכן מנוע ה- ASP.NET מסוגל לייצר את ה- HTML ולהחזיר אותו ללקוח (Response).

Parse Generate Code-behindclassfile ASPX Engine Request Gen’dPageClassFile ASPX File Instantiate ASPX File Request Response Page Class Response Instantiate, process and render Code Behind

טיפול באירועים האירוע Page_Load • האירוע Page_Load מתרחש אוטומטית בכל פעם שהדף נטען, בין אם זה כתוצאה של בקשה בפעם הראשונה של הדף או כתוצאה של תגובה של השרת לאירוע שהתרחש. • הוא מתרחש רק אחרי אתחול הדף ויצירת פקדי השרת, כדי ש- ASP.NET תוכל לטפל באירועים שלהם. • תפקידו לבצע איתחולים לדף ולפקדים. private void Page_Load(object sender,System.EventArgs e) { . . . }

Page_Init Page_Load Control events Textbox1_Changed Change Events Button1_Click Action Events Page_Unload Page is disposed טיפול באירועים האירוע Page_Load- המשך

טיפול באירועים Page.IsPostBack • בכל בקשה (גם בבקשה חוזרת של אותו הדף) נוצר דף חדש. • האירוע Page_Load מתרחש בכל טעינה של הדף, לכן הקוד שנמצא באירוע הזה מופעל כל פעם מחדש. • בקשה חוזרת של אותו הדף מכונה (Round Trip). • לעיתים נרצה לבצע איתחולים רק בטעינה הראשונה של הדף ולהימנע מהם בבקשות חוזרות של אותו הדף. • בדף מוגדר מאפיין בוליאני בשם IsPostBack, ASP.NET משתמשת במאפיין זה על מנת לבדוק אם הוא נדרש בפעם הראשונה או לא (Round Trip). • כאשר הלקוח מבקש את הדף בפעם הראשונה, המאפיין IsPostBack יקבל את הערך false. מהבקשה השניה ואילך ערכו true.

ASP.NET

ASP.NET

Presentation Transcript

ASP.NET

ASP.NET

ASP.NET

Asp.net

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.Net

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET