For beginners, CRUD Applications are the applications that uses 4 operations for manipulating data. Those 4 operations are Inserting data, Retrieving data, Editing data and Deleting data. You can also find these commands in Databases such as Select, Insert, Delete and Update.

To follow the drill, First Create a New MVC 4 internet Project, "CrudMvcApp". Now goto Models Folder in Solution Explorer, Right Click , goto add Class and name it "Restaurant.cs" and add the following Code.

Create another class file in Model with the name RestaurantContext.cs, yes this is the same file that we have created in our previous exercises, place the following code in it. You need to add namespace for DbContext "using System.Data.Entity;" above your class file. This is the same code that I have used in my previous blog related Code First and Data Annotation.

In order to avoid complexity i am using only one model for time being and without relation simple implimentation of Code First

Goto Controllers Folder in Solution Explorer, Right Click on the folder goto Add > Controller and name the Controller "RestaurantController.cs". From Scoffolding Option Select Template as "MVC Controller with empty read/write actions".




While looking at controller you will notice that there are some methods created for you by Visual Studio. These methods are based on CRUD operation. in which Create is used for Creating record, Index and Details are use for Retrieving, Edit for Updating and Delete for Deleting record.

You will also notice that there are 2 overload methods for Create, Update and Delete; and if you further notice you will find [HttpPost] in each of overloaded methods. Basically there are some web methods use by web application to communicate with web server when request has been made by browser, normally 2 commands are mainly use GET, POST. 

Now question is what are major difference between both?, Its very easy when you type url address on your browser and hits enter its GET method, and when you fills registration form or log in form and press submit button on the page it uses POST method.

By default its [HttpGet], if you don't mention any web method above the Action method. Lets start with Create() Action Method. Write Click on the View() function in the Create Action Method and Goto Add View this will open Add View window for you, as we did in our last post.


From Add View Window check the option Create a strongly-typed view this will open active the Model Class dropdown, select Restaurant from the list since restaurant is the name of our model class. Secondly if you don't find Restaurant in the list, close add view window and build the project, after building do the above task again this time you will surely get a Restaurant in the list.
  

Now, you will notice that Scaffold Template drop down will be activated, Select Create from Scaffold option. and Click Add button. This will create a view template in HTML with razor code in it.

Now Go Back to RestaurantController.cs and Press F5 or Run the Project. Navigate to http://localhost:<Port>/Restaurant/Create. This what you will get when you navigate.


Feeling excited to see the beautiful result without getting your hands dirty in HTML. This is one of the great feature that MVC 4 provides, This form is almost dummy if you try to fill it and submit it, it will do nothing. To get use of it we need to code little at Create(FormCollection collection) overload, this is the overload that comes to working when information is posted by Web Client (i.e. HttpPost) . 
Add following line just after where Controller Class started.




Replace FormCollection collection with Restaurant restaurant  in signature and add the following code in Action Method.


Now we need listing in order to view save data to do so, go to action method "Index" and on the View Method, Right Click on it and Add a View by clicking Add View.

Checked the Create strongly typed view option. Select Restaurant as a Model Class from Drop Down and from scaffold option select list. No Go back to Index Action method and on View add this code as an argument "db.Restaurants.ToList()".  Similar to the code given below.

Now run The project and redirect your page to URL "http://localhost:<PortAddress>/Restaurant/". if you have followed all the steps correctly you will have results similar to image given below.


Now Click Create link on the page which will open the following image. Fill the form and Click Create.


After Clicking Create Button, your will get record inserted in database and also appearing in result.


Now goto Edit Action Method one that takes id has an argument, and write the following code.
Now add view for this Action Method, by Right clicking the View(restaurant) and selecting add view.
Now do the same drill what we did above but this time select Edit from scaffold drop down.

 And in the other Edit Action Method, one with 2 arguments replace the argument with Restaurant restaurant and place following code in order to update changes to database record.

In similar fashion try adding Delete View, and in the HttpPost Overload method of Delete write the following code.
Now test the application By Creating, Delete, Editing, also validation

TAGS : | | | | | |