פרוייקט ראשון ב-MVC
להורדת קוד מקור של כל הדוגמאות בקורס MVC – לחץ כאן
פרקי ההרצאה: פרוייקט ראשון ב-MVC
תמלול ההרצאה: פרוייקט ראשון ב-MVC
הטקסט המלא של הדקות הראשונות בהרצאה «פרוייקט ראשון ב-MVC» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הראשון שאנחנו הולכים לראות זה איך לפתוח פרויקט פשוט ב-MVC. למה חשוב לראות את זה? בכדי לראות על ההתחלה איזה מרכיבים שונים קיימים במערכת.
משהו בסגנון פרויקט של Hello World פשוט. אז בואו נפתח את Visual Studio, נלך ל-File, New, Project.
כאן אנחנו בוחרים ASP.NET MVC4 Web Application. חשוב לראות שאנחנו נמצאים בפריימוורק החדשה ביותר, זה דבר שכדאי לבצע כל פעם, אלא אם כן אנחנו לא יכולים בשרת להשתמש בפריימורק כזה.
בואו נשמור אותו בתיקייה, נלך לקונן C, בקונן C נפתח את התיקייה של הפרויקט של הוידאו הזה, ניתן שם ל-Solution וניתן שם לפרויקט עצמו.
מה שאנחנו רואים עכשיו זה טופס ראשון שפרויקט MVC נותן לנו, ופה יש לנו מספר פרויקטים בתוך MVC. אנחנו נפתח את MT ונתחיל איתו כי הוא הכי פשוט.
כאן אנחנו רואים שיש לנו View Engine. View Engine מתאר איך ה-View עצמו מתרגם את המידע שבו אנחנו רושמים. כלומר, מהו המנוע שאיתו הוא משתמש בשביל לייצר HTML. כש-MVC יצאה לראשונה היה מנוע של SPX, זה מנוע של SP.NET שמאפשר לכתוב כאילו קוד שרץ ושרט אבל הקוד נמצא בתוך הדפים עצמם של ה-View, דפי ה-HTML.
באיזשהו שלב הוציאו שפה שנקראת Razor, שהיא הרבה הרבה יותר פשוטה ונוחה לשימוש ואיתה אנחנו נשתמש בקורס הזה. אם אנחנו רוצים לבצע בדיקות של האתר שלנו, אנחנו רוצים לסמן את Create a Unit Test Project ולבצע בדיקות על ידי פרויקט שנקרא Unit Test.
אנחנו כרגע לא נסמן אותו, בהמשך אפשר כמובן להוסיף אותו בלי קשר לחלון הזה. אז בואו נלחץ אוקיי ויש לנו פה מערכת MVC שאיתה אנחנו מתחילים לעבוד.
עכשיו מה שאנחנו יכולים לראות כאן זה בסלושן אקספלורר יש מספר תיקיות בואו נעבור עליהם ונראה מה התיקיות השונות שקיימות לנו. AppData מכילה את המידע שהאתר אמור לעבוד איתו.
בדרך כלל זה יהיה קבצי XML או קבצים טקסטואליים שאנחנו רוצים לעבוד איתם. אם יש לנו איזשהו דאטאבייס מקומי הוא גם יכול להיות בתוך AppData, למרות שמומלץ לעבוד עם SQL Server לדוגמה, כאשר הקבצים של הדאטאבייס לא יושבים ב-AppData.
יושבים במיקום הדיפולטי של קבצי ה-SQL בשרת. אפסטארט מחזיק לנו כל מיני קבצים שאנחנו נשתמש איתם בהמשך, ש-MVC יכולה לדעת כל מיני הגדרות שאנחנו יכולים להגדיר. לדוגמה, דיברנו על ראוטס, ואנחנו רואים שיש לנו פה ראוט קונפיג שמאפשר לנו להגדיר את הנתיבים השונים שהאתר מכיר.
התיקייה הבאה שאנחנו רואים זה ה-Controllers. כאן יש את כל המחלקות ששייכות לאזור של ה-Controller באתר שלנו.
התיקייה הבאה בתור ומודלס פה יושבות המחלקות שמתארות את המודל ולבסוף יש לנו פה תיקייה שמתארת את ה-view ופה יושבים הדפים השונים של האתר. הדבר הראשון שאנחנו צריכים להתחיל איתו תמיד זה המודל.
כאן אנחנו בונים את המחלקות שמתארות את המידע שהאתר עובד איתם. אז בואו נלחץ מקש ימני Add Class והמחלקה הראשונה שאנחנו נבנה זו מחלקה שמתארת מוצר.
ואנחנו יוצרים מחלקה שנקראת Product. מה יש בפרודקט? בואו נניח שבפרודקט יש Product Name יש לנו איזשהו Price ובואו נוסיף גם איזשהו Product ID. אז המחלקה הזאת מתארת רק מידע טהור בנוגע למוצר מוצר אחד ויחיד חשוב לשים לב שהמחלקה הזאת מוגדרת by default במרחב שמות שנקרא Models שנמצא בתוך מרחב שמות שנקרא MVC Hello World שזה השם של הפרויקט שפתחנו
אנחנו כמובן יכולים לשנות את המרחב שמות הזה וזה בדרך כלל מה שנעשה בפרויקט אמיתי, לאיזשהו מרחב שמות אחד ויחיד שכל המערכת עובדת איתו.
אבל בגלל שאנחנו הוספנו את המחלקה לתוך תיקיית מודל, אז אנחנו רואים שהמערכת יצרה לנו את המרחב שמות מודל שנמצא בתוך מרחב השמות של האפליקציה עצמה.
אחרי שסיימנו לבנות את המודל שלנו, שכרגע בנוי רק ממחלקה אחת, הדבר הבא שאנחנו הולכים לעשות זה לבנות את ה-Controller. מכה שימני על התיקייה של ה-Controllers, בחירה שבאד קונטרולר כאן אנחנו נותנים שם לקונטרולר כל קונטרולר אמור להתעסק באזור אחר במערכת אם במערכת שלנו יש מוצרים אז אמור להיות לנו קונטרולר שמתעסק במוצרים אז בואו
נקרא לו product controller חשוב שהשם של הקונטרולר יסתיים במילה קונטרולר אנחנו כרגע נשתמש באמתי mvc קונטרולר כלומר אבל אני לא רוצה שהמערכת תוסיף לנו כל מיני דברים נוספים שאנחנו כרגע לא יודעים מהם בהמשך אנחנו נתעסק עם זה נלחץ על L ויש לנו כרגע קונטרולר שזאת סך הכל מחלקה שמתעסקת עם כל
הלוגיקה שקשורה למוצרים. מחלקת הקונטרולר יורשת את המחלקה קונטרולר וזה מה שהופך אותה להיות קונטרולר. בי דיפולט אנחנו רואים שיש לנו פונקציה שנקראת אינדקס, היא מתארת את הפעילות הדיפולטית של הקונטרולר הזה ששייך לפרודקטס.
הפונקציה אינדקס מחזירה ActionResult. ActionResult מאפשר לנו להציג View, ואנחנו רואים שיש פה בפונקציה return view. view בעצם זה התצוגה שאנחנו תכף הולכים לבנות.
אוקיי, אז בואו נלך ונבנה את ה-view. בשביל לבנות את ה-view הדבר הוא מאוד פשוט, כל מה שאנחנו עושים, מכה שימני על הפונקציה, add view.
בי דיפולט השם של ה-view ואותו שם של הפונקציה שנמצאת בקונטרולר. אוקיי, בואו נוסיף כרגע את ה-view ויש לנו את שלושת המרכיבים השונים במערכת.
אנחנו רואים שיש לנו כאן את המודל, סך הכל פרודקט. אנחנו רואים שיש לנו כאן את הקונטרולר שמתעסק במוצרים, ואנחנו רואים שיש לנו view אחד שנקרא אינדקס, והוא נמצא בתוך תיקיית פרודקטס שנמצאת בתוך התיקייה views.
וזה בעצם ה-UI היחידי שיש לנו במערכת, User Interface, כלומר דף אחד ויחיד שכרגע בנינו. הסיומת של כל דפי ה-view היא CSHTML. למה זה CSHTML?
מפני שבתוך הדף הזה יש גם קוד HTML, אנחנו יכולים לראות אותו פה וגם אנחנו יכולים לכתוב קוד בשפת C-Sharp על ידי המנוע Razor, זה המטרה שלו, לבצע קוד שרץ בצד של השרת, מייצר HTML שבסופו של דבר רק ה-HTML מוחזר ללקוח.
אז אם אנחנו הולכים להריץ כרגע את האתר שבנינו על ידי Control-F5, אנחנו לא הולכים לראות שום דבר כאשר אנחנו מריצים את האתר מפני שאני מזכיר לכם שב-MVC אנחנו לא גולשים לדף ספציפי, אנחנו צריכים לגלוש לפונקציה שנמצאת ב-Controller.
אז אם זה הכתובת של האתר שלנו אנחנו יכולים לרשום סלאש, לרשום את השם של הקונטרולר בלי המילה קונטרולר, בלי הסיומת קונטרולר שלו ואז סלאש ואת השם של הפונקציה שאנחנו רוצים לגלוש אליה.
בתוך הקונטרולר הייתה לנו פונקציה שנקראת אינדקס ולכן אנחנו פשוט יכולים לרשום את השם של הפונקציה, אנטר וקיבלנו את ה-view שהקונטרולר מחזיר לנו, שכל מה שהוא כתב שם זה אינדקס.
בואו נסתכל רגע ונראה שזה מה שיש בתוך ה-view. Index זאת מילה שמתארת פעילות דיפולטית ולכן גם אם היינו רושמים רק Products ולוחצים Enter, אוטומטית הוא היה מחפש ספציפית פונקציה שנקראת Index.
כל הפעילות הזאת של מה אנחנו רושמים בשורת ה-URL זה נושא שנקרא Routes שאנחנו נדבר עליו בהמשך ונראה את כל מה שאפשר להגדיר כאן. אבל רגע, לא העברנו שום דבר מהקונטרולר ל-View.
כלומר, לקוח גלש לקונטרולר, בתוך הקונטרולר הוא גלש לפונקציה אינדקס, הפונקציה אינדקס יצרה לו את ה-view, mvc אוטומטית מחפשת view שנמצא בתוך תיקייה שנקראת product כי גלשנו לקונטרולר product ובתיקייה הזאת היא מחפשת view, כלומר דף שהשם שלו זה אותו השם של הפונקציה שלקוח הקצה גלש אליה ואכן הוא מוצא פונקציה כזאת.
אז מה שהוא עושה בקונטרולר הוא מייצר אובייקט ממנה, יכולים לראות את זה כאן, אובייקט מה-view ואוטומטית מוחזר ללקוח אובייקט מה-view. אם אנחנו נסתכל מה יש בתוך ה-view, יש לנו פה סך הכל h2 שבתוכו כתוב אינדקס.
אנחנו רוצים להעביר מידע מהקונטרולר ל-view. אז לצורך כך אנחנו צריכים ללכת לקונטרולר ובדיוק לפני שאנחנו הולכים לייצר בחזרה את ה-view אנחנו צריכים לגשת לדאטאבייס Access to the database, להביא מהדאטאבייס מידע, לייצר אובייקט או לקבל בחזרה אובייקט מהמידע שקיבלנו מהדאטאבייס ולהעביר מכאן את המידע ל-view בכדי שה-view ישלב אותו בתצוגה.
אנחנו כרגע בפרויקט Hello World שלנו לא ניגש לדאטאבייס אלא נייצר את האובייקט הזה on the fly. בהמשך אנחנו נראה איך בדיוק אנחנו מביאים את המידע גם מהדאטאבייס.
ולכן כל מה שנעשה כרגע זה ניצור אובייקט במחלקה products, נכון פרודקט, נאכלס אותו בנתונים, product name, price ו-product ID. שימו לב ל-M, מפני ש-price מוגדר כדצימל ו-4.5 מוגדר כדאבל וה-M מבצעת קאסטינג מ-double לדצימל.
דצימל מיועד להחזיק כספים ו-M זה קיצור של money.