Asp.Net MVC With jQuery Ajax CRUD Operations Using JSON and EF

In this article, we’ll implement CRUD operations in Asp.Net MVC with jQuery Ajax Using JSON and Entity Framework.

You can download this project source code from here  :  https://goo.gl/kPCjWm

Create Asp.Net MVC Project

First of all, let’s create an Asp.net MVC Project, Open your Visual Studio.

Go to File > New > Project ( Ctrl+Shift+N).

Then select MVC Template.

Now we have a brand new Asp.Net MVC Application. Before continuing with this project, let me create SQL Server database for this application.

Create a Database

I use Management Studio to create and manage SQL Server DB. A database with name ‘jQueryAjaxDB’ is created.

In this application, we’ll deal with details of employees. So an employee table is created using following SQL Script.

That is enough for database part. Back to Visual Studio, then add ADO.NET Entity Data Model for the database.

Add Entity Model for Database

In-order to add Entity Model inside Models folder. Right click on Models Folder,Add > New Item. I have named this Entity Model as DBModels.

Select Generate from database.

In Entity Data Model Wizard, Click On New Connection.

Provide SQL Server instance details and  then select the DB – jQueryAjaxDB.

As per previous Entity Data Model Wizard window, we’ll save DB Connection string in WebConfig as DBModel. After creating this Entity Model, there will be a class with this name ( DBModel ). We’ll create an object of this class in-order to interact with database.

From Entity Data Model Wizard, you will get following window, select tables that we want to add inside the Entity Model.

Click on Finish. Diagrammatic Representation of newly created EF Model looks like this.

Inside this DBModels.edmx, you can see a DBModels.Context.cs file for DBModel Class. we’ll create an object of this class to work with database.

DBModels.tt > Employee.cs contains Employee Class, which contains properties corresponding to SQL Table columns, So Employee class will be model class for this MVC application..

Add MVC Controller

Right click on Controllers folder,  Add > Controller. Select Empty MVC Template, then name your controller as EmployeeController. Currently this Employee controller has one action method Index. In-order to implement CRUD Operations, we’ll add following action methods in Employee Controller.

• Index –  Display other action method views using tab controller. Like Home/ Dashboard for the controller.
• ViewAll – Return an HTML table, to list records from Employee table.
• HttpGet AddOrEdit – Should return a view containing form for Insert and Update Operation. If the method parameter id is zero, we’ll return form for Insert Operation otherwise It will be form to update an employee with EmployeeID is equal to given id parameter.
• HttpPost AddOrEdit – Form returned from HttpGet AddOrEdit will be posted to this action method. Inside this action method, Insert Or Update Operation will be done based on EmployeeId inside emp object.
• HttpPost Delete – Used to Delete an employee record with given EmployeeID through id parameter.

I want to make the Employee controller as default controller, for that you can update RouteConfig as follows.

Let’s Start the Design

By default, there is a global style sheet – Site.css inside Content folder.Added some additional CSS rules inside the file.

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}


ul.nav.nav-tabs {
    margin : 10px 0px;
}

ul.nav.nav-tabs li:not(.active) a {
        background-color: #eeeeee;
        color: grey;
    }

    ul.nav.nav-tabs li.active a {
        border-top: 3px solid #16a765;
    }


    .loaderbody {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position : absolute;
    background-color:rgba(128,128,128,0.2);
    z-index : 2147483647;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position : fixed;
    top : 45%;
    left : 40%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

We have added a new JavaScript file Scripts.js inside Scripts folder. Apart from these we’ll use two jQuery plugins inside this application, they are jQuery Datatable and NotifyJS. Datatable plugin is used to add more useful functions to a normal HTML table. In-order to add NotifyJS Plugin, you can go to the plugin website – NotifyJs, then download minified java script file – notify.min.js. Add this script file inside Scripts folder. Later in this article, we’ll discuss how we can use these two plugins.

For an MVC Application, default layout page will be _Layout.cshtml (Inside /Views/Shared Folder). Made some changes to default nav bar and footer. Finally _Layout.cshtml file looks like this.