Sunday, February 7, 2016

MVC CRUD Operations Using jQuery JSON and LINQ To SQL Class

Step 1 : Database

Create an EmployeeData table in a SQL database as in the following

Step 2 : LINQ to SQL class

Create a LINQ to SQL class to read data from the table as in the following:

Add Linq to Sql Class

After using the Server Explorer and adding an EmployeeData table in the surface area as in the following:
Add Table
Now add a controller to the CRUD operations for EmployeeData.

So open the Solution Explorer and right-click on the controller folder and add a controller as in the following:

Select Controller

Add Controller Name

Step 3 : Controller 

Now create a select controller, an insert controller, an edit controller and a the Delete controller as in the following:

Step  4 : View

Now create a view and a partialview on a right-click corresponding to the controller as in the following:
Add view to controller

1. Index View (select data)
Add Index view

In this figure see the view name is auto create, it's not changed. After selecting a Template and Model class as shown in the following figure.

2. Create View (Insert data)
Create a view to create a partial view .
Add Create view

This section also created a script for the model data insert into the table.

Create View Code

3. Edit View (Update Employee)
Also create an Editview as a Partial view.
Add Edit View

Edit view code

In this view also create an update record script as in the following.
Finally all the operation views are created and can be seen in the project solution. 

Step: Models

Now create a Model for EmployeeInfo as in the following:

Add Models class


Models Class Code
Now run your MVC example in a browser.
Run Application

Now click the Add New Employee button and insert a record as in the following:
Add Record

Now delete the record without 130 with the delete button.
Record Delete

Selected Record open with edit dialog

Press the update button and close the dialog and check the record in the webgrid.
Record Update