Part 3 - Basic CRUD operations using Jquery ajax and modal popup in ASP.NET MVC4.


In this post, I am going to implement Basic CRUD (Create, Read, Update, Delete) operations using Jquery ajax and modal popup in ASP.NET MVC4 application.
I have split the entire application split into following 3 parts for making things more simple and understandable specially for beginners.

Step-1: Add new action into your controller for get view for Delete contact.

Here I have used "Delete" Action. Please write below code
public ActionResult Delete(int id)
    var c = GetContact(id);
    if (c == null)
        return HttpNotFound();
    return PartialView(c);

Step-2: Add partial view for the "Delete" Action & design.

Right Click on Shared folder (under Views) > Add > View... > Enter View Name > Select View Engine (Razor) > Check "Create a strong-typed view" > Select your model class > Check "Create as a Partial View" > Add.
[N:B:Please Rebuild solution before add view.]

Step-3: Add an another action for POST method for Delete contact from the database.

Please write below code
public ActionResult DeleteContact(int id)
    bool status = false;
    string message = "";
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
        var v = dc.Contacts.Where(a => a.ContactID.Equals(id)).FirstOrDefault();
        if (v != null)
            status = true;
            message = "Successfully Deleted!";
            return HttpNotFound();

    return new JsonResult { Data = new { status = status, message = message } };

Step-4: Add an javascript function (DeleteContact) for Delete Contact

Open javascript file (we have created in part 1 step 7, here "dotnetawesome.CRUDContacts.js") and write following code
//Delete Contact
function DeleteContact() {
        url: '/home/delete',
        type: 'POST',
        dataType: 'json',
        data: {
            'id': $('#ContactID').val(),
            '__RequestVerificationToken': $('input[name=__RequestVerificationToken]').val()
        success: function (data) {
            if (data.status) {
        error: function () {
            $('#msg').html('<div class="failed">Error ! Please try again.</div>');
Add following jquery code inside $(document).ready for delete contact from database
//Delete Contact
$('body').on('submit', '#deleteForm', function (e) {

Step-5: Run Application.

Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.