Understanding MVC Framework: An Overview
MVC (Model-View-Controller) architecture separates an application into three key components – model, view, and controller. This pattern enhances code reusability, separation of concerns, and business logic organization. Explore the fundamental concepts, components, and communication within MVC for building efficient web applications.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
INTRODUCTION TO MVC BY SUHA MNEIMNEH
WHATS 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 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 1970s 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. Model Controller View 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 ASP.NET Webforms Framework 9
When to create MVC application ASP.NET MVC ASP.NET WEB FORMS Runs on top of ASP.Net and not a replacement for webforms, Leverage the benefits of ASP.Net Stable and mature, supported by heaps of third party controls and tools Event driven web development Embrace the web, user/SEO friendly urls, HTML 5, SPA, Adopt REST concepts Postbacks Viewstate Tight control over markup Less control over the HTML Testable Hard to test Loosely coupled and extensible Rapid development 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 13 Asp.Net mvc 6.0 Released on 17 May 2016
THE MVC PATTERN FOR WEB Incoming request routed to controller For web: HTTP request Front controller (dispatcher) /Some/Page/ Controller processes request and creates presentation model Controller also selects appropriate result (view) Delegate request Model is passed to view User Controller View transforms model into appropriate output format (HTML) Response is rendered (HTTP response) CRUD model Select view & pass data View Model (data) 14 (render UI) Use model data
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 18 Install visual studio express 2012 for web
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. 22 The scripts folder stores the JavaScript files of the application.
ASP.NET MVC - STYLES AND LAYOUT HTML helpers In the code above, HTML helpers are used to modify HTML output: @Url.Content() - URL content will be inserted here. @Html.Actionlink() - HTML link will be inserted here. Razor syntax In the code above, the code marked red are C# using razor markup. @Viewbag.Title - the page title will be inserted here. @Renderbody() - 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 this: @{Layout = "~/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 - 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 Type Extention 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 syntax: @Html.Actionlink("about this website", "about") ASP syntax: <%=Html.Actionlink("about this website", "about")%> 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() 31 Password()
ASP.NET MVC - HTML HELPERS <%= Html.Validationsummary("create was unsuccessful. Please correct the errors and try again.") %> <% Using (html.Beginform()){%> <p> <label for="firstname">first name:</label> <%= html.Textbox("firstname") %> <%= html.Validationmessage("firstname", "*") %> </p> <p> <label for="lastname">last name:</label> <%= html.Textbox("lastname") %> <%= html.Validationmessage("lastname", "*") %> </p> <p> <input type="submit" value="register" /> </p> <%}%> 32
