Introduction to ASP.NET MVC 3

29 בפברואר 2012

תגיות: , , , ,
4 תגובות


 


הקדמה: 


לאחרונה יצא לי להיות בחברה מסויימת בה הייתי אמור להוביל פיתוח אתר ב – ASP.NET MVC 3, היה שם צוות נהדר וחכם, הבעייה שאף אחד מהצוות מאותה חברה לא הכיר את עולם ה – Web וכמובן לא את פלטפורמת asp.net mvc.

 

לכן הקדשנו תקופה מסויימת ללמוד את הטכנולוגיה, ובניתי רשימת תרגילים אשר הם צריכים לפתור, ודרך תרגילים אלו הם התחילו להכיר את asp.net mvc, התרגילים הינם תרגילים מתגלגלים, כלומר – כל תרגיל הינו המשך לתרגיל הקודם.

 

היות שאני מניח שיש עוד אנשים אשר זקוקים למדריך למידה על asp.net mvc, החלטתי שבמקום לכתוב מדריך כפי שאני עושה בדרך כלל, הפעם אני אכתוב פוסט יומי (בתקווה) אשר יכלול תרגיל אחד (לפי הסדר) והפיתרון שלו כולל ההסברים. בצורה זו מי שירצה להכנס לעולם ה – asp.net mcv יוכל לעשות זאת יחסית בקלות.

 

אני ממליץ למי שקורא סדרת פוסטים אלו כדי ללמוד, לא להסתכל ישר על הפיתרון – אלא לנסות לפתור לבד ורק לאחר מכן להסתכל על הפיתרון וההסברים.

 

 

תרגיל מס' 1. – דף לוגין בסיסי.

 


תיאור התרגיל: יצירת אפליקציית MVC עם דף לוגין המאפשרת הכנסת שם משתמש וסיסמא במידה והכול תקין יש לעבור לדף ברוך הבא.
 

מטרת התרגיל: הכרת סביבת העבודה, היכרות עם View, Controller, מציאת האלמנטים ב – dom ועבודה עם ולידציות ב – java script.
 

שלבים:



  1. פתחו פרוייקט חדש מסוג MVC 3 (אם לא קיים התקינו אותו).


  2. בחרו ב template מסוג Empty.


  3. מחקו את כל הסקריפטים המגיעים תחת תיקיית Scripts.


  4. מחקו את כל הקבצים תחת תיקיית Content.


  5. מחקו את ההפניות לסקריפט ול – CSS מתוך קובץ _Layout.cshtml.


  6. הוסיפו View חדש (תמיד השתמשו ב – Layout.cshtml כמסטר) המציג UI עם שני תיבות טקסט ולחצן.


  7. כדי לעשות זאת הוסיפו תגית form ל – view שיכיל את אותם שני תיבות טקסט, לכל אחד מהם תנו name, הלחצן יהיה מסוג submit.


  8. הוסיפו Controller חדש.


  9. הוסיפו Action שכל מה שיחזיר את ה – View.


  10. הוסיפו Action נוסף שיקבל את [HttpPost] כ – Attribute. והשם שלו יהיה זהה לשם של ה – Action הקודם, כמו כן יקבל שני מחרוזות (שמות המשתנים כפי שהגדרתם את מאפיין ה – name ל – input ב – view).


  11. בדקו האם הערכים תקינים וחוקיים (תקינים – האם יש ערכים, חוקיים – האם קיים משתמש שזהוי הסיסמא שלו (בשלב זה בדיקה hard code)), במידה ותקין יש להעביר את המשתמש לדף אחר, אחרת להציג הודעת שגיאה (בעזרת שימוש ב – ViewBag).


  12. הוסיפו רישום ל – onsubmit בצד הלקוח כדי לוודא לפני שהערכים נשלחים לשרת האם המשתמש אכן הכניס ערכים לתיבות הטקסט, במידה ולא יש לבטל את הקריאה לשרת ולהציג alert.

 

 

