1. Social Media And Global Computing Introduction to The MVC Pattern

2. What is MVC?
MVC is a approach to building complex applications that breaks the design up into three components: The Model, the View and the Controller:

3. The MVC Pattern
Model-View-Controller ("MVC") an architectural design pattern for interactive applications dividing tasks into three separate modules:
one for the application model with its data representation and business logic,
the second for views that provide data presentation and user input, and
the third for a controller to dispatch requests and control flow.

4. The MVC Pattern In the MVC Design Pattern:
The view manages the graphical and/or textual output to the portion of the interaction with the user.
The controller interprets the inputs from the user, commanding the model and/or the view to change as appropriate.
The model manages the behavior of the data and the state of the application domain.

5. The MVC Pattern
Most Web-tier application frameworks use some variation of the MVC design pattern
The MVC (architectual) design pattern provides a host of design benefits

6. Benefits of MVC Clarity of design Modularity Supports Multiple domains
easier to implement and maintain
Modularity
changes to one don't affect the others
can develop in parallel once you have the interfaces
Supports Multiple domains
Web, desktops, games, spreadsheets, Powerpoint, IDEs, UML reverse engineering, ….

7. Model The Model's responsibilities
Provide access to the state of the system
Provide access to the system's functionality
Can notify the view(s) that its state has changed

8. View The view's responsibilities
Display the state of the model to the user
At some point, the model (a.k.a. the observable) must registers the views (a.k.a. observers) so the model can notify the observers that its state has changed

9. Controller The controller's responsibilities Accept user input
Button clicks, key presses, mouse movements, slider bar changes
Send information to the model
Send appropriate information to the view

10. MVC in a Web Interaction

11. ASP.NET MVC
Microsoft's newest Web development framework implementation
Easy to implement design principles and patterns
Integral part of ASP.NET
Alternative to Web Forms Applications
First implementation by Scott Guthrie
Built using core ASP.NET features

12. ASP.NET MVC
The ASP.NET MVC Framework presents a different paradigm than the ASP.NET Web Forms Framework:
Instead of focusing on writing code for individual controls (which you need to do with Web Forms), you focus on writing code for Views or Models.
Typically AJAX and/or jQuery are used to handled the User Interaction with individual controls

13. Web Forms vs. MVC Extensibility
ASP.NET has a provider model
Membership model example
MVC has powerful pluggable model
The Default view engine can be implemented in one of the following three ways:
Use the default component
Extend the default component
Replace the default component

14. The Tenets of MVC Separations of concerns
Convention over configuration
Keep it DRY: Don't Repeat Yourself
Be helpful, but get out of my way

15. Web Forms vs. MVC Blending of Concerns
Web forms is almost a hybrid
Forces a mixture of view and controller design approaches example
False sense of separation from code behind file
Reality: close coupling
MVC's Separation of Concerns
Encourages good coding practices
Ideally suited to Web application development
Natural for HTTP Requests and Responses

16. Web Forms vs. MVC Control over HTML
Web forms server controls provide rich functionality, but …
Produces unreadable, monolithic blocks of HTML
MVC gives you complete control over HTML
Produce clean HTML easy to control with CSS
Produce clean HTML easy to control with AJAX and JQuery

17. Web Forms vs. MVC Open Source
MVC Source Code is available
Liberal open source license: Microsoft Public License

18. Web Forms vs. MVC Serves Methods, Not Files
ASP.NET Web Forms File Request:
Loads index.aspx file and get ID = 5 as parameter in ViewState
MVC Method Request:
Maps to ‘Home’ controller
And ‘Details’ action method
With Item ID of 5

19. MVC Project Conventions
Conventions Over Configurations
MVC Conventions reduce the number of configuration files
Key Folders use Naming Conventions
Controllers folder
Name must be SomeNameController.cs
[SomeName] is the Controller name
[SomeName] comes after the domain in the URL

20. MVC Project Conventions
More MVC Folder Conventions
Views folder
Contains subfolders with Controller names
A Controller’s Views are in its subfolder
Any views shared by 2 or more controllers should go in the Shared folder
Ex: Error page and Master Template page
Models folder
Contains Models files for custom data objects and classes and shared references for your applications
Datastores/Databases should be places in the App_Data folder

21. MVC Project Views MVC Views No Code-Behind or Page events
The interaction with the application is through a Controller
Controller passes data to the view in the form of a String or a Model Object
Views are created using Controller action methods
Views can also be created using the Solution Explorer

22. MVC View Templates MVC Master Pages
Master pages allow you to create views with predefined elements
You can have multiple master pages in an application

23. MVC Controller Action Methods
Each view is associated with an MVC Controller Method
public ActionResult MethodName()
{ return View(); }

