INTRODUCTION TO MVC BY SUHA MNEIMNEH

WHAT’S THE AGENDA What is MVC? MVC components MVC vs web forms vs ASP.NET vocabulary When to create MVC application Create ASP.NET MVC project Building ASP.NET MVC project and how to communication between Models, Views and Controllers 2

WHAT IS MVC? Model Controller View Model–view–controller (MVC) is a software architecture pattern separates an application into three main components: the model, the view, and the controller. Originally formulated in the late 1970 s by Trygve Reenskaug as part of the Smalltalk Code reusability and separation of concerns Originally developed for desktop, then adapted for internet applications The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. 3

MVC COMPONENTS Model: the model component corresponds to all the data related logic that the user works with. This can represent either the data that is being transferred between the view and controller components or any other business logic related data. View: the view component is used for all the ui logic of the application. It would include all the UI components such as text boxes, dropdowns, etc. That the final user interacts with. Controller: controllers act as an interface between model and view components to process all the business logic and incoming requests, manipulate data using the model component and interact with the views to render the final output. 4

MVC COMPONENTS - MODEL Set of classes that describes the data we are working with as well as the business Rules for how the data can be changed and manipulated May contain data validation rules Often encapsulate data stored in a database as well as code used to manipulate the data Most likely a data access layer of some kind Apart from giving the data objects, it doesn't have significance in the framework 5

MVC COMPONENTS - VIEW Defines how the application’s user interface (UI) will be displayed May support master views (layouts) and sub-views (partial views or controls) Web: template to dynamically generate HTML 6

MVC COMPONENTS - CONTROLLER The core MVC component Process the requests with the help of views and models A set of classes that handles Communication from the user Overall application flow Application-specific logic Every controller has one or more "actions" 7

MVC VS WEBFORMS VS ASP.NET VOCABULARY Lot of developers think that ASP.NET is different and MVC is different. But actually they are the same. Asp.NET is a web framework of Microsoft and MVC is a visual studio code template to write code using MVC architecture style. The proper name of OLD ASP.NET is “ASP.NET webforms”. So ASP.NET webform is the old ASP.NET with behind code and MVC is the new thing. But both of them use ASP.NET framework. So let us this straight asp.NET is a framework while MVC and webform are coding styles. MVC is the new thing and webform is your old code behind style. 8

When to create MVC application You must consider carefully whether to implement a web application by using either the ASP.NET MVC framework or the ASP.NET web forms model. Web Application MVC Framework ASP.NET Webforms 9

When to create MVC application ASP.NET WEB FORMS Stable and mature, supported by heaps of third party controls and tools Event driven web development Postbacks Viewstate Less control over the HTML Hard to test Rapid development ASP.NET MVC Runs on top of ASP.Net and not a replacement for webforms, Leverage the benefits of ASP.Net Embrace the web, user/SEO friendly urls, HTML 5, SPA, Adopt REST concepts Tight control over markup Testable Loosely coupled and extensible Convention over configuration Razor view engine: One of the greatest view engines, With intellisense, integrated in visual studio 10

When to create MVC application Advantages of an MVC-based web application It makes it easier to manage complexity by dividing an application into the model, the view, and the controller. It does not use view state or server-based forms. This makes the MVC framework ideal for developers who want full control over the behaviour of an application. It uses a front controller pattern that processes web application requests through a single controller. This enables you to design an application that supports a rich routing infrastructure. It provides better support for test-driven development (tdd). It works well for web applications that are supported by large teams of developers and for web designers who need a high degree of control over the application behavior. 11

When to create MVC application Advantages of a web forms-based web application It supports an event model that preserves state over HTTP, which benefits line-of-business web application development. The web forms-based application provides dozens of events that are supported in hundreds of server controls. It uses a page controller pattern that adds functionality to individual pages. It uses view state on server-based forms, which can make managing state information easier. It works well for small teams of web developers and designers who want to take advantage of the large number of components available for rapid application development. In general, it is less complex for application development, because the components (the page class, controls, and so on) are tightly integrated and usually require less code than the MVC model. 12

THE ASP.NET MVC HISTORY Asp.Net mvc 1.0 In february 2007, scott guthrie ("scottgu") of Microsoft sketched out the core of ASP.Net mvc, Released on 13 march 2009 Asp.Net mvc 2.0 Released just one year later, on 10 march 2010 Asp.Net mvc 3.0 Released on 13 January 2011 Asp.Net mvc 4.0 Released on 15 August 2012 Asp.Net mvc 5.0 Released on 17 October 2013 Asp.Net mvc 6.0 Released on 17 May

