MVC: C.R.U.D. Operations

Using Entity Framework to leverage CRUD operations within a website.

Most tasks performed in today’s data-driven websites revolved around one or more of the Create-Retrieve-Update-Delete (C.R.U.D.) operations.
Microsoft has provided a very elegant, easy-to-use, yet powerful tool that abstracts a lot of the complexity necessary for most CRUD operations while decreasing development costs. The Entity Framework provides robust Object Relational Mapping (ORM) between the data layer and business layer as this article will illustrate.

To begin, I first created a simple database table sales_people on which I want to perform each of the CRUD actions.

1-mvc-crudoperations

With my sample table ready, I will now create an Entity Framework model into my “/Models” folder from the “Data” template.

2-mvc-crudoperations

From the first step, I’ll select to generate my model from a database.

3-mvc-crudoperations

Next, I’ll create a new connection to the database where my model resides and test the newly created connection.

4-mvc-crudoperations

With the connection created and web.config settings ready, I’ll rename the entity to “SalesPeopleEntities” so that it’s more user-friendly.

5-mvc-crudoperations

Under “Choose your Database Objects” I’ll select my target table and rename my model namespace so that it is user-friendly as well.

6-mvc-crudoperations

Now I’m presented with the model designer illustrating the database object(s) exposed to me via the Entity Framework.
Should I need to make any changes to the model in the future, I’ll make them here instead of modifying the underlying “.cs” class.
The Object Browser also provides access to many aspects on my new model.

8-mvc-crudoperations

Next, I’ll add a controller that will use the newly created model to implement CRUD operations.
It’s imperative at this step for the “template” I select “Controller with read/write actions and views…” – this setting ensures my CRUD methods are created.

9-mvc-crudoperations

As you can see, I now have methods to Create, Retrieve (Details), Update, and Delete records for my table.

10-mvc-crudoperations

As well as CRUD methods, the wizard also created the necessary views that provide the user with forms form they to utilize the methods.

11-mvc-crudoperations

Here’s the Details view. Notice “@model” statement which begins the view.
This enables the contents of the view to use the “sales_people” model so that it may iterate through its records.
The “@Html.ActionLink()” method provides an HTML link to the Create view.
The “@foreach” statement begins the details portion of the page where each record is accessed and its properties are displayed to the user – “@Html.DisplayFor().”

12-mvc-crudoperations

Now I’m ready to run the site and access my SalesPeople controller.
The default Index view displays the all the records in the “sales_people” model along with links to Create, see the record’s Details, Edit the record, and Delete it.

13-mvc-crudoperations

First, I’m going to select the Create link to begin a new record.

14-mvc-crudoperations

Upon submitting the form, I now see my newly create sales person.

15-mvc-crudoperations

Usually, a record contains too many fields to display in the default view so I would normally select the Details view to display a more exhaustive view of the record’s fields.

16-mvc-crudoperations

Let’s say I wish to modify the record.
The Edit link enables me to do just that and I’ve decided to slightly change each field’s value.

17-mvc-crudoperations

Upon submitting my changes I see them displayed back at the default view.
Now I’m going to use the “Delete” link to remove my newly created record.

18-mvc-crudoperations

I’m prompted to confirm that I really do want to delete this record to which I confirm by clicking the “Delete” button.

19-mvc-crudoperations

Now I’m back at the default view with the original record set, excluding the test record I created, retrieved, updated, and then deleted.

20-mvc-crudoperations

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s