ASP.net MVC

ASP.Net MVC
natankrasney@gmail.com
1

? MVC ‫זה‬ ‫מה‬
‫ידוע‬ Software Architectural Pattern ‫הוא‬ MVC
‫באנטרנט‬ ‫תכנות‬ ‫עבור‬ ‫נרחב‬ ‫בשימוש‬ ‫נמצא‬ ‫אבל‬ Desktop ‫לאפליקציות‬ 70‫ה‬ ‫בשנות‬ ‫הומצא‬
ASP.Net MVC , Laravel ‫לדוגמא‬
: ‫להלן‬ ‫מופיעים‬ pattern ‫ה‬ ‫של‬ ‫המרכיבים‬
2

Model
UI ‫ה‬ ‫מן‬ ‫במנותק‬ ‫האפליקציה‬ ‫של‬ Business Logic ‫ה‬ ‫את‬ ‫מיצג‬ Model
‫האפליקציה‬ ‫של‬ Model ‫ל‬ ‫ולקוח‬ ‫סרט‬ ‫ישתיכו‬ ‫וידאו‬ ‫ספרית‬ ‫של‬ ‫באתר‬
‫אחד‬ ‫כל‬ class - ‫מחלקה‬ ‫ידי‬ ‫על‬ ‫מיצגים‬ ‫יהיו‬ ‫ולקוח‬ ‫סרט‬
properties - ‫בלבד‬ ‫מידע‬ ‫יכללו‬ ‫האלה‬ ‫המחלקות‬
POCO - Plain Old CLR Object ‫נקרא‬ ‫כזו‬ ‫מחלקה‬ ‫של‬ ‫אוביקט‬
C# ‫בשפת‬ class ‫בעזרת‬ Model ‫מממשים‬ ASP.Net MVC ‫ב‬
: ASP.Net MVC ‫בפרויקט‬ ‫מבנה‬
●Models ‫בספריה‬ ‫לשים‬ ‫נהוג‬ model ‫שהן‬ ‫מחלקות‬
3

Controller
Request ‫ה‬ ‫את‬ ‫ז"א‬ HTTP ‫בקשת‬ ‫את‬ ‫לקבל‬ ‫אחראי‬
storage‫ב‬ ‫לשמור‬ ‫לדוגמא‬ - Request‫ב‬ ‫מטפל‬
Response ‫ה‬ ‫את‬ ‫ז"א‬ HTTP ‫תשובת‬ ‫מחזיר‬
C# ‫בשפת‬ class ‫בעזרת‬ Controller ‫מממשים‬ ASP.Net MVC ‫ב‬
●Controllers ‫בספריה‬ ‫שמים‬ ‫ים‬ - controller‫ה‬ ‫כל‬ ‫את‬
●DefaultController ‫לדוגמא‬ controller ‫עם‬ ‫להסתיים‬ ‫חייב‬ controller ‫של‬ ‫שם‬
4

View
‫בלבד‬ ‫לתצוגה‬ ‫מיועד‬ view ‫ה‬
‫הלקוח‬ ‫של‬ ‫לדפדן‬ ‫מגיע‬ ‫אשר‬ HTML ‫ה‬ ‫זהו‬
cshtml ‫ובקבצי‬ Razor ‫תחביר‬ ‫בעזרת‬ View ‫מממשים‬ ASP.Net MVC ‫ב‬
‫פעולות‬ .view ‫ב‬ storage‫מ‬ ‫כתיבה‬ / ‫קריאה‬ ‫כמו‬ ‫פעולות‬ ‫לשים‬ ‫מקובל‬ ‫לא‬ ASP.Net MVC ‫ב‬
controller‫ב‬ ‫יתבצעו‬ ‫כאלה‬
●‫שלה‬ controller‫ה‬ ‫שם‬ ‫כמו‬ ‫ששמה‬ ‫ספריה‬ ‫בתת‬ Views ‫בספריה‬ ‫שמים‬ ‫ים‬ - view‫ה‬ ‫את‬
(‫בהמשך‬ ‫דוגמה‬ ‫)נראה‬
5

