Asp.Net MVC With jQuery Ajax CRUD Operations Using JSON and EF - CodAffection
[the_ad_placement id="before-content"]

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

jQuery Ajax CRUD with ASP.NET MVC

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).

Image Showing Creation Of Asp.Net MVC Project

Then select MVC Template.

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.

Create an ADO.Net Entity Model

Select Generate from database.

Select Generate From Database

In Entity Data Model Wizard, Click On New Connection.

Entity Data Model Wizard 1

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

Database connection details

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.

Select Employee Table

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

Entity Model Design

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 NotifyJSDatatable 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.

28 thoughts on “Asp.Net MVC With jQuery Ajax CRUD Operations Using JSON and EF”

  1. The View names AddOrEdit is Not Working fine for me. When clicking on the submit button it shows me the source code of AddOrEdit.cshtml instead of the Records Web Page.

    Please Help ASAP.

  2. It’s wonderful… But with employee form data i also have an Html table with more than 10 columns for employee experience. So my question is that How will we pass html table data array with this form data? And how to handle both form data and array at controller end.. Plz provide a seperate video/text tutorial

  3. Manikandan Pandian

    Your tutorial is working like charm.But may I know where is the code for the following:
    1)show “drop down box (eg:10)” Entries
    2)and also for the search box and searching algorithm

    3)Thanks for your Post with neat pics,steps and explanation

  4. Your tutorial is great! I’ve used it to learn Dot Net MVC programming. Please I have a challenge. I have two tables in my db and I’m to display both on a single View. I created a ViewModel from my models for the two tables so that a single button can submit data into the two tables. I was able to create forms successfully for the tables in a View. The challenge now is that want to split the forms into a tab panel but the form keeps displaying in a single tab. Please help me.

  5. Hi
    Can you please help me for creating curd operation with all html helper like texbox,text area ,dropdowlist, the radio button and check box etc

  6. This was exactly what I needed to help me on one of my projects. But I couple things I still don’t understand how to do….
    1. Some of the fields I want to set as non-editable. Not sure how to do that.
    2. For one of the fields I want to generate some logic that creates the information. In the example you provided with employee id … I would like to have the system generate the id based on the last id in the database. In my project instead of employees, I created quotes and want the system to generate the quote number when you click on new button and then user fills in the rest of the info.
    3. When I run local …. works great …. when I run from server … get ajax timeout issues. Not sure what I am doing wrong on remote IIS server setup. Any suggestion?

  7. Hi thanks for the awesome tutorial! Please help, I want to show data on the table from two database tables, where I need to bring “StaffTypeID” from table 1 that must show “StaffTypeName” from table 2?

    1. Manikandan Pandian

      Trying reading “displaying multiple models in single view from C# corner”
      1)at first I too suffered from that but its very easy ,there is about 6 methods I think so,…tuple,dynamic ,creating a view model etc..read through that tutorial
      2)for displaying the data from table 2 that matches the ID with table 1,
      try using joins in LINQ .
      hope it is helpful.

  8. Your tutorial is awesome . the best i have seing online with mvc . but for some reason i dont know wy my popup is not pop up . i am using visual studio 2015 . these are my codes
    function PopupForm(url) {
    var formDiv = $(”);
    $.get(url)
    .done(function (response) {
    formDiv.html(response);
    Popup = formDiv.dialog({
    autoOpen: true,
    resizable: false,
    title: ‘Fill Drivers Report’,
    height: 500,
    width:700,
    close: function () {
    Popup.dialog(‘destroy’).remove();
    }

    });
    }
    );
    }

    }

  9. hy Thanks so much for your tutorials.They have shaped my understanding in very tremendous way.
    However i have one request though, Iam doing my final year projects and we are struggling with securing our application in terms of user roles, user management,adding roles etc. Can you please make a tutorial that address those issues. God bless you

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
2 Shares
Share via
Copy link
Powered by Social Snap