TechBubbles Microsoft Technology BLOG

CRUD operations using ASP.NET MVC 1

This post explains how to write ASP.NET MVC application which supports create, read, update and delete operations on sample database table. We build a product catalogue application using ASP.NET MVC Web application template.

Download ASP.NET MVC 1 to create the following application

To get the overview on ASP.NET MVC you can read ASP.NET 3.5 MVC Application post

1. Create a ASP.NET MVC Web application by launching VS 2008 and then select

File–>New Project. In project dialogue box enter the project name ProductCatologue and say OK.

clip_image002

2. You will get a Create Unit Test Project dialog which enables you later to write Unit tests for this project.

clip_image004

3. The solution now contains two projects ASP.NET MVC project named ProductCatalogue and Test project named ProductCatalogue.Tests.

clip_image006

4. You need to delete the sample files that are in the Views\Home\about.aspx, index.aspx from the project.

5. Create a new database by right clicking App_Data folder and then say add new item then you will get Add new item dialogue box there you need to select SQL Server Database template and name the database ProductCatalogueDB and click OK.

clip_image008

6. Create a table named Product with the following columns

clip_image010

7. The ASP.NET MVC application consists of Models, Views and Controllers. Now we create a Model class that represent the product table. Right click the model folder in solution explorer then select Add, New Item then dialogue box will appear there you name the model as ProductModel

clip_image012

It will ask you to choose the model content then select the table from database and then choose your data connection as shown below

clip_image014

clip_image016

clip_image016[1]

clip_image018

8. Create the controller class by right-clicking the controller folder and select menu option Add, Controller , make sure that check box in the dialogue box is checked and then say ok.

clip_image020

9. In order to display the contents in the product table you need to create an Index() action and an Index view in newly created controller class as follows.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using ProductCatalogue.Models;

namespace ProductCatalogue.Controllers
{
    public class ProductController : Controller
    {

        private ProductCatalogueDBEntities _entities = new ProductCatalogueDBEntities();
        //
        // GET: /Product/

        public ActionResult Index()
        {
            return View(_entities.Product.ToList());
        }
}

Before creating the Index view , you should compile your application in order to display the model classes in the Add view dialogue.

10. Right click the index method() and select the menu option Add View then the following dialogue box will appear

clip_image024

11. Run the application then you are going to see the following list of products in the view

clip_image026

12. To enable to add the new product to above list, you need to create() actions to the productcontroller. One create action to return the HTML view and the second create action actually to insert the data into database.

//
        // GET: /Product/Create

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

        //
        // POST: /Product/Create

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create([Bind(Exclude="Id")] Product productToCreate)
        {
            if (!ModelState.IsValid)
                return View();
            try
            {
                // TODO: Add insert logic here
                _entities.AddToProduct(productToCreate);
                _entities.SaveChanges();

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

13. After adding the view for create action, run the application then say create  new you will get the following screen

clip_image030

14. You can add the editing functionality to the application by adding two new edit methods to the controller as follows

        //
        // GET: /Product/Edit/5
 
        public ActionResult Edit(int id)
        {
            var productToEdit = (from p in _entities.Product
                                 where p.Id == id
                                 select p).FirstOrDefault();
            return View(productToEdit);
        }

        //
        // POST: /Product/Edit/5

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Edit(Product productToEdit)
        {
            if (!ModelState.IsValid)
                return View();

            try
            {
                // TODO: Add update logic here
                var Product = (from p in _entities.Product
                               where p.Id == productToEdit.Id
                               select p).FirstOrDefault();
                _entities.ApplyPropertyChanges(Product.EntityKey.EntitySetName, productToEdit);
                _entities.SaveChanges();
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

 

15. Similarly if you want to delete the products from the list then you need to add two delete() actions to the controller class. First action displays delete confirmation message and second action performs the delete operation

        public ActionResult Delete(int id)
        {
            var productToDelete = (from p in _entities.Product
                                   where p.Id == id
                                   select p).FirstOrDefault();

            return View(productToDelete);
        }

        //
        // POST: /Home/Delete/5

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Delete(Product productToDelete)
        {
            try
            {
                var Product = (from p in _entities.Product
                                       where p.Id == productToDelete.Id
                                       select p).FirstOrDefault();

                _entities.DeleteObject(Product);
                _entities.SaveChanges();
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

Conclusion

We have seen how to perform the basic CRUD operations using MVC web application by creating controller and views automatically. We also used the Entity Framework to generate the model for the above application.

Share this post :

About the author

Kalyan Bandarupalli

My name is kalyan, I am a software architect and builds the applications using Microsoft .NET technologies. Here I am trying to share what I feel and what I think with whoever comes along wandering to Internet home of mine.I hope that this page and its contents will speak for me and that is the reason I am not going to say anything specially about my self here.

1 Comment

  • its good but always creating new views for edit,delete,create for single gridview. how can i merge all these in a single view. please help me.

By Kalyan Bandarupalli
TechBubbles Microsoft Technology BLOG

Follow me

Archives

Tag Cloud