How to ASP.NET MVC (Article 1)

Introduction

Today I will discuss about how can we develop a simple Asp.Net MVC Application. As a first article about Asp.Net MVC i will today discuss about a very simple Application development. 

Background   

  MVC:<o:p>

The Model View Controller (MVC) architectural pattern separates an application into three main components:<o:p>

·                  Models: Model objects are the parts of the application that implement the domain logic. Often, model objects also retrieve and store model state in a database.<o:p>

·                  Views: Views are the components that display the application's user interface (UI). Typically, this UI is created from the model data. An example would be an edit view of a Products table that displays text boxes, drop-down lists, and check boxes based on the current state of a Product object.<o:p>

·                  Controllers: Controllers are the components that handle user interaction, manipulate the model, and ultimately select a view to render the UI. In an MVC application, the view only displays information; the controller handles and responds to user input and interaction.<o:p>

<o:p> 

ASP.NET MVC:

<o:p> 

 The ASP.NET MVC framework is a lightweight, highly testable presentation framework that is integrated with existing ASP.NET features, such as master pages and membership-based authentication.<o:p>

You must have the following items to develop asp.net mvc application<o:p>

o         Microsoft Visual Studio 2008 SP1<o:p>

o        Microsoft ASP.NET MVC 1.0 (visit www.asp.net for downloading )<o:p>

o        Microsoft  SQL 2005 or Microsoft  SQL 2008 (Express edition or above)<o:p>

o        Test database (Create a database named ‘Test’ and then run ‘test.sql’)<o:p>

Database and Script:

    Before building/running this application please create a database named "Test" and run the "tables.sql" script.

Build a simple ASP.NET MVC Application<o:p>

1.       File -> New -> Project -> Asp.Net MVC Web Application

2        Allow with not select to create Unit test Project

3.        Solution Explorere will be like that 

Now I would like you to give a little description of the different folders use in Solution:

<o:p> 

Content: Content hold the necessary Style sheet file<o:p>

Controller:  Contains the Controller class. This is the entry point of any operation. For any user action, controller listen the action and process that action through ‘Model’ and finally return a ‘View’ associated with this action.<o:p>

Script: Contains the related javascript used by the application<o:p>

Views:  Views are returned by Controller. So for every controller like ‘HomeController’ there will be created a ‘Home’ in views and ‘AccoutController’ there will be created a ‘Account’ as well. There is also a folder in “Views” that is “Shared”. This “Shared” contains the necessary Master Pages and user controll.

That’s all the little description about the folder structure used by Asp.net Mvc.

4.       Right click the Model folder and add a new “Ado.net Entity DataModel”

5.       Create Test.edmx with two tables Customer And Orders (Scripts is attached with source code)

<o:p> 

<o:p>    Right click the “Controller” and Add a “Controller” named “CustomerController”. Check the “Add

      action methods for Create, Update, and Details scenarios” 

   
<o:p>

<o:p> <o:p>

 Now Modify CustomerController.cs like that:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using MvcApplication1.Models; 
namespace MvcApplication1.Controllers
{
    public class CustomerController : Controller
    {
        //
        // GET: /Customer/
        TestEntities entities = new TestEntities();

        public ActionResult Index()
        {

            return View(entities.Customer);
        }
        //
        // GET: /Customer/Details/5

        public ActionResult Info(string id)
        {
            var information = entities.Customer.Where(a => a.CustomerID == id).First();
            return View(information);
        }

 As today is our first Article so We will work only Selecting a list of customers with details. There have to need a study about the internal functionalities and architecture. So if you want ot know details please visit www.asp.net. Here i have used the TestEntities class. The different methods work actually how you want to interact with Model and finally you will get a View() like ActionResult Index() will return a Customer entity which will be the index page of Customer View.

public ActionResult Info() will return a perticular Customer Info using a ID

 Now 7. Right click inside the "public ActionResult Index()" method and Add View  selecting the check box "create a strongly-typed view", and select "Data Class" as "Customer" and "View Contenet" as "List"

       8. You will see a page "Index.aspx" has been added to "Views\Customer\"

       9. Right click also inside the "public ActionResult Info(string id)" method and add View  selecting the check box "create a strongly-typed view", and select "Data Class" as "Customer" and "View Contenet" as "Details" 

Thats all. You will get all the customer in Index.aspx page with Details Information. You need just a little adjustment in Index.aspx and Info.aspx page as "Create New" will not work as we did not use the " public ActionResult Create()" method. So modify the Page as i did in source code.

When will run the application, you will get all the customer information and when you will click the Details link, you will find details information about that customer.

<o:p>

Points of Interest  

Did you learn anything interesting/fun/annoying while writing the code? Did you do anything particularly clever or wild or zany?

History

Keep a running update of any changes or improvements you've made here.