Sidenote : This is the part 1 of the ASP.Net MVC course series. You can get all the parts of this tutorial here.
How Web Works
All web applications use HTTP protocol (or its secured version HTTPS) to send data to the server and receive data from the server. This is true for all web applications whether it’s built using ASP.Net, Ruby on Rails, Java or any new shiny technology. You can think of HTTPS as using HTTP securely. HTTPS uses Secure Socket Layer (SSL) and encrypts your data. But HTTPS still HTTP.
HTTP is a stateless protocol which follows request/response pattern. i.e., User requests a resource from the server and the server responds with the requested resource. The resource could be html, text file, or any information.
The server which serves the requests is called web server and it does not maintain any state of the previous requests. If user requests the same resource again, the web server again responds with the requested resource as though user is asking for the first time. Though there are several mechanisms available to maintain the state which would be discussed later, just remember HTTP is inherently stateless.
Browser:
Irrespective of the technology that you use to develop the web application, users would access your web application through browsers. But browser can understand only HTML, CSS, javascript (unless user has installed some plugin). So the web technology has to convert the technology based code (ASP.Net MVC code in our case) to HTML,CSS and JS.
HTML would provide you the layout of the web page – tells which content should be at what place
CSS(Cascading style sheet) would help you in applying styles to elements of the page. E.g, If you want all paragraph text to be italic and in blue color, CSS would help you to achieve it easily without much modification to the code.
Javascript is for processing the elements at client side without going back to the server. Using ajax, though you can go to the server to get server data. Javascript is mainly used for validation, handling the user input, changing the style of some element based on data or user input etc…
Role of web application framework:
We just saw that if user requests a resource (such as html), web server delivers the requested resource. Then, why do we need web applications at all? What is the need of web application development frameworks such as ASP.Net MVC? We can just create necessary resources (html files) and then users can access them.
There is a little problem here.
Consider a scenario where you have to publish SAT test scores. There are more than 1.5 million students write this exam every year. You have to create 1.5 million html files, if you have to take the manual route of creating resources.
Instead, you can write a web application – which would talk to database – and generate the web pages with result dynamically. Huge effort & time saved.
At core, the primary purpose of any web application development frameworks is to generate the resources such as web pages dynamically.
ASP.Net MVC, Ruby on Rails, PHP and many other web application development frameworks do this.
Apart from the generation of web pages dynamically, web application development frameworks may have/support the following functionalities
- Security – Some of the web pages should only be accessed by the people with certain roles. Ex: Only administrators could access the user creation web page.
- Caching – Caching is primarily used to improve the performance of the application.
- Easier data access – All web applications use database to store/fetch the data. Even though database access technology is separate component, web application framework should support all database technologies.
There are many other features in modern web application frameworks such as ASP.Net MVC. But still the primary job of web application development framework is to help you to generate the dynamic html content easily.
ASP.Net MVC Introduction:
In last lesson, we saw that how using web application development framework makes easier to build web applications among its other benefits. ASP.Net MVC is one such framework.
If you had developed web applications using ASP.Net Web Forms, there may be little confusion on how ASP.Net MVC and ASP.Net Web Forms fit in ASP.Net environment.
When you develop web applications using ASP.Net Web Forms, the entire environment would have behaved like a single Unit. But there are 2 layers – ASP.Net and ASP.Net Web Forms.
ASP.Net provides you the web stack, HTTP handlers and do all the low level plumping
ASP.Net Web Forms – This is a web form layer which gives you the UI server controls and ViewState
From the above picture, you could notice that even ASP.Net MVC uses ASP.Net for web stack and HTTP Handlers.
Why ASP.Net MVC when we have ASP.Net Web Forms?
You might think what the need of ASP.Net MVC is, when we can build applications using ASP.Net Web Forms itself. Moreover, Microsoft said that it has no plans of stopping ASP.Net Web Forms.
Statelessness of the Web:
ASP.Net Web Forms do not embrace the true nature of statelessness of the web. It maintains the state of the page using ViewState which encodes all the form data and send to client through hidden field and thus state can be maintained between the requests.
Separation of Concerns:
ASP.Net MVC follow the well established pattern – MVC; Model layer for interacting with the data, View for displaying and Controller for orchestrating between the layers.
Control over the generation of HTML:
You don’t have much control over generation of html elements when using server controls in ASP.Net Web Forms. But in ASP.Net MVC you have control over what is being sent to the client till that last byte.
How ASP.Net MVC Works:
ASP.Net MVC follows the Model View Controller(MVC) architectural pattern , which promotes the separation of concerns.
Model: Set of classes which defines your business domain
View: Defines the UI of your application
Controller: Handles the user requests and orchestrates the application flow by communicating with Model and View
If you don’t understand these jargons, don’t worry. We’ll see an example. It can make things clear.
For the sake of explaining the request flow, we assume that Google search is built using ASP.Net MVC How dare I? But who cares.
Following are the sequence of steps that happens when user tries to access a web page in ASP.Net MVC application
- User types the URL in the browser(google.com/web/ or www.google.com/images/ ) and types the query
- Request reaches the web server and it’s forwarded to the routing engine of ASP.Net MVC
- Based on URL pattern, routing engine selects appropriate controller. If user has typed google.com/web/ , then routing engine would controller by name ‘web’. Or if the user tried to access www.google.com/images/, routing engine would select ‘images’ controller. Each controller is responsible for receiving the request and orchestrating with model and view to deliver the appropriate response. Let’s assume that user has accessed www.google.com/images/ and images controller is selected.
- Controller talks to the database using the model layer to get the appropriate images for the entered query. If the user ‘s query is ‘FIFA’, model gives the information of all images related to FIFA
- Once the controller receives the required data, it gets the relevant View to show it to the user. Instead of 10 blue links (that we get when we search in web), Google shows the thumbnail images with infinite scroll.
- Images controller returns this view with thumbnails.
- The requested resource is sent back to the requested browser.
Please note that there are lot of things happening (such as web server, HTTP handler etc…) between receiving the request and sending the response back to the requesting browser. The above diagram and explanation are restricted to high level events with respect to ASP.MVC application.
There are few other details missed out intentionally to make the example simple. When you do google search, you’ll fire two requests – one for getting page with blank search box and another for getting the search results(once you type search query and press enter).
Side note: Google does not use separate URLs for searching web and images as discussed. If you notice the URL in the above image, only the query parameter is being changed.
You are going to build your first ASP.Net MVC in next chapter.
[button type=”flat” shape=”square” size=”large” href=”https://www.dotnetodyssey.com/asp-net-mvc-5-free-course/” title=”Previous chapter”]Previous Chapter[/button] [button type=”flat” shape=”square” size=”large” href=”https://www.dotnetodyssey.com/asp-net-mvc-5-free-course/” title=”Home”]Home[/button] [button type=”flat” shape=”square” size=”large” href=”https://www.dotnetodyssey.com/asp-net-mvc-5-free-course/your-first-asp-net-mvc-application/” title=”Next Chapter”]Next Chapter[/button]