24. MVC Views and Action Methods
In MVC you cannot run a View that has no corresponding Action Method. Action Methods are behind every View
You need to create the Action Method for the View before you create the View
Once you have created the action method, to create the View, you right-click on the Method and select “Add View”

25. MVC Views can be associated With Multiple Methods
An Action Method that is the result of a Form Submission has special HTTP attributes identified before it and can redirect the user to another view:
[HttpPost]
public ActionResult MethodName(String id, FormCollection collection)
{ Session["Name"] = collection[0]; Session[" "] = collection[1]; Session["Phone"] = collection[2]; return RedirectToAction("NextView"); }

26. MVC Views and View Templates
When you create a View, you can always associate it with a View Template
Once you have created the action method and you choose the “Add View,” you can select a Master page from the Shared folder to act as the View template for that view.
Master pages allow you to create views with predefined elements
You can have multiple master pages in an application

27. MVC ViewBag Data
Passing data to a View through ViewBag object and Inline Code
ViewBag is a property of the ViewPage class
It allows you to create field names that you can then assign object value to:
ViewBag.Message = "Hello There!"
Once set in a Controller action method, it can be used in a View with Inline Code (called Razor syntax) such as the following:
</h2>

28. MVC Action Methods Can Pass Data to other Action Methods
Through Session Fields
Action Methods can pass data to other Methods using Session Field Variables:
public ActionResult MethodName()
{ Session["Name"] = "John Smith"; Session[" "] = Session["Phone"] = " "; return View(); }

29. Formatting data in a View With the HTMLHelper Class
There are many HTMLHelper methods from the HTML Helper class:
The following formats an link with the text “Click here” and sends it to the “Brochure” view of the “Home” controller:
@Html.ActionLink("Click here","Brochure","Home")

30. MVC Helper Methods
The BeginForm() method is used to create a Form for submitting fields:
@{ using (Html.BeginForm()) { …
} }

31. MVC Helper Methods
This method is used to create a Label using the HTML label tag:
@Html.Label("Text For Label")

32. MVC Helper Methods
This method is used to create a single line Text box:
@Html.TextBox("FieldName")

33. MVC Helper Methods With Default Values
This method is used to create a single line Text box with a default value:
@Html.TextBox("FieldName","Default")

34. MVC Helper Methods
This method is used to create a multi line Text box:
@Html.TextArea("FieldName")

35. MVC Helper Methods With Default Values
This method is used to create a multi line Text box with a default value:
@Html.TextArea("FieldName","Default")

36. MVC Helper Methods This method is used to create a checkbox:
@Html.CheckBox("FieldName")

37. MVC Helper Methods With Default Values
This method is used to create a checkbox that is either checked or unchecked if the default value is True or False respectively:
@Html.CheckBox("FieldName",true/false)

38. MVC Helper Methods This method is used to create a radio button:
@Html.RadioButton("FieldName","FieldValue")

39. MVC Helper Methods With Default Values
This method is used to create a radio button that is either selected or unselected if the default value is True or False respectively:
@Html.RadioButton("FieldName","FieldValue",true/false)

40. MVC Helper Methods
This method is used to create (action) links on a page. The following formats an link with the text “Click here” and sends it to the “Brochure” view of the “Home” controller:
@Html.ActionLink("Click here","Brochure","Home")

41. MVC Helper Methods
If you omit the controller argument, then the link will keep you in the same controller that you were in when you clicked on the link:
@Html.ActionLink("Click here","Brochure")

42. MVC Helper Methods
You can use the Action Link to send arguments to the Controller function. The following sends the ID argument with a value to the Brochure function:
@Html.ActionLink("Click here","Brochure","Home",
new {id = value}, null)

43. Example The following creates a Form: @{ using (Html.BeginForm()) {
@Html.Label("Text Box"):
@Html.TextArea("Field1", "First default")
<p></p>
@Html.Label("Text Area"):
@Html.TextArea("Field2", “Second default")
Check box false) <br />
Check box false) <br />
@Html.Label("Radio button 1"):
@Html.RadioButton("Field5", "RadButton1", false) <br />
@Html.Label("Radio button 2"):
@Html.RadioButton("Field6", "RadButton2", false) <br />
<input type="submit" value="Save Answers" />
} }

44. Example
The Form created:

45. The DropDownList HTML Helper Method
You can add a DropDownList to your HTML page by using the Html Helper function called DropDownList. It gets a name of a ViewData SelectList field, and an optional first item in the list:
@Html.DropDownList("ListItems", "--Select One--")

46. The DropDownList HTML Helper Method
For the previous example, some code would be needed in the Controller function to set the ViewData SelectList field:
String[] options = {"1st Option", "2nd Option", "3rd Option"};
ViewData.ListItems = new SelectList(options, "SelectedItem");

47. The DropDownList HTML Helper Function
The previous Controller function and HTML Helper function would produce the following: