ASP.net Web Pages

ASP.Net Web Pages
natankrasney@gmail.com
1

?Asp.Net Web Pages ‫זה‬ ‫מה‬
‫באינטרנט‬ ‫ואפליקציות‬ ‫אתרים‬ ‫ליצירת‬ ASP.Net ‫של‬ ‫המודלים‬ ‫אחד‬ ‫זהו‬
‫שרת‬ ‫בצד‬ ‫קוד‬ ‫עם‬ HTML , CSS , Javascript ‫בקלות‬ ‫לשלב‬ ‫שמאפשר‬ ‫מודל‬ ‫זה‬
PHP ‫של‬ ‫למודל‬ ‫דומה‬ ASP.Net Web Pages ‫של‬ ‫המודל‬
Asp.Net ‫מכיר‬ ‫שלא‬ ‫למי‬ ‫שמתאים‬ ‫מודל‬
2

Asp.Net Web Pages ‫פרויקט‬ ‫יצירת‬
: ‫הבאה‬ ‫בצורה‬ ‫ליצור‬ ‫ניתן‬ Web Pages ‫עם‬ ‫מינימלי‬ ‫פרויקט‬
File->New->Project->ASP.Net Web Application(.Net Framework)->Empty
: cshtml ‫סיומת‬ ‫עם‬ ‫דף‬ ‫מכניסים‬ ‫ולתוכו‬
Web Page (Razor v3)
C# ‫קוד‬ ‫בתוך‬ breakpoint ‫לשים‬ ‫אפשר‬ ‫כזה‬ ‫בפרויקט‬
3

cshtml ‫לקובץ‬ ‫דוגמה‬
@{ string csharpText = "hello asp.net"; }
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>@csharpText</p>
</body>
</html>
4
‫נכתב‬ Razor ‫ב‬ ‫קוד‬ ‫בלוק‬
C# ‫ב‬
‫בתוך‬ C# ‫במשתנה‬ ‫שימוש‬
‫לפניו‬ @ ‫עם‬ ‫נעשה‬ HTML
!!!!

Razor ‫זה‬ ‫מה‬
HTML ‫דף‬ ‫לתוך‬ ‫השרת‬ ‫בצד‬ ‫קוד‬ ‫להכנסת‬ syntax - ‫תחביר‬ ‫זה‬ Razor
‫הקוד‬ ‫את‬ ‫מבצע‬ ‫הוא‬ ‫קודם‬ ‫אז‬ cshtml ‫קובץ‬ ‫ז"א‬ razor ‫בעזרת‬ ‫שנכתב‬ ‫קובץ‬ ‫בונה‬ ‫השרת‬ ‫כאשר‬
.‫הקובץ‬ ‫את‬ ‫לדפדפן‬ ‫שולח‬ ‫הוא‬ ‫כך‬ ‫אחר‬ ‫ורק‬ Razor ‫ב‬ ‫שנכתב‬
(Razor ‫ב‬ ‫קוד‬ ‫בו‬ ‫)אין‬ !!! ‫נקי‬ HTML ‫קובץ‬ ‫הוא‬ ‫מקבל‬ ‫שהדפדפן‬ ‫מה‬
5

