Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc

In the previous article, we have discussed insert update and delete data in MVC without Entity Framework ,In this post, We will do insert, update, and delete(Crud Operation) functionality in MVC using entity framework with ajax call jquery.

If also looking for the perform list, insert, update and delete in a single view in asp.net MVC then you have come to the right. Because in this post we will perform CRUD operation in a single view in MVC5 with the help of bootstrap modal popup.That means in this article we will use a bootstrap modal popup for performing the Crud operation.

We will cover the following point in this post

• CRUD operations in MVC using bootstrap modal popup
• Insert, update, delete i. e Crud operations using jquery ajax and modal
• Crud operation in MVC using the jquery data table

So Let’s start, step by step to learn how easily we can complete this task in any project. We will try to create a basic View where Users can see all the lists of records in a Table with add button for adding new database records, an edit button for updating existing database records, and delete links to delete any existing records with a confirmation alert box.

we have divided the entire article into the following parts.

1. Creating New ASP.NET MVC Project for our task
2. Creating Database Table for performing database operations
3. Adding Connection EntityFramework in our project
4. Creating Controller
5. Adding Action Method in Controller
6. Creating View from Action Method
7. Configure RouteConfig.cs file
8. Run your Project

Step 1- Create New ASP.NET MVC Project 

Step 2- Creating Database Table for performing database operations

Let’s create the database table, for our crud operation. I have created a table called TblPatient with column Id, PatientName, PatientNumber, PatientEmail, Adress, and BloodGroup.below is the SQL Script of the table you can use for testing purposes.

CREATE TABLE [dbo].[TblPatient](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[PatientName] [nvarchar](250) NULL,
	[PatientNumber] [nvarchar](100) NULL,
	[PatientEmail] [nvarchar](150) NULL,
	[Address] [nvarchar](500) NULL,
	[BloodGroup] [nvarchar](100) NULL,
 CONSTRAINT [PK_TblPatient] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)
) ON [PRIMARY]

Step 3- Adding Connection EntityFramework in our project

Try the below step and follow the image diagram if you are new to the entity framework.
Right-click on the Model folder and select add a new item =>select Ado .net entity data model from the option and perform the steps described in the below image.

It will create a model class for the table(representing the database table structure) which we will use as Model Class for the View.

Open TblPatient.cs you can see the model class

namespace CrudJqueryAjax.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class TblPatient
    {
        public int Id { get; set; }
        public string PatientName { get; set; }
        public string PatientNumber { get; set; }
        public string PatientEmail { get; set; }
        public string Address { get; set; }
        public string BloodGroup { get; set; }
    }
}

Step 4. Creating Controller

Now let’s add a controller for performing database operation, Right-click on the Controller folder in the project and click on add an empty controller.I have created controller with Patient named.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CrudJqueryAjax.Controllers
{
    public class PatientController : Controller
    {
        // GET: Patient
        public ActionResult Index()
        {
            return View();
        }
    }
}

Step 5. Adding Action Method in Controller

Now let’s write the logic in our controller, Open PatientController, and add the following action methods. Here, I am going to add five action methods to our controller

1. For returning Index view which shows the list of patients- Index()
2. Returning All Patient list in the database- GetPatientList()
3. Returning single record from database By Id- GetPatientbyID()
4. Action for creating the record in the database– AddPatient()
5. For Updating records in the database– UpdatePatient()
6. For deleting a record in the database– DeletePatient ()

PatientController.CS

