Simple ASP.NET MVC Create, Edit and Delete Tutorial

In this post I'm going to show you how to do the Create, Edit and Delete function in ASP.NET MVC 3. The previews post thought us how to create our own ASP.NET MVC 3 project for the first time. We used Entity Framework 4.1 Code Frist to create our database from our model class named Product. Let us finish creating the CRUD (Create Read Update Delete) before we proceed on integrating Jquery to our project.

Create

Lets insert the Create Function in the Home Controller. The code snippet is given bellow.

' GET: /Home/Create

        Function Create() As ActionResult
            Return View()
        End Function

        '
        ' POST: /Home/Create

        <HttpPost()> _
        Function Create(ByVal productToCreate As Product) As ActionResult
            Try
                ' TODO: Add insert logic here
                _entities.Products.Add(productToCreate)
                _entities.SaveChanges()
                Return (RedirectToAction("Index"))
            Catch
                Return View()
            End Try
        End Function

Notice that their are two Create functions. The first Create function will return a view which contains the form for creating the product. The second function executes the Linq to Entity function to save the object to the database. Lets create the view for this method. 

1. Right click the first Create function and select Add View.

2. Create a strongly-typed view.

3. Select the model class "ProductDBContext."

4. Select the scaffold template "Create" and then click Add. 

This will generate a view located at Views > Home > Create.vbhtml. You can see that the scaffold method creates the fields of the form according to the model class identified in adding the view. This method shows how ASP.NET MVC 3 manage its views. Figure 1, shows the view created by the scaffold method.

Figure 1. Create Product form generated by MVC 3.

Edit

Just after the Create function in the Home controller, lets insert the Edit function.

' GET: /Home/Edit/5

        Function Edit(ByVal id As Integer) As ActionResult
            Dim productToEdit = (From p In _entities.Products _
                                 Where p.Id = id _
                                 Select p).FirstOrDefault()
            Return View(productToEdit)
        End Function

        '
        ' POST: /Home/Edit/5

        <HttpPost()> _
        Function Edit(ByVal productToEdit As Product) As ActionResult
            Try
                ' TODO: Add update logic here
                Dim originalProduct = _entities.Products.Find(productToEdit.Id)
                UpdateModel(originalProduct)
                _entities.SaveChanges()
                Return RedirectToAction("Index")
            Catch
                Return View()
            End Try
        End Function

The method of creating the Edit function is the same with the Create function. One function will retrieve the data and  return object to the view. The other function will receive the edited value and execute the query to update the database. To create the view we will follow the same procedure as to the create function.

1. Right click the first Edit function and select Add View.

2. Create a strongly-typed view.

3. Select the model class "ProductDBContext."

4. Select the scaffold template "Edit" and then click Add. 

The scaffold method will then again create a view located at Views > Home > Edit. The view will contain a form that will be used for editing the selected product. Let us test the view by first trying to add a product to our database. I added one product as showed in Figure 2.

Figure 2. The list view showing one product.

The list view we created in the index page is now field with one record. It also includes links to Edit, Details and Delete the record. Let us try out the Edit link. Figure 3 bellow shows how the Edit view is presented.

Figure 3.  Edit view shows the selected record.

The selected record to edit populates the form. Try to edit the record and hit save. The changes will then be updated to the database. After saving the record the page will return to the index by default. Now lets try the next function Details. Figure 4 bellow shows the details of the selected record. This is the Details view that we have created earlier in the previews post. 

Figure 4. Detail view of the selected record.

Delete

To complete the CRUD we insert the Delete function after the Edit function. The code snipped for the Delete function is shown below. 

'
        ' GET: /Home/Delete/5

        Function Delete(ByVal id As Integer) As ActionResult
            Dim productToDelete = (From p In _entities.Products _
                                 Where p.Id = id _
                                 Select p).FirstOrDefault()
            Return View(productToDelete)
        End Function

        '
        ' POST: /Home/Delete/5

        <HttpPost()> _
        Function Delete(ByVal productToDelete As Product) As ActionResult
            Try
                ' TODO: Add delete logic here
                Dim originalProduct = _entities.Products.Find(productToDelete.Id)
                _entities.Products.Remove(originalProduct)
                _entities.SaveChanges()
                _entities.SaveChanges()
                Return RedirectToAction("Index")
            Catch
                Return View()
            End Try
        End Function

The last Delete function also demonstrates the same concept as to the Create and Edit function. The first function will get the selected object from the database and the second function will execute the query to delete the record from the database. Figure 5 bellow shows selected record to delete. 

Figure 5. Details of the selected file to delete.

Finally we have created our first ASP.NET MVC 3 application with basic CRUD functions. Using the scaffold type views, creating the views for this project was made easy. The last part of the this series is the integration of Jquery and other Jquery plug-ins such as JqGrid, JqPopulate and JqValidate. But before that, the next post will show the video of the ToyStore project we have made in this post.