Controller - ‫סכמטי‬ ‫תיאור‬
: ‫להלן‬ ‫יראה‬ ‫זה‬ ‫אז‬ ‫למשתמש‬ ‫הסרטים‬ ‫את‬ ‫להציג‬ ‫רוצים‬ ‫אם‬ ‫לדוגמא‬
6
HTTP Request to
movies server
HTTP Response
to client
Storage

MVC ‫יתרונות‬
‫במערכת‬ ‫המרכיבים‬ ‫בין‬ ‫ברורה‬ ‫הפרדה‬ ‫ז"א‬ Separation Of Concerns ‫מאפשר‬
‫הקוד‬ ‫של‬ ‫יותר‬ ‫טובה‬ ‫תחזוקה‬ ‫מאפשר‬
‫במקביל‬ ‫לעבוד‬ ‫יכולים‬ ‫צוותים‬ ‫כמה‬ - ‫מהיר‬ ‫פיתוח‬ ‫מאפשר‬
7

‫עבודה‬ ‫סביבת‬
‫יותר‬ ‫מתקדמת‬ ‫גירסה‬ ‫או‬ Visual Studio 2015
: ‫הבאה‬ ‫בצורה‬ ‫נעשה‬ ‫מינימלי‬ ASP.Net MVC ‫יצירת‬
File->New->Project->Web->ASP.Net Web Application(.Net Framework) and ok
Choose Empty and mark “Add folders and core reference for” MVC
8

view ‫ו‬ controller ‫יצירת‬
‫ואז‬ Controller ‫כך‬ ‫ואחר‬ Add ‫ימני‬ ‫מקש‬ Controllers ‫ספרית‬ ‫סימון‬ ‫בעזרת‬ controller ‫ניצור‬
DefaultController ‫בשם‬ ‫ונבחר‬ Mvc 5 Controller - empty ‫נבחר‬
View ‫מחזיר‬ ‫אשר‬ Index ‫בשם‬ Action - ‫פונקציה‬ ‫נוצרה‬ DefaultController ‫המחלקה‬ ‫בתוך‬
‫בספריה‬ ‫ניצור‬ ‫אותו‬ Index.cshtml ‫ז"א‬ action‫ה‬ ‫כמו‬ ‫שם‬ ‫באותו‬ View ‫היא‬ ‫המחדל‬ ‫ברירת‬
Views ‫ל‬ ‫מתחת‬ Default
9

‫תואמים‬ view ‫ו‬ controller ‫קבצי‬
namespace MVC_empty.Controllers
{
public class DefaultController : Controller{
// GET: Default
public ActionResult Index(){
return View();
}
}}
10
@{Layout = null;}
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width"
/>
<title>Index</title>
</head><body>
<div>This is Index </div>
</body></html>DefaultController.cs
Index.cshtml
‫ה‬ ‫של‬ action
controller
‫כמו‬ ‫שם‬ ‫באותו‬ view ‫מחזיר‬
‫חייב‬ ‫כאן‬ view‫ה‬ .action‫ה‬
‫זהה‬ ‫בשם‬ ‫בספריה‬ ‫להיות‬
controller‫ה‬ ‫לשם‬

