Introduction

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.

• Part 1 : Perform read functionality of CRUD Operation.
• Part 2 : Perform create and update functionality of CRUD Operation.
• Part 3 : Perform delete functionality of CRUD Operation.

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

  
[HttpPost]
[ValidateAntiForgeryToken]
[ActionName("Delete")]
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)
        {
            dc.Contacts.Remove(v);
            dc.SaveChanges();
            status = true;
            message = "Successfully Deleted!";
        }
        else
        {
            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() {
    $.ajax({
        url: '/home/delete',
        type: 'POST',
        dataType: 'json',
        data: {
            'id': $('#ContactID').val(),
            '__RequestVerificationToken': $('input[name=__RequestVerificationToken]').val()
        },
        success: function (data) {
            alert(data.message);
            if (data.status) {
                $dialog.dialog('close');
                LoadContacts();
            }
        },
        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) {
    e.preventDefault();
    DeleteContact();
});
            

Step-5: Run Application.