using CrudJqueryAjax.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CrudJqueryAjax.Controllers
{
    public class PatientController : Controller
    {
        // GET: Patient
        private SampleRestApiEntities db = new SampleRestApiEntities();

        // GET: Patient
        public ActionResult Index()
        {
            return View();

        }
        public JsonResult GetPatientList()
        {
            return Json(db.TblPatients.ToList(), JsonRequestBehavior.AllowGet);
        }
        public JsonResult AddPatient(TblPatient tblPatient)
        {
            string status = "success";
            try
            {
                db.TblPatients.Add(tblPatient);
                db.SaveChanges();
            }
            catch(Exception ex)
            {
                status = ex.Message;
            }
            return Json(status, JsonRequestBehavior.AllowGet);

        }
        public JsonResult GetPatientbyID(int PatientId)
        {
            try
            {
                var Patient = db.TblPatients.Where(a => a.Id == PatientId).FirstOrDefault();
                return Json(Patient, JsonRequestBehavior.AllowGet);
            }
            catch(Exception ex)
            {
                return Json(null, JsonRequestBehavior.AllowGet);
            }
          

        }
        public JsonResult UpdatePatient(TblPatient tblPatient)
        {

            string status = "success";
            try
            {
                db.Entry(tblPatient).State = EntityState.Modified;
                db.SaveChanges();

            }
            catch (Exception ex)
            {
                status = ex.Message;

            }
            return Json(tblPatient, JsonRequestBehavior.AllowGet);
        }
        public JsonResult DeletePatient(int PatientId)
        {
            string status = "success";
            try
            {

                var pateint = db.TblPatients.Find(PatientId);
                db.TblPatients.Remove(pateint);
                db.SaveChanges();

            }
            catch (Exception ex)
            {
                status = ex.Message;

            }
            return Json(status, JsonRequestBehavior.AllowGet);
        }
        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

SampleRestApiEntities is entity framwork DbContext object you can find name in web.config or context.cs file

6. Creating View from Action Method

Now Right-click on Index ActionMethod, add empty View, please make sure to check “Use a Layout page” option. it will create the layout and Bootsrap files for our project.

Now Open Index.cshtml and Copy paste the below code

Index.cshtml

@{
    ViewBag.Title = "Index";
}
<h2>Patient Record</h2>
@* Table for showing the list of Records from the database *@
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="OpenAddPopup();">Add New Patient</button><br /><br />
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>
                ID
            </th>
            <th>
                PatientName
            </th>
            <th>
                PatientNumber
            </th>
            <th>
                PatientEmail
            </th>
            <th>
                Address
            </th>
            <th>
                BloodGroup
            </th>
            <th>
                Action
            </th>
        </tr>
    </thead>
    <tbody class="tbody"></tbody>
</table>

@*BootsTrap Model Popup for Adding and Updating the  Patient Record *@
<div class="modal fade" id="AddUpdateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title" id="AddUpdateModelLabel">Add Patient</h4>
            </div>
            <div class="modal-body">
                <form>
                    @* hidden filed for storing Id *@
                    <input type="hidden" id="hfpatientId" />
                    <div class="form-group">
                        <label for="txtPatientName">Patient Name</label>
                        <input type="text" class="form-control" id="txtPatientName" placeholder="Patient Name" />
                    </div>
                    <div class="form-group">
                        <label for="txtPatientNumber">Patient Number</label>
                        <input type="text" class="form-control" id="txtPatientNumber" placeholder="Patient Number" />
                    </div>
                    <div class="form-group">
                        <label for="txtPatientEmail">Patient Email</label>
                        <input type="email" class="form-control" id="txtPatientEmail" placeholder="Patient Email" />
                    </div>
                    <div class="form-group">
                        <label for="txtAddress">Address</label>
                        <input type="text" class="form-control" id="txtAddress" placeholder="Address" />
                    </div>
                    <div class="form-group">
                        <label for="txtBloodGroup">BloodGroup</label>
                        <input type="text" class="form-control" id="txtBloodGroup" placeholder="BloodGroup" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btnAddpatient" onclick="return AddPatient();">Create Patient</button>
                <button type="button" class="btn btn-primary" id="btnUpdatepatient" style="display:none;" onclick="UpdatePatient();">Update Patient</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>


<script type="text/javascript">
    //Load Data in Table when documents is ready
    $(document).ready(function () {
        BindpatientData();
    });

    //Bind Data function which is responoisble for loading all data from database
    function BindpatientData() {
        $.ajax({
            url: "/Patient/GetPatientList",
            type: "GET",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                if (result) {
                    //itetrate thorugh each record and bind it to td
                    var html = '';
                    $.each(result, function (key, item) {
                        html += '<tr>';
                        html += '<td>' + item.Id + '</td>';
                        html += '<td>' + item.PatientName + '</td>';
                        html += '<td>' + item.PatientNumber + '</td>';
                        html += '<td>' + item.PatientEmail + '</td>';
                        html += '<td>' + item.Address + '</td>';
                        html += '<td>' + item.BloodGroup + '</td>';
                        html += '<td><a href="#" onclick="return OpenEditPopup(' + item.Id + ')">Edit</a> | <a href="#" onclick="DelelePatient(' + item.Id + ')">Delete</a></td>';
                        html += '</tr>';
                    });
                    $('.tbody').html(html);
                }

            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    }

    //************Adding Record in the database***********


    function OpenAddPopup() {
        //title text
        $("#AddUpdateModelLabel").text("Add Patient")
        //clear all input
        ClearAllInput();
        //open popup
        $('#AddUpdateModel').modal('show');
        //show add patient button and hide update button
        $('#btnUpdatepatient').hide();
        $('#btnAddpatient').show();
    }

    //Add Data Function
    function AddPatient() {
        var res = ValidateUserInput();
        if (res == false) {
            return false;
        }
        var patientObj = {
            Id: $('#hfpatientId').val(),
            PatientName: $('#txtPatientName').val(),
            PatientNumber: $('#txtPatientNumber').val(),
            PatientEmail: $('#txtPatientEmail').val(),
            Address: $('#txtAddress').val(),
            BloodGroup: $('#txtBloodGroup').val(),
        };
        $.ajax({
            url: "/Patient/AddPatient",
            data: JSON.stringify(patientObj),
            type: "POST",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                //populate table with new record
                BindpatientData();
                //claer all input and hide model popup
                ClearAllInput();
                $('#AddUpdateModel').modal('hide');
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    }



    function OpenEditPopup(PatienId) {
        $("#AddUpdateModelLabel").text("Update Patient Detail")
        ClearAllInput();
        $.ajax({
            url: "/Patient/GetPatientbyID?PatientId=" + PatienId,
            typr: "GET",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success: function (result) {
                debugger;
                $("#AddUpdateModelLabel").val("Update Patient Detail")
                $('#hfpatientId').val(result.Id);
                $('#txtPatientName').val(result.PatientName);
                $('#txtPatientNumber').val(result.PatientNumber);
                $('#txtPatientEmail').val(result.PatientEmail);
                $('#txtAddress').val(result.Address);
                $('#txtBloodGroup').val(result.BloodGroup);

                $('#AddUpdateModel').modal('show');
                $('#btnUpdatepatient').show();
                $('#btnAddpatient').hide();
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
        return false;
    }

    //function for updating Patient record
    function UpdatePatient() {
        var res = ValidateUserInput();
        if (res == false) {
            return false;
        }
        var patientObj = {
            Id: $('#hfpatientId').val(),
            PatientName: $('#txtPatientName').val(),
            PatientNumber: $('#txtPatientNumber').val(),
            PatientEmail: $('#txtPatientEmail').val(),
            Address: $('#txtAddress').val(),
            BloodGroup: $('#txtBloodGroup').val(),
        };
        if (!patientObj.Id || patientObj.Id<= 0) {
            alert("Invalid Id!");
            return false;
        }
        $.ajax({
            url: "/Patient/UpdatePatient",
            data: JSON.stringify(patientObj),
            type: "POST",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                BindpatientData();
                ClearAllInput();
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    }


    //function for deleting employee's record
    function DelelePatient(ID) {
        var ans = confirm("Are you sure you want to delete?");
        if (ans) {
            $.ajax({
                url: "/Patient/DeletePatient?PatientId=" + ID,
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (result) {
                    BindpatientData();
                },
                error: function (errormessage) {
                    alert(errormessage.responseText);
                }
            });
        }
    }

    function ClearAllInput() {
        $('#AddUpdateModel').modal('hide');
        $('#hfpatientId').val("");
        $('#txtPatientName').val("");
        $('#txtPatientNumber').val("");
        $('#txtPatientEmail').val("");
        $('#txtAddress').val("");
        $('#txtBloodGroup').val("");

        $('#txtPatientName').css('border-color', 'lightgrey');
        $('#txtPatientNumber').css('border-color', 'lightgrey');
        $('#txtPatientEmail').css('border-color', 'lightgrey');
        $('#txtAddress').css('border-color', 'lightgrey');
        $('#txtBloodGroup').css('border-color', 'lightgrey');
    }
    function ValidateUserInput() {
        var isValid = true;
        if ($('#txtPatientName').val().trim() == "") {
            $('#txtPatientName').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#txtPatientName').css('border-color', 'lightgrey');
        }
        if ($('#txtPatientNumber').val().trim() == "") {
            $('#txtPatientNumber').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#txtPatientNumber').css('border-color', 'lightgrey');
        }
        if ($('#txtPatientEmail').val().trim() == "") {
            $('#txtPatientEmail').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#txtPatientEmail').css('border-color', 'lightgrey');
        }
        if ($('#txtAddress').val().trim() == "") {
            $('#txtAddress').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#txtAddress').css('border-color', 'lightgrey');
        }

        if ($('#txtBloodGroup').val().trim() == "") {
            $('#txtBloodGroup').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#txtBloodGroup').css('border-color', 'lightgrey');
        }
        return isValid;
    }
</script>

Step 7- Configure RouteConfig.cs file

Open RouteConfig.cs file inside App_Start folder and Change in controller name from Home=>Patient
because when we want to open the index view inside the Patient controller at the start of the application.

Now Build project and run in the browser

Download Source Code

The post Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc appeared first on Software Development | Programming Tutorials.