view ‫ה‬ ‫הצגת‬
11
‫לוחצים‬ index.cshtml ‫בתוך‬ ‫ז"א‬ ASP.Net web pages ‫ב‬ ‫שעשינו‬ ‫כמו‬ ‫בדיוק‬ ‫נעשית‬ Visual Studio ‫דרך‬ View‫ה‬ ‫הצגת‬
: ‫מוצג‬ ‫והדף‬ "View in browser" ‫ואז‬ ‫ימני‬ ‫מקש‬
‫קבלנו‬ ‫שם‬ - ASP.Net Web Page ‫על‬ ‫בפרק‬ ‫דומה‬ ‫דבר‬ ‫עשינו‬ ‫כאשר‬ ‫שקבלנו‬ URL‫מה‬ ‫שונה‬ URL ‫שה‬ ‫לב‬ ‫לשים‬ ‫חשוב‬
? ‫כאן‬ ‫קרה‬ ‫מה‬ .cshtml‫ה‬ ‫דף‬ ‫של‬ url‫ה‬ ‫את‬ ‫בדפדפן‬ ‫הכתובת‬ ‫בשורת‬
"‫ז‬ .DefaultController ‫של‬ Index ‫לפונקציה‬ Default ‫בספריה‬ ‫שנמצא‬ Index.cshtml ‫בין‬ 1:1 ‫מיפוי‬ ‫יש‬ ASP.Net MVC‫ב‬
‫לקליינט‬ ‫הזה‬ view‫ה‬ ‫את‬ "‫"מוריד‬ ‫הזה‬ action ‫ה‬ ‫א‬
? ‫באדום‬ ‫למעלה‬ ‫שהתקבל‬ URL ‫ה‬ ‫של‬ ‫המשמעות‬ ‫מה‬ ‫אבל‬

ASP.Net Routing
cshtml ‫קובץ‬ ‫לדוגמא‬ ‫השרת‬ ‫על‬ ‫לקבצים‬ ‫גישה‬ ‫מבצעים‬ ASP.Net Web Pages , ASP.Net Web Forms , PHP ‫ב‬
.‫שלו‬ URL‫ה‬ ‫באמצעות‬
‫לאתר‬ ‫לגשת‬ ‫נהוג‬ ‫שני‬ ‫מצד‬ .controller ‫של‬ action ‫באמצעות‬ ‫רק‬ ‫אלא‬ cshtml ‫לקובצי‬ ‫ישירות‬ ‫ניגשים‬ ‫לא‬ ASP.MVC‫ב‬
.‫שניהם‬ ‫בין‬ ‫הקשר‬ ‫מה‬ ‫אז‬ URL ‫באמצעות‬
‫בספריה‬ RouteConfig.cs ‫בקובץ‬ ‫מופיע‬ ‫וזה‬ Routing ‫חוקי‬ ‫באמצעות‬ ‫נעשה‬ URL‫ה‬ ‫לבין‬ action ‫ו‬ controller‫ה‬ ‫בין‬ ‫הקשר‬
App_Start
: ‫היא‬ ‫המחדל‬ ‫ברירת‬
url: "{controller}/{action}/{id}",
‫הקודם‬ ‫בשקף‬ URL‫ב‬ ‫שראינו‬ ‫מה‬ ‫ברור‬ ‫ולכן‬ URL‫מה‬ ‫כחלק‬ ‫מופיעים‬ action‫ו‬ controller ‫שה‬ ‫רואים‬ ‫פה‬
/Default/Index
Index ‫בשם‬ (‫)פונקציה‬ action ‫מופעל‬ ‫ובו‬ DefaultController ‫את‬ ‫מפעילה‬ ‫הזה‬ URL‫ל‬ ‫גישה‬natankrasney@gmail.com
12

view ‫ל‬ model ‫מעביר‬ controller
namespace MVC_empty.Controllers
{
public class DefaultController : Controller{
// GET: Default
public ActionResult Index(){
List<int> list =new List<int>(){1, 2, 3};
return View(list);}}
}
13
@model List<int>
<html>
<head></head>
<body>
This is Index
@foreach (int item inModel){
<p>@item</p>}
</body></html>
DefaultController.cs Index.cshtml
controller ‫ה‬ : ‫העברה‬
‫הזה‬ ‫במקרה‬ - model ‫מעביר‬
‫ה‬ ‫אל‬ List ‫מסוג‬ ‫אובייקט‬
‫אותו‬ ‫ומציג‬ view
‫סוג‬ ‫על‬ : ‫הצהרה‬
view‫שה‬ ‫האובייקט‬
‫להיות‬ ‫חייב‬ .‫לקבל‬ ‫מצפה‬
controller‫שה‬ ‫למה‬ ‫זהה‬
‫מעביר‬
list‫ה‬ ‫על‬ ‫לולאה‬ : ‫שימוש‬
controller‫מה‬ ‫שהתקבל‬

