Simple ASP.NET MVC Application

This article describes how to create a Simple ASP.NET MVC Application or A simple Hello world ASP.NET MVC application.
To start we need some predefined basic knowledge about ASP.NET MVC.

Step-1
If you have Microsoft Visual Studio installed, Start it and select New Project form the file menu.
In the New Project dialog box:

• Open the Visual C# templates
• Select the template ASP.NET MVC 2 Web Application
• Set the project name to MvcFirstApp
• Set the disk location to something like C:\TestProject
• Click OK

Step-2
A window will be open for unit test. If you want to create a unit test project select yes. Other wise select No and click ok.

Step-3
Visual Studio will create a project like this:

ASP.NET MVC – Application Folders
For all MVC applications the folder names are equal. All the Controllers will be in the Controllers folder, all the Views will be in the Views folder, and all the Models will be in the Models folder. We don’t need to use the folder names in our application.
Generally an ASP.NET MVC web application has the following folders:
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

Unit Test Files (optional)

• Properties
• References
• Controllers Folder
• App.config

App_Data Folder
The App_Data folder is used to store application data. We can add an SQL database to the App_Data folder.

Content Folder
The Content folder is used for static files like CSS or style sheets files, images, icons.
VS automatically add a themes folder to the Content folder. This is used for jQuery styles and pictures.
VS also add a standard style sheet file (Site.css) in the content folder. We can change it according to our choice.

Controllers Folder
The Controllers folder contains the controller classes. In MVC the name of all the controller files must be end with “Controller” (HomeController.cs, AccountController.cs).
In our project VS automatically created a Home controller for Home & About page and an Account controller for Login pages.

Models Folder
The Models folder contains the Model classes. It holds and manipulate application data.

Views Folder
The Views folder contains the HTML files or user interfaces files.
The Views folder contains one folder for every controller.
In our project VS automatically created an Account folder, a Home folder, and a Shared folder (inside the Views folder).
The Account folder contains the pages for registration and logging.
The Home folder is used for application pages like the home page and the about page.
The Shared folder is used to store master pages and layout pages.

Scripts Folder
The Scripts folder stores the JavaScript files used in the applications.
By default VS automatically creates some standard MVC, Ajax, and jQuery files.

Home Controller
In our application the controller file HomeController.cs has 2 controls Index and About.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcFirstApp.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

Index()method is used in View Index.aspx
About()method is used in View About.aspx

ASP.NET File Types
In the Views Folder the following HTML file types can be found:
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

The Index File
The file Index. aspx is the Home page of the application. It is the application’s default file (index file).

Put the following code in the file:

<h2><%: ViewData[“Message”] %></h2>
<p>
To learn more about ASP.NET MVC visit <a href=”https://cybarlab.com/category/web-technology/asp-net-mvc”
title=”Cybarlab”>Cybarlab</a>.
</p>

The About File
The file About. aspx is the About page of the application.

Run the Application
Our first MVC Application is created.From Visual Studio select Debug menu, Start Debugging (or F5).
Application will run and its look is:

Click on the “Home” tab or the “About” tab to see how it works.

This is all about a simple MVC Application. It is a static type application. In order to create a database related application we need to create CRUDE application in ASP.NET MVC or Database Application in ASP.NET MVC