הסיבה למחיקת כל מה שמגיע כברירת מחדל היא כדי להבין יותר את המשמעות של כל דבר.

 

 

 

פיתרון:


את דוגמת הקוד ניתן להוריד כאן.

 

 

תחת תיקיית Controller נייצר חדש ונקרא לו בשם Start (חשוב – השם צריך להיות StartController). הוא יראה כך:

 



public class StartController : Controller


{


    public ActionResult Index()


    {


        return View();


    }


 


    [HttpPost]


    public ActionResult Index(string name, string password)


    {


        if (name == null || name.Trim() == string.Empty || password == null || password.Trim() == string.Empty)


        {


            ViewBag.Error = "Parameters required";


            return View();


        }


 


        if (name != "shlomo" && password != "goldberg")


        {


            ViewBag.Error = "User name or password incorrect";


            return View();


        }


 


        return View("Welcome");


    }


}


 

 


ה – action הראשון לא מקבל פרמטרים ומחזיר ActionResult שזה האבא של האובייקטים שאמורים לחזור מתוך Action, במקרה שלנו אנחנו מחזירים View שלמעשה מחזיר אובייקט מסוג ViewResult (שיורש ממנו), כברירת מחדל ה – Action עובד ב – HttpGet, ה – view שהחזרנו לא קיבל שום פרמטר שיגדיר לו איזה view להחזיר, ולכן הוא יחפש תחת תיקיית ה – Views תיקייה בשם ה – Controller שלנו (Start) ותחתיה View בשם ה – Action שכרגע הוא נמצא בו (Index).

 

ה – action השני נקרא גם כן index, אך מקבל פרמטרים ומוגדר לעבוד ב – HttpPost, אנחנו בודקים את הנכונות של המידע שהתקבל, במידה ומשהו לא תקין, נשתמש ב – ViewBag (שהוא אובייקט מסוג dynamic) כדי להוסיף מאפיינים (Error, הוא מאפיין שהמצאתי, ניתן להוסיף כל מאפיין שנרצה) ולהחזיק את הודעת השגיאה, במידה ויש שגיאה, נחזיר את ה – View הנוכחי, במידה והכול תקין נחזיר View אחר שנקרא Welcome (גם כן בתיקיית Start).

 

 

כעת נוסיף את התיקייה Start תחת Views, ונוסיף, View חדש בשם Index, בחלון שיפתח נבחר את ה – Layout שלנו (שנמצא תחת Shared) – בתוך Layout אנחנו יכולים לכתוב קוד משותף שיהיה בכל הדפים שמשתמשים בו (כמו master page ב – web forms)

 

נשנה טיפה את הקוד של Layout.cshtml והוא יראה כך:

 

 



<!DOCTYPE html>


<html>


<head>


    <title>@ViewBag.Title</title>


    @RenderSection("scripts", required: false)


</head>


<body>


    @RenderBody()


</body>


</html>


 


 


הסימנים של @, מגדירים שקטע הבלוק הבא הינו קוד צד שרת (זהו סינטקסט שנקרא razor).

 

עבור ה – title נכניס את הערך שיהיה בתוך ViewBag.Title.

 

נשתמש בפונקציית RenderSection שמאפשר לנו להגדיר שם (במקרה הזה scripts) והאם ה – section הוא חובה, במידה והדפים המשתמשים ב – Layout הזה יגדירו section עם השם הזה (scripts) התוכן שלהם יכנס לכאן.

 

תחת ה – body נשתמש בפונקציית RenderBody שבפועל תעתיק את התוכן של הדף האמיתי לכאן.

 

 

הקוד של Index.cshtml יראה כך:

 



@{


    ViewBag.Title = "Index";


    Layout = "~/Views/Shared/_Layout.cshtml";


}


 


@section scripts