ViewBag ‫באמצעות‬ view ‫ל‬ controller ‫מ‬ ‫מידע‬ ‫העברת‬
View ‫לפונקציה‬ ‫פרמטר‬ ‫באמצעות‬ view‫ל‬ ‫מידע‬ ‫להעביר‬ ‫יכול‬ controller‫שה‬ ‫ראינו‬
‫צורך‬ ‫ללא‬ ‫דינמיות‬ properties‫ל‬ ‫השמה‬ ‫מאפשר‬ ‫אשר‬ ViewBag ‫ב‬ ‫להשתמש‬ ‫יותר‬ ‫נוח‬ ‫לפעמים‬
‫בקומפילציה‬
‫טפסים‬ ‫על‬ ‫הבאה‬ ‫בדוגמה‬ ViewBag ‫ב‬ ‫שימוש‬ ‫נראה‬
‫לדוגמא‬ ‫שנבחר‬ ‫שם‬ ‫בכל‬ ‫להשתמש‬ ‫היה‬ ‫אפשר‬ ‫אבל‬ ViewBag.Error ‫ב‬ ‫משתמשים‬ ‫בדוגמה‬
ViewBag.ErrorNathan
14

ActionResult
‫עוד‬ ‫אלו‬ View() ‫מחזירים‬ ‫שאנו‬ ‫וראינו‬ ActionResult ‫מחזיר‬ controller ‫של‬ action ‫ש‬ ‫ראינו‬
: ‫יש‬ ‫חשובות‬ ‫אופציות‬
15
‫הסבר‬ type - ‫סוג‬ ‫של‬ helper - ‫פונקציה‬
Controller ‫המחלקה‬
View ‫מחזיר‬ ViewResult View()
View ‫של‬ ‫חלק‬ - PartialView ‫מחזיר‬ PartialViewResult PartialView()
‫לתשובה‬ ‫מתאים‬ .‫פשוט‬ ‫טקסט‬ - Content ‫מחזיר‬
AJAX ‫לפנית‬
ContentResult Content()
‫אחר‬ action ‫ל‬ ‫מפנה‬ RedirectToAction RedirectToAction()
‫לפנית‬ ‫מתאים‬ - json ‫ומחזיר‬ ‫אוביקט‬ ‫מקבל‬
AJAX
Json Json()
‫נמצא‬ ‫לא‬ ‫כשהמשאב‬ ‫מוחזר‬ HttpNotFound HttpNotFound()

Action ‫ל‬ ‫פרמטרים‬
‫ו‬ Form ‫המאפינים‬ ‫בעזרת‬ Request ‫ב‬ ‫לטפל‬ ‫איך‬ ‫ראינו‬ ASP.Net Web Pages ‫ב‬
.QueryString
action ‫ל‬ ‫כפרמטרים‬ ‫שלו‬ key,value ‫של‬ ‫האוסף‬ ‫את‬ ‫וממפה‬ Request ‫ב‬ ‫מטפל‬ MVC
action ‫ל‬ ‫פרמטר‬ ‫כשם‬ ‫גם‬ ‫להופיע‬ ‫צריך‬ Request‫ב‬ ‫שמופיע‬ key ‫אותו‬ : ‫חשוב‬
16