THE MVC PATTERN FOR WEB Incoming request routed to controller For web: HTTP request Controller processes request and creates presentation model Controller also selects appropriate result (view) Model is passed to view View transforms model into appropriate output format (HTML) Response is rendered (HTTP response) 14

ASP.NET MVC REQUEST 15

THE TECHNOLOGIES Technologies that ASP.NET MVC uses C# (OOP, unit testing, async, etc.) Html(5) and css Javascript (jquery, kendoui, etc.) Ajax, single-page apps Databases (MS SQL) ORM (entity framework and LINQ) Web and HTTP 16

INSTALLATION AND CREATING OF ASP.NET MVC PROJECT 17

THE TOOLS Tools that we need: IDE: visual studio 2012 (express for web) Justcode and web essentials Framework:.NET framework 4.5 Web server: IIS 8 (express) Data: Microsoft SQL sever (express or localdb) Web platform installer 4.0 will install everything we need for us Microsoft.Com/web/downloads/platform.Aspx Install visual studio express 2012 for web 18

NEW ASP.NET MVC PROJECT 19

NEW ASP.NET MVC PROJECT 20

MVC FOLDERS A typical ASP.NET MVC web application has the following folder content: Application information Properties References Application folders App_Data Folder Content Folder Controllers Folder Models Folder Scripts Folder Views Folder Configuration files Global.asax packages.config Web.config 21

ASP.NET MVC - APPLICATION FOLDERS The app_data folder is for storing application data. The content folder is used for static files like style sheets (css files), icons and images. It will include themes and standard style sheet file. The controllers folder contains the controller classes responsible for handling user input and responses. MVC requires the name of all controller files to end with “Controller". The models folder contains the classes that represent the application models. Models hold and manipulate application data. The views folder stores the html files related to the display of the application (the user interfaces). The views folder contains one folder for each controller. The scripts folder stores the JavaScript files of the application. 22

ASP.NET MVC - STYLES AND LAYOUT HTML helpers In the code above, HTML helpers are used to modify HTML - URL content will be inserted - HTML link will be inserted here. Razor syntax In the code above, the code marked red are C# using razor - the page title will be inserted - the page content will be rendered here. 23

ASP.NET MVC - STYLES AND LAYOUT The file _layout.Cshtml represent the layout of each page in the application. It is located in the shared folder inside the views folder. Open the file and swap the content with = "~/Views/Shared/_Layout.cshtml";} 24

ASP.NET MVC - CONTROLLERS The controllers folder contains the controller classes responsible for handling user input and responses. MVC requires the name of all controllers to end with “Controller". In our example, visual web developer has created the following files: HomeController.Cs 25

ASP.NET MVC - CONTROLLERS 26

ASP.NET MVC - VIEWS The Views folder stores the files (HTML files) related to the display of the application (the user interfaces). These files may have the extensions html, asp, aspx, cshtml, and vbhtml, depending on the language content. File TypeExtention Plain HTML.htm or.html Classic ASP.asp Classic ASP.NET.aspx ASP.NET Razor C#.cshtml ASP.NET Razor VB.vbhtml 27

ASP.NET MVC - MODELS The MVC Model contains all application logic (business logic, validation logic, and data access logic), except pure view and controller logic. With MVC, models both hold and manipulate application data. 28

ASP.NET MVC - HTML HELPERS With MVC, HTML helpers are much like traditional ASP.NET web form controls. Just like web form controls in asp.NET, HTML helpers are used to modify HTML. But HTML helpers are more lightweight. Unlike web form controls, an HTML helper does not have an event model and a view state. In most cases, an html helper is just a method that returns a string. With MVC, you can create your own helpers, or use the built in html helpers. 29

ASP.NET MVC - HTML HELPERS HTML links The easiest way to render an HTML link in is to use the HTML.Actionlink() helper. With mvc, the html.Actionlink() does not link to a view. It creates a link to a controller action. Razor this website", "about") ASP syntax: 30

ASP.NET MVC - HTML HELPERS HTML form elements There following HTML helpers can be used to render (modify and output) HTML form elements: Beginform() Endform() Textarea() Textbox() Checkbox() Radiobutton() Listbox() Dropdownlist() Hidden() Password() 31

ASP.NET MVC - HTML HELPERS first name: last name: 32