Razor ‫תחביר‬
‫כאלה‬ ‫כמה‬ ‫יכולים‬ .C# ‫ב‬ ‫ונכתב‬ @{ } ‫בעזרת‬ ‫מוגדר‬ Razor ‫ב‬ ‫קוד‬ ‫בלוק‬
‫בתחילתם‬ @ ‫עם‬ ‫מסומנים‬ HTML ‫ה‬ ‫בתוך‬ ‫ופונקציות‬ ‫משתנים‬
csharp ‫כתוב‬ ‫קוד‬ ‫של‬ ‫שילוב‬ ‫שזה‬ cshtml ‫הוא‬ Razor ‫של‬ ‫תחביר‬ ‫בעזרת‬ ‫שנכתב‬ ‫הקובץ‬ ‫סיומת‬
HTML ‫בתוך‬
‫או‬ (C# ‫של‬ debug ‫יאפשר‬ ‫)לא‬ ‫ריק‬ ASP.Net ‫מסוג‬ WebSite ‫מפרויקט‬ ‫כחלק‬ ‫להרצה‬ ‫דוגמאות‬
:Visual Studio ‫ב‬ Razor
●WebPageSimpleRazorWithArray.cshtml
●WebPageSimpleRazorWithList.cshtml
6

‫השרת‬ ‫על‬ ‫קבצים‬ ‫עם‬ ‫עבודה‬
.‫וקבצים‬ ‫מספריות‬ ‫מורכב‬ ‫אינטרנט‬ ‫אתר‬
‫הדיסק‬ ‫על‬ ‫מסוים‬ ‫במקום‬ ‫נמצאת‬ (default.cshtml ‫הקובץ‬ ‫בה‬ ‫שנמצא‬ ‫)זו‬ ‫ביותר‬ ‫העליונה‬ ‫הספריה‬
~ ‫הוא‬ ‫השרת‬ ‫על‬ root‫ה‬ ‫של‬ ‫הוירטואלי‬ ‫הייצוג‬ .root ‫שמכונה‬
‫הבאה‬ ‫בצורה‬ ‫נגדיר‬ ‫אז‬ Images ‫לספריה‬ ‫לדוגמא‬ ‫בשרת‬ ‫לגשת‬ ‫נרצה‬ ‫אם‬
@{string virtualImageFolder = "~/Images";string physicalImageFolder = Server.MapPath(virtualImageFolder);}
<html><head></head>
<body>
<p>@physicalImageFolder</p>
</body>
</html>
7

‫בשרת‬ ‫מקובץ‬ ‫לקריאה‬ ‫דוגמה‬
@{
string virtualFile = "~/storage/books.txt";
string physicalFile = Server.MapPath(virtualFile);
string[] arFileLines = File.ReadAllLines(physicalFile);
}
<!DOCTYPE html><html><head>
<title>Book store</title>
</head>
<body>
<ul>
@foreach (string currentBook in arFileLines)
{
<li>@currentBook</li>
}
</ul>
</body></html>
8

‫בשרת‬ ‫לקובץ‬ ‫לכתיבה‬ ‫דוגמה‬
@{
string virtualBooksFile = "~/storage/books.txt";
string physicalBooksFile = Server.MapPath(virtualBooksFile);
string[] arFewBooks = {"Lion King" ,"Harry Potter" , "Bible"};
Random rand = new Random();int indexArFewBooks = rand.Next(0, arFewBooks.Length);
using(StreamWriter writer = File.AppendText(physicalBooksFile) ){
writer.WriteLine(arFewBooks[indexArFewBooks]);}}
<html><head></head><body>
<p>Book is added</p>
</body></html>
9

Page layout - ‫הדף‬ ‫ארגון‬
‫בעזרת‬ ‫זאת‬ ‫לממש‬ ‫ניתן‬ footer ‫אותו‬ header ‫אותו‬ : ‫דפים‬ ‫של‬ ‫אחידות‬ ‫יש‬ ‫רבים‬ ‫באתרים‬
: RenderPage ‫הפונקציה‬
<html>
<body>
@RenderPage("header.cshtml")
<p> PUT HERE ALL THE BODY</p>
@RenderPage("footer.cshtml")
</body>
</html>
10
‫שמופיע‬ ‫תוכן‬
‫בראש‬ ‫תמיד‬
‫הדף‬
‫שמופיע‬ ‫תוכן‬
‫בתחתית‬ ‫תמיד‬
‫הדף‬
‫המחלקה‬ ‫של‬ ‫פונקציה‬
‫את‬ ‫מציגה‬ ‫אשר‬ WebPage
‫הדף‬ ‫תוכן‬

‫המשך‬ - ‫הדף‬ ‫ארגון‬
WebPage ‫המחלקה‬ ‫של‬ Layout ‫והמאפיין‬ RenderBody ‫הפונקציה‬ ‫בעזרת‬ ‫גם‬ ‫לממש‬ ‫וניתן‬
11
Layout.cshtml Some .cshtml file in the project
<html>
<body>
Put here header
@RenderBody()
<p>© 2017 NYNK. All rights
reserved.</p>
</body>
</html>
@{Layout="Layout.cshtml";}
<p>
Some text of page
</p>
header
footer

WebPage ‫מחלקה‬
WebPage ‫המחלקה‬ ‫של‬ ‫אובייקט‬ ‫ע"י‬ ‫בדפדפן‬ ‫מיוצג‬ cshtml ‫סיומת‬ ‫עם‬ ‫דף‬ ‫ז"א‬ Razor ‫דף‬
‫כאן‬ ‫מופיע‬ ‫המחלקה‬ ‫של‬ ‫התיעוד‬
‫כמו‬ ‫חשובים‬ ‫ומאפיינים‬ RenderPage , RenderBody ‫כמו‬ ‫קודם‬ ‫שראינו‬ ‫פונקציות‬ ‫יש‬ ‫למחלקה‬
Request , Response , Server , Session, Layout , IsPost
12

‫לשרת‬ ‫שהגיע‬ ‫בקשה‬ ‫מייצג‬ ‫אשר‬ WebPage ‫המחלקה‬ ‫של‬ ‫מאפיין‬ ‫זהו‬
HttpRequestBase ‫המחלקה‬ ‫של‬ ‫אובייקט‬ ‫הוא‬ ‫המאפיין‬
: ‫כמו‬ ‫חשובים‬ ‫מאפיינים‬ ‫יש‬ ‫הזו‬ ‫למחלקה‬
●method ‫ה‬ ‫כאשר‬ ‫טופס‬ ‫דרך‬ ‫מהקליינט‬ ‫שנשלח‬ key , value ‫אוסף‬ ‫את‬ ‫מחזיק‬ ‫אשר‬ Form
:post ‫הוא‬
○form ‫אלמנט‬ ‫בתוך‬ input ‫אלמנט‬ ‫של‬ name ‫המאפיין‬ ‫של‬ ‫הערך‬ ‫זה‬ - key
○(input ‫אלמנט‬ ‫של‬ value ‫)מאפיין‬ ‫בטופס‬ input ‫לאלמנט‬ ‫המשתמש‬ ‫שהכניס‬ ‫הערך‬ ‫זה‬ - value
●‫מגיע‬ ‫אשר‬ QueryString ‫שמיצגים‬ key , value ‫אוסף‬ ‫את‬ ‫מחזיק‬ ‫אשר‬ QueryString
:get ‫הוא‬ method ‫ה‬ ‫כאשר‬ ‫טופס‬ ‫דרך‬ ‫לדוגמא‬ ‫מהקליינט‬ ‫לשרת‬
○form ‫אלמנט‬ ‫בתוך‬ input ‫אלמנט‬ ‫של‬ name ‫המאפיין‬ ‫של‬ ‫הערך‬ ‫זה‬ - key
○(input ‫אלמנט‬ ‫של‬ value ‫)מאפיין‬ ‫בטופס‬ input ‫לאלמנט‬ ‫המשתמש‬ ‫שהכניס‬ ‫הערך‬ ‫זה‬ - value
●
Request ‫מאפיין‬
13

‫לשרת‬ ‫מהקליינט‬ ‫מידע‬ ‫להעברת‬ form - ‫בטופס‬ ‫שימוש‬
‫השימוש‬ .‫לשרת‬ ‫המשתמש‬ ‫שמכניס‬ ‫מידע‬ ‫להעביר‬ ‫מאפשר‬ HTML ‫על‬ ‫בקורס‬ ‫למדנו‬ ‫אותו‬ form ‫אלמנט‬
: ‫לדוגמא‬ ‫נרחב‬ ‫מאוד‬ ‫הוא‬ ‫בטפסים‬
●‫לאתר‬ ‫רישום‬ ‫טופס‬
●Login - ‫לאתר‬ ‫כניסה‬ ‫טופס‬
●‫באינטרנט‬ ‫לקנייה‬ ‫טופס‬
●‫ועוד‬
‫הכפתור‬ .‫לשרת‬ ‫המידע‬ ‫את‬ ‫שולחת‬ ‫עליו‬ ‫שלחיצה‬ ‫וכפתור‬ ‫נתונים‬ ‫לקליטת‬ input ‫אלמנטי‬ ‫מכיל‬ from ‫אלמנט‬
.submit ‫ערך‬ ‫בעל‬ type ‫מאפיין‬ ‫עם‬ input ‫אלמנט‬ ‫כלל‬ ‫בדרך‬ ‫הוא‬
: ‫חשובים‬ ‫מאפינים‬ ‫שני‬ ‫יש‬ form ‫לאלמנט‬
●action
●method
14

form ‫אלמנט‬ ‫של‬ action ‫מאפיין‬
.‫לשרת‬ ‫מגיע‬ ‫בטופס‬ ‫המידע‬ ‫כאשר‬ ‫לבצע‬ ‫שצריך‬ ‫הפעולה‬ ‫את‬ ‫מגדיר‬ action ‫מאפיין‬
... , php , aspx , html , cshtml : ‫הבאה‬ ‫הסיומת‬ ‫עם‬ ‫בשרת‬ ‫לדף‬ ‫נשלח‬ ‫הטופס‬ ‫כלל‬ ‫בדרך‬
.‫הטופס‬ ‫נמצא‬ ‫בו‬ ‫הדף‬ ‫כמו‬ ‫ספריה‬ ‫באותה‬ ‫שנמצא‬ login.php ‫לדף‬ ‫תועבר‬ ‫הבקשה‬ ‫לדוגמא‬
<form method="post" action="login.php">
.root ‫ב‬ ‫שנמצא‬ register.cshtml ‫לדף‬ ‫תועבר‬ ‫הבקשה‬ ‫לדוגמא‬
<form method="get" action="/register.cshtml">
(‫מופיע‬ ‫לא‬ action ‫אם‬ ‫גם‬ ‫כך‬ ‫)יתנהג‬ ‫הטופס‬ ‫נמצא‬ ‫בו‬ ‫דף‬ ‫לאותו‬ ‫תועבר‬ ‫הבאה‬ ‫הבקשה‬
<form method="get" action="">
15

form ‫אלמנט‬ ‫של‬ method ‫מאפיין‬
HTTP ‫בפרוטוקול‬ ‫מושג‬ - http request method ‫מגדיר‬ form ‫אלמנט‬ ‫של‬ method ‫מאפיין‬
AJAX ‫על‬ ‫בפרק‬ ‫קודם‬ ‫בזה‬ ‫)נפגשנו‬ get/ post ‫הם‬ method ‫ב‬ ‫לשימוש‬ ‫המקובלים‬ ‫הערכים‬ ‫שני‬
(Javascript ‫בקורס‬
16
GET POST
‫בשרת‬ ‫משאב‬ ‫על‬ ‫מידע‬ ‫מבקשים‬ ‫כאשר‬ ‫רק‬ ‫בשימוש‬ ‫לדוגמה‬ ‫משאב‬ ‫על‬ ‫עיבוד‬ ‫מבצע‬ ‫השרת‬ ‫כאשר‬ ‫בשימוש‬
‫שלו‬ ‫מחיקה‬ , ‫שלו‬ ‫עדכון‬ , ‫שלו‬ ‫שמירה‬
‫הדפדפן‬ ‫של‬ ‫בהיסטוריה‬ ‫נשארת‬ ‫הבקשה‬ ‫הדפדפן‬ ‫של‬ ‫בהיסטוריה‬ ‫נשארת‬ ‫לא‬ ‫הבקשה‬
‫מופיע‬ ‫זה‬ ‫כי‬ ‫רגיש‬ ‫מידע‬ ‫מעבירים‬ ‫כאשר‬ ‫לשימוש‬ ‫אסור‬
‫בדפדפן‬ ‫הכתובת‬ ‫בשורת‬
‫בשורת‬ ‫מופיע‬ ‫לא‬ ‫זה‬ ‫כי‬ ‫רגיש‬ ‫מידע‬ ‫בהעברת‬ ‫לשימוש‬ ‫מותר‬
‫בדפדפן‬ ‫הכתובת‬
‫מוגבל‬ ‫הבקשה‬ ‫גודל‬ ‫הבקשה‬ ‫גודל‬ ‫על‬ ‫הגבלה‬ ‫אין‬

post ‫עם‬ ‫בטופס‬ ‫לשימוש‬ ‫דוגמה‬
<body>
@{if (IsPost){
string age = Request.Form["personAge"]; string name = Request.Form["personName"];
<p>You entered: <br />Name: @name <br />Age: @age</p>
}else{
<form method="post" action="">
Person Name:<br /><input type="text" name="personName" /><br />Person Age:<br />
<input type="number" name="personAge" min="0" max="120" step="1"/><br />
<input type="submit" value="Submit" />
</form>}}</body>
17
‫בשם‬ ‫דף‬
example.cshtml

post - ‫הקודמת‬ ‫לדוגמא‬ ‫הסבר‬
‫לקבל‬ ‫בקשה‬ ‫לשרת‬ ‫תגיע‬ Submit ‫על‬ ‫ונלחץ‬ 11 ‫גיל‬ Avi ‫שם‬ ‫לדוגמא‬ ‫המידע‬ ‫את‬ ‫שנמלא‬ ‫לאחר‬
key,value‫ה‬ ‫את‬ ‫בדפדפן‬ ‫הכתובת‬ ‫בשורת‬ ‫רואים‬ ‫ולא‬ post ‫עם‬ ‫שמגיע‬ example.cshtml ‫את‬
‫מהקליינט‬ ‫שהגיעו‬
18
‫דפדפן‬ ‫שרת‬
‫עם‬ ‫מגיע‬ Request ‫ה‬ . example.cshtml ‫הדף‬ ‫את‬ ‫לקבל‬ ‫בקשה‬
Request.Form ‫ל‬ ‫ונגשים‬ true ‫הוא‬ IsPost ‫ז"א‬ post
‫את‬ ‫ומייצג‬ ‫בדפדפן‬ ‫שמוצג‬ HTML ‫קובץ‬ ‫היא‬ ‫מהשרת‬ ‫התשובה‬
true ‫שהוא‬ IsPost ‫עבור‬ example.cshtml
example.cshtml ‫ב‬ ‫הטופס‬ ‫של‬ action‫שה‬ ‫בגלל‬ ‫זה‬
‫הנוכחי‬ ‫לקובץ‬ ‫לתת‬ ‫היא‬ ‫המחדל‬ ‫ברירת‬ ‫ולכן‬ ‫ריק‬ ‫הוא‬
‫בבקשה‬ ‫לטפל‬
‫הטופס‬ ‫של‬ method‫שה‬ ‫בגלל‬ ‫זה‬
post ‫הוא‬ example.cshtml

get ‫עם‬ ‫בטופס‬ ‫לשימוש‬ ‫דוגמה‬
<body>
@{
if (Request.QueryString.Count > 0)
{
string age = Request.QueryString["personAge"];string name = Request.QueryString["personName"];
<p>You entered: <br />Name: @name <br />Age: @age</p>
}
else
{
<form method="get" action="">
Person Name:<br /><input type="text" name="personName" /><br />Person Age:<br />
<input type="number" name="personAge" min="0" max="120" step="1" /><br />
<input type="submit" value="Submit" />
</form>
}
}
</body>
19
‫בשם‬ ‫דף‬
exampleGet.cshtml

get - ‫הקודמת‬ ‫לדוגמא‬ ‫הסבר‬
‫לקבל‬ ‫בקשה‬ ‫לשרת‬ ‫תגיע‬ Submit ‫על‬ ‫ונלחץ‬ 11 ‫גיל‬ Avi ‫שם‬ ‫לדוגמא‬ ‫המידע‬ ‫את‬ ‫שנמלא‬ ‫לאחר‬
key,value‫ה‬ ‫את‬ ‫בדפדפן‬ ‫הכתובת‬ ‫בשורת‬ ‫רואים‬ ‫וכן‬ get ‫עם‬ ‫שמגיע‬ exampleGet.cshtml ‫את‬
‫מהקליינט‬ ‫שהגיעו‬
20
‫דפדפן‬ ‫שרת‬
Request ‫ה‬ . exampleGet.cshtml ‫הדף‬ ‫את‬ ‫לקבל‬ ‫בקשה‬
Request.QueryString ‫ל‬ ‫ניגשים‬ ‫ולכן‬ get ‫עם‬ ‫מגיע‬
‫את‬ ‫ומייצג‬ ‫בדפדפן‬ ‫שמוצג‬ HTML ‫קובץ‬ ‫היא‬ ‫מהשרת‬ ‫התשובה‬
Request.QueryString.Count > 0 ‫בו‬ ‫במקרה‬ exampleGet.cshtml
‫ב‬ ‫הטופס‬ ‫של‬ action‫שה‬ ‫בגלל‬ ‫זה‬
‫המחדל‬ ‫ברירת‬ ‫ולכן‬ ‫ריק‬ ‫הוא‬ exampleGet.cshtml
‫בבקשה‬ ‫לטפל‬ ‫הנוכחי‬ ‫לקובץ‬ ‫לתת‬ ‫היא‬
‫הטופס‬ ‫של‬ method‫שה‬ ‫בגלל‬ ‫זה‬
get ‫הוא‬ example.cshtml

server ‫וגם‬ client ‫פשוטה‬ ‫ולידציה‬ - ‫טפסים‬
‫הקורסים‬ ‫באתר‬ ASP.Net ‫קורס‬ "‫שרת‬ ‫ובצד‬ ‫קלינט‬ ‫בצד‬ ‫פשוטה‬ ‫"ולידציה‬ ‫שיעור-סרטון‬ ‫ראה‬
WebPages/WebPageSimpleClientSideAndServerSideValidation.cshtml ‫מופיע‬ ‫הקוד‬
21

client validation - ‫טפסים‬
: ‫רמות‬ ‫בכמה‬ ‫לעשות‬ ‫ניתן‬ ‫קליינט‬ ‫בצד‬ (‫תקינות‬ ‫)בדיקת‬ ‫וולידציה‬
●:input ‫אלמנט‬ ‫עבור‬ ‫לדוגמא‬ HTML ‫ברמת‬
○required ‫מאפיין‬
○min,max,step ‫מאפינים‬ : type numeric
○.(‫כאן‬ ‫וגם‬ ‫כאן‬ Regular Expression ‫על‬ ‫כללי‬ ‫הסבר‬ ‫)ראה‬ Regular Expression ‫ב‬ ‫ושימוש‬ pattern ‫מאפיין‬
‫בעזרת‬ ‫הולידציה‬ ‫של‬ ‫מחדל‬ ‫ברירת‬ ‫ההודעה‬ ‫את‬ ‫לשנות‬ ‫ניתן‬
oninvalid="setCustomValidity(' put your validation message here')”
●javascript ‫ברמת‬
○WebPage_onsubmitValidation.cshtml ‫דוגמה‬ ‫ראה‬ - onsubmit ‫המאורע‬ ‫באמצעות‬
○‫כאן‬ ‫לדוגמא‬ ‫ראה‬ jQuery.Validation ‫לדוגמא‬ ‫חיצונית‬ ‫ספריה‬ ‫בעזרת‬
‫שרתים‬ ‫מול‬ ‫גם‬ ‫ליישמם‬ ‫וניתן‬ ASP.Net ‫ל‬ ‫ספציפיות‬ ‫אינן‬ ‫כאן‬ ‫שהוצגו‬ ‫הולידציה‬ ‫גישות‬ ‫כל‬ : ‫הערה‬
‫וכולי‬ java ‫או‬ PHP ‫ב‬ ‫שנכתבו‬
22

server validation - ‫טפסים‬
23
‫להיות‬ ‫יכולה‬ ‫עדיין‬ ‫הקליינט‬ ‫בצד‬ ‫הטופס‬ ‫על‬ (‫תקינות‬ ‫)בדיקת‬ ‫וולידציה‬ ‫ביצוע‬ ‫שלמרות‬ ‫להבין‬ ‫חשוב‬
: ‫הבאים‬ ‫במצבים‬ ‫יקרה‬ ‫זה‬ .‫לשרת‬ ‫יגיע‬ ‫תקין‬ ‫לא‬ ‫שמידע‬ ‫סיטואציה‬
●‫בעזרת‬ ‫)לדוגמא‬ ‫הקליינט‬ ‫של‬ ‫בדפדפן‬ disable ‫במצב‬ ‫נמצא‬ Javascript
(QuickJavascriptSwitcher
●Postman ‫בשם‬ chrome ‫תוסף‬ ‫באמצעות‬ (‫הטופס‬ ‫דרך‬ ‫)לא‬ ‫ישירות‬ ‫לשרת‬ ‫פונה‬ ‫הקליינט‬
‫השרת‬ ‫בצד‬ ‫גם‬ ‫ולידציה‬ ‫תמיד‬ ‫לבצע‬ ‫צריך‬ ‫ולכן‬ ‫השרת‬ ‫בצד‬ ‫הולידציה‬ ‫את‬ ‫עוקפים‬ ‫המצבים‬ ‫שני‬
‫השגיאה‬ ‫בציון‬ ‫תקין‬ ‫לא‬ ‫הוא‬ ‫אם‬ ‫הטופס‬ ‫את‬ ‫לקליינט‬ ‫ולהחזיר‬ (‫קליינט‬ ‫צד‬ ‫ולידצית‬ ‫על‬ ‫)בנוסף‬
ValidationHelper ‫באמצעות‬ ‫או‬ Request.Form ‫ב‬ ‫שמגיע‬ ‫המידע‬ ‫פי‬ ‫על‬ ‫וזאת‬
‫הקורסים‬ ‫באתר‬ ASP.Net ‫בקורס‬ "onsubmit ‫בעזרת‬ ‫קליינט‬ ‫צד‬ ‫"ולידציה‬ ‫שיעור‬ ‫ראה‬

server validation : ValidationHelper - ‫טפסים‬
: ‫כמו‬ ‫פונקציות‬ ‫בעזרת‬ ‫השרת‬ ‫בצד‬ ‫ולידציה‬ ‫לבצע‬ ‫מאפשרת‬ ‫אשר‬ ASP.Net ‫ב‬ ‫מחלקה‬ ‫זו‬
IsValid , RequireField , Add
: ‫בעזרת‬ ‫נעשית‬ ‫בקליינט‬ ‫נוחה‬ ‫בצורה‬ ‫שרת‬ ‫צד‬ ‫ולדיציה‬ ‫שגיאת‬ ‫הצגת‬
Html.ValidationSummary , Html.ValidationSummary
: (asp.net ‫מפרויקט‬ ‫כחלק‬ ‫)להרצה‬ ValidationHelper ‫באמצעות‬ ‫שרת‬ ‫צד‬ ‫לולידצית‬ ‫דוגמא‬
WebPages/WebPageRazorServerValidation.cshtml
24

WebGrid helper
ASP.Net ‫של‬ Web Helpers ‫מה‬ ‫אחד‬ ‫הוא‬ WebGrid
‫מסוג‬ container - ‫נתונים‬ ‫של‬ ‫אוסף‬ ‫הוא‬ ‫שלו‬ ‫לבנאי‬ ‫כשהפרמטר‬ ‫בטבלה‬ ‫המידע‬ ‫את‬ ‫מציג‬
‫באלה‬ ‫וכיוצא‬ ‫רשימה‬ , ‫מערך‬ ‫לדוגמא‬ IEnumerable
‫דפים‬ ‫של‬ ‫דפדוף‬ ‫מאפשר‬
‫גישה‬ ‫הרשאת‬ ‫עם‬ properties ‫עם‬ ‫מחלקה‬ ‫של‬ ‫אובייקטים‬ ‫הם‬ container ‫ב‬ ‫הנתונים‬ ‫כלל‬ ‫בדרך‬
Id , Description , Name : ‫לדוגמא‬ public
‫הטבלה‬ ‫של‬ header‫ה‬ ‫על‬ ‫בלחיצה‬ ‫מיון‬ ‫מאפשר‬
25

WebGrid helper ‫דוגמא‬
@using ClassLibrary1
@{
List<Class1> list = new List<Class1>();
for (int i = 0; i < 10; i++){
list.Add(new Class1{Id = i,Description = string.Format("Desc{0}",i) ,Name = string.Format("Name{0}", i)});
}
WebGrid grid = new WebGrid(list);
}
<html><body>
@grid.GetHtml()
</body></html>
26
class ‫מסוג‬ ‫בפרויקט‬ ‫מוגדרת‬ ‫אשר‬ ‫מחלקה‬ ‫היא‬ Class1
‫יש‬ ‫למחלקה‬ .ClassLibrary1 ‫בשם‬ namespace ‫בעל‬ library
‫לעשות‬ ‫צריך‬ .Id , Description , Name ‫בשם‬ properties
‫בו‬ class library ‫הפרויקט‬ ‫אל‬ asp.net ‫ה‬ ‫מפרויקט‬ reference
‫המחלקה‬ ‫מוגדרת‬

Chart helper
ASP.Net ‫של‬ ‫ים‬ - helper ‫מה‬ ‫אחד‬
‫גרפית‬ ‫בצורה‬ ‫מידע‬ ‫מציג‬ Chart ‫ואילו‬ ‫בטבלה‬ ‫מידע‬ ‫מציג‬ WebGrid
‫באלה‬ ‫וכיוצא‬ Bar , Line , Pie : ‫שונות‬ ‫בצורות‬ ‫גרפים‬ ‫ליצור‬ ‫אפשר‬
27

Chart helper - ‫דוגמא‬
@{
Chart myChart = new Chart(width: 600, height: 400);
myChart .AddTitle("Page Hits");
myChart .AddSeries(chartType: "column",
xValue: new[] { "Home", "Compute", "History"},
yValues: new[] { "12", "4", "6" });
myChart.Write();
}
28
‫רוחב‬ ‫עם‬ Chart ‫הגדרת‬
400 ‫וגובה‬ ‫פיקסלים‬ 600
‫פיקסלים‬
‫מהדף‬ Image ‫יוצר‬
‫כחלק‬ ‫לקליינט‬ ‫ומחזיר‬
HTML ‫מדף‬
column ‫הוא‬ ‫הגרף‬ ‫סוג‬
‫אפשר‬ .‫עמודות‬ ‫קרי‬
‫בצורות‬ ‫להשתמש‬ ‫לדוגמא‬
pie ‫כמו‬ ‫אחרות‬

Response
‫לשרת‬ ‫שהגיע‬ ‫בקשה‬ ‫מייצג‬ ‫אשר‬ WebPage ‫המחלקה‬ ‫של‬ ‫מאפיין‬ ‫זהו‬
HttpResponseBase ‫המחלקה‬ ‫של‬ ‫אובייקט‬ ‫הוא‬ ‫המאפיין‬
: ‫כמו‬ ‫חשובות‬ ‫פונקציות‬ ‫יש‬ ‫הזו‬ ‫למחלקה‬
●‫בהמשך‬ ‫זו‬ ‫במצגת‬ ‫בדוגמה‬ ‫בזה‬ ‫)נשתמש‬ ‫בשרת‬ ‫אחר‬ ‫לדף‬ ‫לעבור‬ ‫מאפשרת‬ ‫אשר‬ Redirect
(session ‫בנושא‬
●‫בהמשך‬ ‫זו‬ ‫במצגת‬ ‫בדוגמה‬ ‫בזה‬ ‫)נשתמש‬ ‫לקליינט‬ ‫תשובה‬ ‫של‬ ‫כתיבה‬ ‫מאפשרת‬ ‫אשר‬ Write
(AJAX ‫בנושא‬
29

Session
.‫באתר‬ ‫המשתמש‬ ‫על‬ ‫ספציפי‬ ‫מידע‬ ‫לשמור‬ ‫מאפשר‬ Session
‫מידע‬ ‫מעט‬ ‫עליו‬ ‫לשמור‬ ‫חשוב‬ ‫ולכן‬ ‫השרת‬ ‫בזיכרון‬ ‫נשמר‬ Session
WebPage ‫המחלקה‬ ‫של‬ properties ‫מה‬ ‫אחד‬ ‫הוא‬ Session ‫ש‬ ‫הקודמים‬ ‫השקפים‬ ‫באחד‬ ‫ראינו‬
HttpSessionStateBase ‫המחלקה‬ ‫באמצעות‬ Asp.Net ‫ב‬ ‫מיוצג‬ Session
‫שם‬ ‫לדוגמא‬ .‫הנוכחי‬ ‫המשתמש‬ ‫על‬ key,value ‫של‬ ‫בצורה‬ ‫מידע‬ ‫שמירה‬ ‫מאפשר‬ Session
.‫מוצלחת‬ Login ‫פעולת‬ ‫לאחר‬ ‫משתמש‬
‫דקות‬ 20 ‫היא‬ ‫שלו‬ ‫המחדל‬ ‫ברירת‬ ‫שערך‬ ‫מוגבל‬ ‫זמן‬ ‫בתוקף‬ ‫נמצא‬ ASP.Net‫ב‬ session‫ה‬
30
object
‫מחרוזת‬
‫בלבד‬

Session - ‫דוגמא‬
<body>
@{
if (IsPost){
Session["name"] = Request.Form["userName"];
Response.Redirect("WelcomeAllUsers.cshtml");}
else {<form action="" method="post">
User name <input type="text" name="userName"
required=""/><br/>
<input type="submit" value="Login"/>
</form>}}
</body>
31
@{
string userFromSession = "";
if (Session["name"] != null){
userFromSession = (string)Session["name"];}}
<html><head><title></title>
</head>
<body>
<p>Welcome user : @userFromSession</p>
</body>
</html>
WelcomeAllUsers.cshtml
‫של‬ Key
session‫ה‬
‫ה‬ ‫של‬ Key
form

AJAX ‫באמצעות‬ ‫לשרת‬ ‫פניה‬
AJAX ‫על‬ ‫בפרק‬ Javascript ‫על‬ ‫בקורס‬ ‫שלמדנו‬ ‫כמו‬ ‫נעשית‬ ‫לשרת‬ ‫הגישה‬
Response.Write ‫באמצעות‬ ‫נעשית‬ ‫השרת‬ ‫של‬ ‫התשובה‬
: ‫דוגמה‬ ‫מופיעה‬ ‫הבא‬ ‫בשקף‬
●SimpleAjaxRequest.cshtml ‫בקובץ‬ ‫מופיעה‬ ‫הבקשה‬
●SimpleResponseToAjax.cshtml ‫קובץ‬ ‫מופיעה‬ ‫התשובה‬
‫הקורסים‬ ‫אתר‬ ‫ב‬ Asp.Net ‫בקורס‬ "‫מהשרת‬ ‫ותשובה‬ AJAX ‫"בקשת‬ - ‫שיעור‬ ‫יש‬ ‫כן‬ ‫וכמו‬
32

AJAX ‫באמצעות‬ ‫לשרת‬ ‫לפניה‬ ‫דוגמא‬
<body>
<button type="button" onclick="loadDoc()">Request data using AJAX</button>
<p id="demo"></p><script>
function loadDoc(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("demo").innerHTML = this.responseText;}};
xhttp.open("GET", "SimpleResponseToAjax.cshtml");
xhttp.send();}</script></body>
33
@{
Response.Write("this is SimpleResponseToAjax
response");
}
‫לשרת‬ ‫בקשה‬
‫באמצעות‬
AJAX
SimpleResponseToAjax.cshtml
‫תשובה‬ ‫מחזיר‬ ‫אשר‬
client server

QueryString ‫עם‬ AJAX ‫באמצעות‬ ‫לשרת‬ ‫פניה‬
‫מגביל‬ ‫וזה‬ ‫בלבד‬ url ‫עם‬ ‫לשרת‬ ‫פנינו‬ ‫הקודמת‬ ‫בדוגמה‬
.‫חכמה‬ ‫בצורה‬ ‫מידע‬ ‫לבקש‬ ‫וכך‬ QueryString ‫של‬ ‫בצורה‬ ‫פרמטרים‬ url ‫ל‬ (‫)לשרשר‬ ‫להוסיף‬ ‫ניתן‬
post ‫ל‬ ‫וגם‬ get ‫ל‬ ‫גם‬ AJAX ‫ב‬ ‫נכון‬ QueryString‫ב‬ ‫הזה‬ ‫השימוש‬
34

QueryString ‫עם‬ AJAX ‫באמצעות‬ ‫לשרת‬ ‫לפניה‬ ‫דוגמא‬
<body>
<button type="button" onclick="loadDoc()">Request data using AJAX with
QueryString</button>
<p id="demo"></p>
<script>function loadDoc(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200)
{document.getElementById("demo").innerHTML = this.responseText;};
var varGrade = 95,varName='Avi';
xhttp.open("GET", "SimpleResponseToAjax.cshtml?grade=" + varGrade +
"&name=" + varName); xhttp.send();}</script></body>
35
@{
string strGrade = Request.QueryString["grade"] != null ?
Request.QueryString["grade"] : "";
string strName = Request.QueryString["name"] != null ?
Request.QueryString["name"] : "";
string strOut = string.Format("name : {0} , garde : {1}",
strName, strGrade);
Response.Write("this is SimpleResponseToAjax
response . "+ strOut);
}
‫לשרת‬ ‫בקשה‬
AJAX ‫באמצעות‬
‫פרמטרים‬ ‫עם‬
SimpleResponseToAjax.cshtml
.‫תשובה‬ ‫מחזיר‬ ‫אשר‬
client server

ASP.net Web Pages

More Related Content

Similar to ASP.net Web Pages

More from Nathan Krasney

ASP.net Web Pages