‫בטופס‬ ‫כמו‬ type ‫עם‬ Action ‫ל‬ ‫לפרמטרים‬ ‫דוגמא‬
<form method="post" action="/Books/Create">
book name : <input type="text"
name="name"/> <br/>
number of pages : <input type="number"
name="numberOfPages" step="1"/> <br />
<input type="submit" value="Create
Book"/>
</form>
17
[HttpPost]
public ActionResult Create(int numberOfPages ,
string name)
{
.
return RedirectToAction("Index");
}
BooksController.cs
cshtml ‫קובץ‬

ViewModel
- ‫כמחלקה‬ ‫ממומש‬ ‫אחד‬ ‫שכל‬ ‫ולקוחות‬ ‫סרטים‬ ‫עם‬ ‫וידאו‬ ‫ספרית‬ ‫של‬ ‫אתר‬ ‫לנו‬ ‫שיש‬ ‫נניח‬
Model ‫מ‬ ‫חלק‬ ‫זה‬ - Movie,Customer
view ‫ל‬ Movie ‫אובייקט‬ ‫מעבירים‬ ‫אז‬ ‫ספר‬ ‫להציג‬ ‫רוצים‬ ‫אם‬
view ‫ל‬ Movie ‫של‬ list ‫לדוגמא‬ ‫מעבירים‬ ‫אז‬ ‫סרטים‬ ‫רשימת‬ ‫להציג‬ ‫רוצים‬ ‫אם‬
? ‫הלקוחות‬ ‫ורשימת‬ ‫הסרטים‬ ‫רשימת‬ ‫את‬ view ‫לאותו‬ ‫להעביר‬ ‫רוצים‬ ‫אם‬ ‫עושים‬ ‫מה‬
‫מתחת‬ ‫אלא‬ Models ‫ל‬ ‫מתחת‬ ‫בפרויקט‬ ‫יהיה‬ ‫לא‬ ‫זה‬ - ‫האלה‬ ‫השדות‬ ‫עם‬ ‫מחלקה‬ ‫מגדירים‬
‫)למרות‬ view model ‫נקראת‬ ‫אלא‬ Model ‫לא‬ ‫היא‬ ‫הזו‬ ‫המחלקה‬ . ViewModels ‫לספריה‬
(.… @Model ‫בעזרת‬ ‫אליה‬ ‫נתייחס‬ razor‫ה‬ ‫שבקובץ‬
18

ASP.Net MVC ‫ב‬ ‫בטפסים‬ ‫שימוש‬
‫וקוד‬ ‫בזמן‬ ‫חוסך‬ ‫וזה‬ ‫ים‬ - helper ‫בעזרת‬ ‫ובולידציה‬ ‫בטפסים‬ ASP.Net MVC ‫ב‬ ‫להשתמש‬ ‫ניתן‬
.‫האלה‬ ‫ים‬ - helper ‫ה‬ ‫של‬ ‫מדוקדק‬ ‫לימוד‬ ‫דורש‬ ‫אבל‬
helper ‫ללא‬ ‫בדוגמה‬ ‫נתחיל‬ ASP.Net MVC ‫ב‬ ‫ים‬ - helper‫ב‬ ‫השימוש‬ ‫את‬ ‫להבין‬ ‫שנוכל‬ ‫מנת‬ ‫על‬
‫ים‬ -
: ‫הבא‬ ‫בלינק‬ ‫מופיע‬ ‫הדוגמא‬ ‫של‬ source code‫ה‬
https://github.com/NathanKr/VS2015GitRep/tree/master/Telrad/Web/ASP.net/MV
C/MVC_empty
19

DoesBookExist - ‫טפסים‬ ‫דוגמה‬
[HttpGet] //this is default
public ActionResult DoesBookExist()
{
return View();
}
20
<html><head><style>p { color: red;}
</style></head>
<body>
<form method="get"
action="/Default/HandleDoesBookExist">
<input type="text" name="book_name"/>
<p>@ViewBag.Error</p>
<input type="submit" value="Submit">
</form ></body></html>
DefaultController.cs
DoesBookExist.cshtml
‫שם‬ ‫אותו‬ ‫בעל‬ view ‫מפעיל‬
‫ז"א‬ action ‫ה‬ ‫כמו‬
doesbooxexist.cshtml
‫ידי‬ ‫על‬ ‫ממופה‬ URL ‫ה‬
‫בשם‬ controller ‫ל‬ router‫ה‬
‫בשם‬ action‫ול‬ Default
HandleDoesBookExist

HandleDoesBookExist - ‫טפסים‬ ‫דוגמה‬ ‫המשך‬
[HttpGet] //this is default
public ActionResult HandleDoesBookExist(string book_name){
bool bIsValid = book_name.Length > 0;// --- some kind of
validation to show what is done
if (!bIsValid){ViewBag.Error = "name is not valid";
return View("DoesBookExist");}
bool bDoesExist = Utils.DoesBookExist(Server,book_name);
return View(bDoesExist);}
21
@model bool
<html><head></head>
<body>
@if(Model){
<p>book exists</p>}
else{
<p>book does not exist</p>}
</body></html>
DefaultController.cs HandleDoesBookExist.cshtml‫ה‬ ‫כמו‬ ‫שם‬ ‫אותו‬ ‫בעל‬ view ‫מפעיל‬
action
‫זהה‬ ‫להיות‬ ‫חייב‬
form ‫ב‬ name‫ל‬

Html.BeginForm - ‫בעזרת‬ ‫טופס‬ ‫יצירת‬
[HttpPost]
public ActionResult Create(int numberOfPages , string name)
{
return RedirectToAction("Index");
}
22
<body>
@using (Html.BeginForm("Create", "Books",
FormMethod.Post)){
<Label>Name : </Label><input type="text"
name="name" /> <br />
<Label>Pages : </Label><input
type="number" name="numberOfPages" step="1"
/> <br />
<input type="submit" value="Create Book" />
}
</body>
BooksController.cs
‫טופס‬ ‫עם‬ cshtml ‫קובץ‬
Method , Action , Controller ,

‫לקליינט‬ Content ‫מחזירה‬ ‫אשר‬ MVC ‫ל‬ 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", "/Default/HandleAjax?key=11");xhttp.send();}</script>
</body>
23
public ActionResult HandleAjax(string key)
{
return Content("OK");
}
‫מה‬ ‫כל‬ , cshtml ‫קובץ‬
Web ‫ל‬ ‫ביחס‬ ‫שהשתנה‬
URL‫ה‬ ‫זה‬ Pages

‫לקליינט‬ JSON ‫מחזירה‬ ‫אשר‬ MVC ‫ל‬ 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) {
var jsonObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = jsonObj.baz;}};
xhttp.open("GET", "/Default/HandleAjax?key=11"); xhttp.send();}
</script></body>
24
public ActionResult HandleAjax(string key)
{
var obj = new {foo = "bar", baz = true};
return Json(obj ,
JsonRequestBehavior.AllowGet);
}
‫מה‬ ‫כל‬ , cshtml ‫קובץ‬
Web ‫ל‬ ‫ביחס‬ ‫שהשתנה‬
URL‫ה‬ ‫זה‬ Pages
‫אוביקט‬ ‫של‬ ‫דינמית‬ ‫יצירה‬
‫לא‬ .Java script‫ל‬ ‫בדומה‬
‫זה‬ ‫במקרה‬ ‫נוח‬ ‫אך‬ ‫הכרחי‬
‫לוקחת‬ Json ‫הפונקציה‬
‫אותו‬ ‫ומעבירה‬ ‫אוביקט‬
‫ללקוח‬ ‫ומחזירה‬ JSON‫ל‬

ASP.net MVC

Recommended

Recommended

More Related Content

Similar to ASP.net MVC

Similar to ASP.net MVC (18)

More from Nathan Krasney

More from Nathan Krasney (11)

ASP.net MVC