{


    <script type="text/javascript">


        function validate() {


            var name = document.getElementById('name').value;


            var password = document.getElementById('password').value;


 


            if (name == " || password == ") {


                alert('Parameters required');


                return false;


            }


 


            return true;


        }


    </script>


}


 


<h2>Index</h2>


 


 


<form method="post" onsubmit="return validate()">


    <table>


        <tr>


            <td>User Name</td>


            <td><input type="text" name="name" id="name" /></td>


        </tr>


         <tr>


            <td>Password</td>


            <td><input type="password" name="password" id="password" /></td>


        </tr>


        <tr>


            <td colspan="2">


                <input type="submit" value="Login" />


            </td>


        </tr>


    </table>


 


    <h3>@ViewBag.Error</h3>


 


</form>


 

 


בהתחלה נפתח בלוק צד שרת, ונגדיר ערך עבור ה – Title, וכן נגדיר מיהו ה – Layout שהדף משתמש בו.

 

לאחר מכן נגדיר את התוכן עבור script section, ונוסיף פונקציית בדיקה הצד הלקוח, האם הערכים אכן נכונים.

 

ובסוף נגדיר טופס html שיוגדר כ – post (כך שיגיע למתודת ה – index עם ה – HttpPost), ובזמן submit לבדוק את פונקציית validate ורק אם היא החזירה true להמשיך לשרת.

 

הסיבה לבדיקה הכפולה היא עבור משתמשים תמימים שכל מה שהם רוצים זה להשתמש באפליקצייה, הסיבה לבדיקה בצד השרת היא עבור מתחכמים והאקרים שינסו לעקוף את הבדיקה בצד הלקוח.

 

מאפיין ה – name של ה – inputs חייב להתאים לפרמטרים המוגדרים במתודת Index בצד השרת, כך שהערכים שהמתשמש יכניס אכן יועברו בצורה נכונה.

 

בסוף הדף נשפוך את התוכן מתוך ViewBag.Error, כמובן שבמידה ואין Error (כמו בפעם הראשונה) לא יוצג שום דבר.

 

נוסיף View חדש בשם Welcome שתהיה הו הודעת ברכה כלשהי.

 

 

 שינוי אחד נוסף, נשנה את global.asax, כך שברירת המחדל תהיה ה – Controller שלנו.

 



public static void RegisterRoutes(RouteCollection routes)


{


    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");


 


    routes.MapRoute(


        "Default", // Route name


        "{controller}/{action}/{id}", // URL with parameters


        new { controller = "Start", action = "Index", id = UrlParameter.Optional } // Parameter defaults


    );


 


}


 


לא נכנס בפוסט זה לכל הקוד, אבל ניתן לראות שברירת המחדל היא Start וה – Action הוא Index.

 

 

סיכום:


בפוסט זה יצרנו אפליקציית mvc ראשונה, ראינו כיצד מוסיפים Controller ומשתמשים ב – Action, וכיצד מעבירים מידע מה – Controller ל – View.

בפוסט הבא נשנה את הקוד שלנו כך שיעבוד מול בסיס נתונים.

הוסף תגובה
facebook linkedin twitter email

להגיב על rachel fish לבטל

האימייל לא יוצג באתר. שדות החובה מסומנים *

4 תגובות

  1. שלומי 29 בפברואר 2012 ב 11:02

    רעיון מעולה
    תמשיך כך זה יעזור להמון אנשים שרוצים להיכנס לעולם ה mvc
    וזה ישפר את ההבנה על ידי תרגילים מעשיים הקרובים למציאות

    הגב
  2. יואב29 בפברואר 2012 ב 12:33

    נראה מעניין, אך לי שאלה בסיסית:
    מה זה הMVC? במה זה שונה מה ASP.NET הרגיל?

    תודה רבה על כל הפוסטים.

    הגב
  3. rachel fish17 באפריל 2012 ב 14:36

    תודה על הפוסט, מאד מועיל, יש המשך למאמר זה? תרגילים נוספים וכו?

    הגב