Learning ASP.NET MVC (Part 1 : Create a list page in 10 minutes)

What is MVC ?

• MVC is an architectural design pattern.
• It separates business logic (Model), UI design (View), UI Events & Control flow (Controller) from each other.
• I helps to produce better unit testable code for all the above 3 layers.

How to implement it in ASP.NET ?

ASP.NET MVC is a new framework for building Web applications based up on MVC pattern. Its using ASP.NET Routing techniques to identify the controller to invoke from the variables passed in URL and form data.

Requirements

• Visual Studio 2008 or above
• .NET Framework 3.5 SP1 or above
• ASP.NET MVC library

Create a New Project

Select Empty template in Project Template screen and press OK button

Application Structure

• Place all your controller classes in /Controllers folder
• Place all your UI page designs in /Views folder and its sub-folders
• Place all your business logic class files in /Models folder
• Place all your JavaScript files(including jQuery) in /Scripts folder
• Place all your CSS, images in /Content folder

Steps to create a Data List

1. Create a controller
1. Right click on Controllers Folder and Select Add –> Controller menu



2. Select controller name as “HomeController” as default controller of MVC



3. This will automatically create a class file with name “HomeController.cs”
C#

namespace Mvctest1.Controllers
{
    public class HomeController : Controller
    {
        // // GET: /Home/ public ActionResult Index()
        {
            return View();
        }

    }
}

4. 4. As we notice all controllers are derived from System.Web.Mvc.Controller.

The MVC classes are defined in Assembly System.Web.Mvc.dll which are normally installed in C:\Program Files\Microsoft ASP.NET\ASP.NET MVC 3\Assemblies\System.Web.Mvc.dll.

5. Action Definition

Visual studio creates default member function “Index” which return value is “System.Web.Mvc.ActionResult”.
The controller contains one or more “Actions” which performs units of functionality.

2. Create a Model

Model is nothing but business object. It can be a custom class object or an object created by traditional data access mechanisms like LINQ to SQL, LINQ to Entities, Enterprise Library etc, or any object which implements business logic of view and controller. For this example, I’m going to use Northwind database with LINQ to SQL.

1. Right click on Models Folder and Select Add –> New Item… and create a LINQ to SQL file (dbml)
2. Set the namespace values of dbml file as <ProjectNamespace>.Models to be automatically picked by MVC framework.



3. Connect your database with “Server Explorer”.



4. Drag and drop your table/view which contains data to list to dbml designer.


5. Build the Project to update the project assembly with class files generated by LINQ to SQL file.
 

3. Create a View
1. Right click on the name of Action name in HomeController class and select “Add View…” menu



2. Visual Studio will show “Add View” dialog box with View name automatically identified from “Action name”.
3. Select Create a strongly-typed view check box.
4. Select your entity name listed in “Model class” list box. For this example “Sales_Totals_by_Amount (Mvctest1.Models)”
5. Select “List” in Scaffold template as we are creating list type web page.
6. Use “~/Views/Shared/_Layout.cshtml” as layout or master page. (this master page is created by Visual Studio automatically”



7. Visual Studio will create a new view in <ProjectFolder>\Views\Home\Index.cshtml location.

Here Home is the controller name and Index is the view name.

4. Integrating Model and View with Controller

In controller action method fetch rows through LINQ to SQL entities and pass to the view as below.

C#

public ActionResult Index()
{
    using (Mvc3ApplicationSample.Models.NorthWindDataContext dc = 
        new Models.NorthWindDataContext())
    {
        var query = from row  in dc.Sales_Totals_by_Amounts
                        select row;

        //The following line call the View engine to render "Index" view
        //with the populated data list
        return View("Index",  
          query.ToList<Mvc3ApplicationSample.Models.Sales_Totals_by_Amount>()
            );
    }
}

5. Compile and run the project. Browser will display the “Sales Totals by Amount” data list page.

Links

1. Download Express edition http://www.microsoft.com/express/vwd/
2. Download ASP.NET MVC http://www.asp.net/mvc/download

References

• ASP.NET MVC Overview
• MVC Framework and Application Structure
• ASP.NET Routing

Disclaimer

1. All data and information provided on this page is for informational purposes only. Some parts of this tutorial are taken from the specified links and references. The mentioned writings belong to their corresponding authors.
2. The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.