Click here to Skip to main content
13,768,344 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

21.6K views
5 bookmarked
Posted 9 Jul 2012
Licenced CPOL

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

, 11 Jul 2012
Rate this:
Please Sign up or sign in to vote.
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.

image

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

image

Select Empty template in Project Template screen and press OK button
image

Application Structure

Default 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. image

    3. Select controller name as “HomeController” as default controller of MVC
    4. image

    5. This will automatically create a class file with name “HomeController.cs”
    6. namespace Mvctest1.Controllers
      {
          public class HomeController : Controller
          {
              // // GET: /Home/ public ActionResult Index()
              {
                  return View();
              }
      
          }
      }
    7. 4. As we notice all controllers are derived from System.Web.Mvc.Controller.
    8. 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.

    9. Action Definition
    10. 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
  3. 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. image

    4. Connect your database with “Server Explorer”.
    5. image

    6. Drag and drop your table/view which contains data to list to dbml designer.
    7. image
      5. Build the Project to update the project assembly with class files generated by LINQ to SQL file.
       

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

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

    9. 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.

  5. Integrating Model and View with Controller
  6. In controller action method fetch rows through LINQ to SQL entities and pass to the view as below.

    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>()
                );
        }
    }
  7. 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

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sabarinathan A
Architect
India India
I have been programming for last 20 years on various platforms including .NET, Visual Basic 6, Oracle and SQL server.

I decided to write articles when I have free time hoping to share my thoughts with you.

To know more about me visit http://sabarinathanarthanari.com

You may also be interested in...

Pro

Comments and Discussions

 
QuestionMy 5.. Pin
Mas113-Jan-14 10:25
memberMas113-Jan-14 10:25 
AnswerRe: My 5.. Pin
Sabarinathan A4-Jan-14 6:21
professionalSabarinathan A4-Jan-14 6:21 
QuestionPossible Misinterpretation Pin
Scott McNeany11-Jul-12 5:15
memberScott McNeany11-Jul-12 5:15 
AnswerRe: Possible Misinterpretation Pin
Sabarinathan A11-Jul-12 5:51
professionalSabarinathan A11-Jul-12 5:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.181116.1 | Last Updated 11 Jul 2012
Article Copyright 2012 by Sabarinathan A
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid