Data Structures and Database Applications Intro to Visual

Data Structures and Database Applications Intro to Visual Studio and The MVC Framework 1

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:

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. 3

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. 4

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 • 5

Benefits of MVC • Clarity of design • 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, desktop, games, spreadsheets, powerpoint, Eclipse, UML reverse engineering, …. 6

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 7

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 8

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 9

MVC in a Web Interaction

ASP. NET MVC • Microsoft's implementation of MVC in ASP. NET • Easy to use design principles and patterns • Integral part of ASP. NET • Alternative to Web Forms Applications

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.

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

Web Forms vs. MVC Serves Methods, Not Files • ASP. NET Web Forms File Request: http: //www. example. com/index. aspx? ID=5 • Loads index. aspx file and get ID = 5 as parameter in View. State • MVC Method Request: http: //www. example. com/Home/Details/5 • Maps to ‘Home’ controller • And ‘Details’ action method • With Item ID of 5

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

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

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

MVC Controller Action Methods • Each view is associated with an MVC Controller Method public Action. Result Method. Name() { return View(); }

MVC Views and Action Methods • In MVC you cannot run a View that has no corresponding 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”

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: [Http. Post] public Action. Result Method. Name(String id, Form. Collection collection) { Session["Name"] = collection[0]; Session["Email"] = collection[1]; Session["Phone"] = collection[2]; return Redirect. To. Action("Next. View"); }

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

MVC View. Bag Data • Passing data to a View through View. Bag object and Inline Code • View. Bag is a property of the View. Page class • It allows you to create field names that you can then assign object value to: § View. Bag. 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: § <h 2> @Html. Raw(View. Bag. Message) </h 2>

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 Action. Result Method. Name() { Session["Name"] = "John Smith"; Session["Email"] = "John. Smith@gmail. com"; Session["Phone"] = "555 -123 -4567"; return View(); }

Formatting data in a View With the HTMLHelper Class • There are many HTMLHelper methods from the HTML Helper class: http: //msdn. microsoft. com/enus/library/system. web. mvc. htmlhelper. aspx • The following formats an link with the text “Click here” and sends it to the “Brochure” view of the “Home” controller: @Html. Action. Link("Click here", "Brochure", "Home")

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

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

MVC Helper Methods • This method is used to create a single line Text box: @Html. Text. Box("Field. Name")

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

MVC Helper Methods • This method is used to create a multi line Text box: @Html. Text. Area("Field. Name")

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

MVC Helper Methods • This method is used to create a checkbox: @Html. Check. Box("Field. Name")

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. Check. Box("Field. Name", true/false)

MVC Helper Methods • This method is used to create a radio button: @Html. Radio. Button("Field. Name", "Field. Value")

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. Radio. Button("Field. Name", "Field. Value", true/false)

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. Action. Link("Click here", "Brochure", "Home")

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. Action. Link("Click here", "Brochure")

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. Action. Link("Click here", "Brochure", "Home", new {id = value}, null)

Example • The following creates a Form: @{ using (Html. Begin. Form()) { @Html. Label("Text Box"): @Html. Text. Area("Field 1", "First default") <p></p> @Html. Label("Text Area"): @Html. Text. Area("Field 2", “Second default") <p></p> Check box 1: @Html. Check. Box("Check. Box 1", false) Check box 2: @Html. Check. Box("Check. Box 2", false) <p></p> @Html. Label("Radio button 1"): @Html. Radio. Button("Field 5", "Rad. Button 1", false) @Html. Label("Radio button 2"): @Html. Radio. Button("Field 6", "Rad. Button 2", false) <p></p> <input type="submit" value="Save Answers" /> } }

Example • The Form created:

The Drop. Down. List HTML Helper Method • You can add a Drop. Down. List to your HTML page by using the Html Helper function called Drop. Down. List. It gets a name of a View. Data Select. List field, and an optional first item in the list: @Html. Drop. Down. List("List. Items", "--Select One--")

The Drop. Down. List HTML Helper Method • For the previous example, some code would be needed in the Controller function to set the View. Data Select. List field: String[] options = {"1 st Option", "2 nd Option", "3 rd Option"}; View. Data. List. Items = new Select. List(options, "Selected. Item");

The Drop. Down. List HTML Helper Function • The previous Controller function and HTML Helper function would produce the following:

The List. Box HTML Helper Method • You can add a List. Box that doesn’t drop down to your HTML page by using the Html Helper function called List. Box. It gets a name of a View. Data Select. List field: @Html. List. Box("List. Items")

The List. Box HTML Helper Method • For the previous example, some code would be needed in the Controller function to set the View. Data Select. List field: String[] options = {"1 st Option", "2 nd Option", "3 rd Option"}; View. Data. List. Items = new Select. List(options, "Selected. Item");

The List. Box HTML Helper Function • The previous Controller function and HTML Helper method would produce the following:

The List. Box HTML Helper Method • By default, the List. Box shows four lines, whether you have four lines or not. To change the number of lines shown use: @Html. List. Box("List. Items", null, new { size = # }) If you had three lines, replace # with 3: @Html. List. Box("List. Items", null, new { size = 3 })

The List. Box HTML Helper Function • The previous HTML Helper method would produce the following: