MVC – Application Structure, Components, Functionality with an example – Part 2

Vasanthmvp
Posted by in ASP.NET MVC category on for Beginner level | Points: 250 | Views : 4908 red flag
Rating: 5 out of 5  
 3 vote(s)

In this article, we will try to understand how an MVC application structure looks like, the application components and its functionality with a static and a dynamic output example.

Introduction

In this article, we will try to understand how an MVC application structure looks like, the application components and its functionality with a static and a dynamic output example.

MVC Overview:

          The ASP.NET MVC framework is an application pattern that provides an alternative to the ASP.NET Web forms for creating web applications.  A basic introduction to ASP.NET MVC and its features were discussed in the first article - http://www.dotnetfunda.com/articles/article2092-introduction-to-aspnet-mvc-csharp-part-1.aspx.

Typically, the MVC design pattern can be illustrated with the following diagram.

Some kind of web application can fetch the use of MVC framework, others can continue with the traditional ASP.NET application pattern with posts backs and web forms.

Components:

MVC Framework includes the following components:

·       Model: Model is the application part, which includes all the business logic. Model objects are responsible for retrieving data from the database, operate on it and store its state back into database. In some cases like Get Methods, where we just display the dataset the same as in database and no physical existence of Model layer is required then indirectly dataset plays the role of Model layer.

·       View: Views are the components that are responsible to display application’s User Interface. The business logic after operated at Model, data returned from it is rendered on the UI based on the User Interaction. View is all made of pure html and java script code. It is highly time taking to design some of the asp controls like Calendar, charts, etc., using HTML. Hence, HTML helper classes as well as plug in controls that are available can be implemented.

·       Controllers: Controllers are the components that work as our Code behind part i.e., “.aspx.cs” of our “.aspx” in Web Forms.

They handle the incoming requests i.e., user interaction, takes the input from View, work with the Model and can select a view to render the data from Model that displays as UI. Like how we will be handling the query string values in the code behind part .aspx.cs file, the controllers would be helpful for carrying the data to Model while user interaction.

Important Links:

Microsoft has released the MVC framework as open source. It can be downloaded, inspected, modified, etc, You can get the MVC framework source code from http://aspnet.codeplex.com. There are other a few components to be considered while using the source code like IIS Express, SQL Server 2008 Management Express studio, etc,

Essential Software: Web platform installer (WebPI) is a free tool provided by Microsoft that downloads and installs components and products required for the M/s Web platform. With Visual Studio 2010, you will get the MVC 2 but don’t worry you can upgrade from it from here: http://microsoft.com/web/downloads. Click on download link. The WebPI will start automatically and you can see a selection window “Products Category” to select the products and click Install.


Start with our First Application:

Crete a new ASP.NET MVC Project – Select New Project from File menu and click on New Project. By selecting the Web templates, you can see ASP.NET MVC3 Web Application as shown below:

Give a name and click on OK.

Now, you can see another dialog box, where you can choose among three different types of MVC Project types.

 

·       Empty

·       Internet Application

·       Intranet Application

Empty project includes all the required minimum folders and files. Internet application gives you a sample web application which you can edit and build it. Intranet application is also similar to internet application but it is designed for use in environments that authenticate users through a domain/Active Directory structure.

 

 


You can find a drop down “View Engine” in the above fig. MVC3 includes a new and improvised View Engine called RAZOR. We will discuss about the view engines later on. I recommend you to select Razor View Engine. You can check or uncheck the HTML5 semantic mark up which includes HTML5 intellisence. Now click OK. Now an empty project is created, if you run it you can see a 404 error page since no URL request was made.


This is the folder structure of our ASP.NET MVC application:


Let’s start with a high level easy application. Using Web Mail helper to send email- a Feedback Form.

Adding a Controller:

Controllers are the simple C# classes inherited from System.Web.MVC.Controller – It is the controller base class. Each public method that we write in the controller is called “Action Method”. The action method can be invoked from the web page via a URL to perform corresponding action.

Following the naming conventions, the names that we give to a controller should end with Controller like HomeController.


The scaffolding options allows us to create a controller with template using common functions. For now, we select Empty Controller and click Add. Now, you can see HomeController.cs file in the Controller folder with a few lines code indicating that Controller is part of MVC i.e., System.Web.MVC namespace on the top and a class HomeController inheriting the Controller base class. Lets write an action method named Index() which returns a string.

Public string Index()

{

          return “Hi, this is my First MVC program”;

}

Note:

ASP.NET applications also use the ASP.NET routing system, which decides how URL’s should be mapped to corresponding action methods and controllers. Whenever we create a MVC project, visual studio by default creates some routes following its conventions, it sets the start of the application to HomeController’s Index Method. Hence, following the naming conventions would be benefitting us. However, we can change these default routing configuration in the Global.asax page. Whenever a browser request http://yoursitename/ or http://yoursitename/Home  or http://yoursitename/Home/Index, it directs to the home controller’s index action method itself.

Now, build and run the above project. You can see

Hi, this is my First MVC program  as output on the browser.


Now, Controller does its part to render the string but not HTML. Therefore, it’s time to set a UI to display our data. To produce a HTML response to the browser, we need a View (UI).

Adding a View :

Before we directly add a view to a controller, first let us do few modifications. The return type from the Index method was string now. Irrespective of the returning data’s data type we should set the generic object form. This we call it as “ViewResult” and return View(); ie.,  we are instructing the MVC that the current action method is going to call the default view() method [no parameter] and return ViewResult.

HomeController class:

public ViewResult Index() {

          return View();

}

Now, if we run our application the MVC framework will be trying to search the default view. But we didn’t add any view till now. Hence, it displays an error as shown below. Good that, MVC framework also shows what it was expecting and where it has search for:

This is due to an exception raised indicating that no Index view or its master was found. To create a view, you can right click in the HomeController.cs file, on the action method name or within method body and add view.


The View name will be same as action method name. If you are creating this view under any master page keep the Use a layout or master page checkbox checked otherwise uncheck it. For now, uncheck it as we are not implementing any master pages. If you observe view folder, a view Index.cshtml file is now created under the Views/Home folder.

Note: The .cshtml extension indicated that it’s a C# View and will processed by Razor. In previously versions of MVC, the views have .aspx extension since they are relied on ASPX View engine.

The .cshtml file has almost html part except the block

@{

          Layout = null;

}

The above code block will interpreted by the Razor View Engine. It just tells that we did not include any master page. Let’s look forward and Include some html part

Index.cshtml

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

          <title> Index </title>

</head>

<body>

<div> Hi, I am from the Index View  </div>

</body>

</html>

The output on the browser:

 

The execution starts at the action method Index() of HomeController.cs file. Previously this was returning a string, now it returns a ViewResult(), return View() will execute to select a view. Here, we did not specify which view to be selected, but based on the naming convention we followed it goes to the view with the same name of action method. Hence index view is rendered.

Now, if we look on to the Dynamic output application:

Like we select a server control of aspx page and assign a value to it from the codebehind. The same architecture we follow here, where aspx page is View and Codebehind part is Controller. But, there is no connection between them. We establish a way to pass data from controller to view using objects like ViewBag.

we modify our Controller as:

HomeController.cs :

public ViewResult Index() {

          int hour = DateTime.Now.Hour,

          string Wish = hour < 12 ? “Good Morning” : “Good Afternoon”;

          ViewBag.Greeting = Wish;

          return View();

}

ViewBag is a dynamic object to which you can assign arbitrary properties, making those values available in whatever view is subsequently rendered. The ViewBag’s property can be given any name eg: Greeting here. This Greeting can be used to retrieve data value in the ViewBag.

Index.cshtml

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

          <title> Index </title>

</head>

<body>

<div> @ViewBag.Greeting, world (from the view) </div>

</body>

</html>

The output on the browser:


The data binding expressions that we write in <%# %> syntax are replaced with @ in MVC. @ is a syntax element of Razor engine, that is used in ASP.NET MVC 3. We can just start @ and add out C# code within it. It is more readable and we don’t need to worry about balancing <% %> tags.

Conclusion

I hope this article is helpful. In the current application, we did not yse Model. Let’s see more on Model, Action Result class creating a sample application in the next article.


Reference

http://www.asp.net/mvc

ASP.NET MVC 3 Framework Book.




Page copy protected against web site content infringement by Copyscape

About the Author

Vasanthmvp
Full Name: VASANTH KUMAR
Member Level:
Member Status: Member
Member Since: 6/26/2012 12:13:54 AM
Country: India
Awesome Coding !! :)
http://www.dotnetfunda.com
Started my journey with what is .Net on 30-07-2012 and pretty excited to learn & share it on DotNetFunda since 15-08-2012. :) Exploring more & more :)

Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 1/7/2013 | Points: 25
Hi Vasanth,

Thanks for writing article in ASP.NET MVC, its nice going.

Just one small suggestion, it would be good if you can use the latest version of ASP.NET MVC that is ASP.NET MVC 4. It comes with latest version of Visual Studio 2012 express too or using Web Installer we can install in Visual Studio 2010 express also.

Keep it up!
Posted by: Santhiram on: 1/7/2013 | Points: 25
Hi Vasanth

Very nice explanation.Keep going.Good luck.
Posted by: Vasanthmvp on: 1/7/2013 | Points: 25
Thank You Sir,
I will follow your words.

Thanks & Regards,
Vasanth Kumar.P
Posted by: Kishork80 on: 1/9/2013 | Points: 25
Nice article with basic fundamentals and code.. Keep it up !
Write more on this.

Login to post response

Comment using Facebook(Author doesn't get notification)