Contribute
ASP.NET

CRUD Operation In ASP.NET MVC Using jQuery JSON With Dapper ORM

Background

In my last article CRUD Operations In ASP.NET MVC 5 Using Dapper ORM we have learned how create CRUD operations in ASP.NET MVC with the help of Dapper ORM but if you closely observed there is a whole page postback, lots of code and many forms which maximize the process time, and also huge server utilization, so to overcome this we will learn another approach to create the CRUD operations in ASP.NET MVC Using jQuery JSON with Dapper ORM, which will cover the drawbacks of first approach.

I have written this article focusing on beginners so they can understand the basics of CRUD operations in ASP.NET MVC Using jQuery Json. Please read my previous articles using the following links to understand the basics about MVC:

So let us understand in brief about Dapper ORM

What is Dapper

Dapper is the Open source ORM which is used to map Microsoft platform .NET classes to the database.

Step 1: Create an MVC Application.

Now let us start with a step by step approach from the creation of a simple MVC application as in the following:

  1. "Start", then "All Programs" and select "Microsoft Visual Studio 2015".

  2. "File", then "New" and click "Project", then select "ASP.NET Web Application Template", then provide the Project a name as you wish and click OK. After clicking, the following window will appear:



  3. As shown in the preceding screenshot, click on Empty template and check MVC option, then click OK. This will create an empty MVC web application whose Solution Explorer will look like the following:


Step 2 : Add The Reference of Dapper ORM into Project.

Now next step is to add the reference of Dapper ORM into our created MVC Project. Here are the steps:

  1. Right click on Solution ,find Manage NuGet Package manager and click on it.
  2. After as shown into the image and type in search box "dapper".
  3. Select Dapper as shown into the image .
  4. Choose version of dapper library and click on install button.


After installing the Dapper library, it will be added into the References of our solution explorer of MVC application such as:


If wants to learn how to install correct Dapper library , watch my video tutorial using following link,
I hope you have followed the same steps and installed dapper library.
 
Step 3: Create Model Class.

Now let us create the model class named EmpModel.cs by right clicking on model folder as in the following screenshot:



Note: It is not mandatory that Model class should be in Model folder, it is just for better readability you can create this class anywhere in the solution explorer. This can be done by creating different folder name or without folder name or in a separate class library.

EmpModel.cs class code snippet:
  1. public class EmpModel  
  2. {  
  3.     public int Id { get; set; }        
  4.     public string Name {get; set; }   
  5.     public string City { get; set; }          
  6.     public string Address { get; set; }  
  7. } 
Step 4 : Create Controller.

Now let us add the MVC 5 controller as in the following screenshot:



After clicking on Add button it will show the window. specify the Controller name as Home with suffix Controller: 

Note: The controller name must be having suffix as 'Controller' after specifying the name of controller.
 
Step 5 : Create Table and Stored procedures.

Now before creating the views let us create the table name Employee in database according to our model fields to store the details:


I hope you have created the same table structure as shown above. Now create the stored procedures to insert, update, view and delete the details as in the following code snippet: 
  1. --To Insert Records    
  2.  Create procedure [dbo].[AddNewEmpDetails]      
  3.  (      
  4.     @Name varchar (50),      
  5.     @City varchar (50),      
  6.     @Address varchar (50)      
  7.  )      
  8.  as      
  9.  begin      
  10.     Insert into Employee values(@Name,@City,@Address)      
  11.  End       
  12.      
  13.  --To View Added Records    
  14.  CREATE Procedure [dbo].[GetEmployees]        
  15.  as        
  16.  begin        
  17.     select Id as Empid,Name,City,Address from Employee      
  18.  End     
  19.      
  20.  --To Update Records    
  21.  Create procedure [dbo].[UpdateEmpDetails]      
  22.  (      
  23.     @EmpId int,      
  24.     @Name varchar (50),      
  25.     @City varchar (50),      
  26.     @Address varchar (50)      
  27.  )      
  28.  as      
  29.  begin      
  30.     Update Employee      
  31.     set Name=@Name,      
  32.     City=@City,      
  33.     Address=@Address      
  34.     where Id=@EmpId      
  35.  End       
  36.      
  37.  --To Delete Records     
  38.  Create procedure [dbo].[DeleteEmpById]      
  39.  (      
  40.     @EmpId int      
  41.  )      
  42.  as      
  43.  begin      
  44.     Delete from Employee where Id=@EmpId      
  45.  End   
Run the above script in sql it will generates the stored procedure for CRUD operation .
 
Step 6: Create Repository class.

Now create Repository folder and Add EmpRepository.cs class for database related operations, Now create methods in EmpRepository.cs to handle the CRUD operation as in the following code snippet:
  1. public class EmpRepository    
  2. {    
  3.      SqlConnection con;    
  4.     //To Handle connection related activities    
  5.     private void connection()    
  6.     {    
  7.         string constr = ConfigurationManager.ConnectionStrings["SqlConn"].ToString();    
  8.         con = new SqlConnection(constr);    
  9.     }    
  10.     //To Add Employee details    
  11.     public void AddEmployee(EmpModel objEmp)    
  12.     {    
  13.           
  14.         try    
  15.         {    
  16.       
  17.             DynamicParameters ObjParm = new DynamicParameters();    
  18.             ObjParm.Add("@Name", objEmp.Name);    
  19.             ObjParm.Add("@City", objEmp.City);    
  20.             ObjParm.Add("@Address", objEmp.Address);    
  21.             connection();    
  22.             con.Open();    
  23.             con.Execute("AddNewEmpDetails", ObjParm, commandType: CommandType.StoredProcedure);    
  24.             con.Close();    
  25.         }    
  26.         catch (Exception ex)    
  27.         {    
  28.             throw ex;    
  29.         }    
  30.     }    
  31.     //To view employee details     
  32.     public List<EmpModel> GetAllEmployees()    
  33.     {    
  34.         try    
  35.         {    
  36.             connection();    
  37.             con.Open();    
  38.             IList<EmpModel> EmpList = SqlMapper.Query<EmpModel>(    
  39.                               con, "GetEmployees").ToList();    
  40.             con.Close();    
  41.             return EmpList.ToList();    
  42.         }    
  43.         catch (Exception)    
  44.         {    
  45.             throw;    
  46.         }    
  47.     }    
  48.     //To Update Employee details    
  49.     public void UpdateEmployee(EmpModel objUpdate)    
  50.     {    
  51.         try    
  52.         {    
  53.               
  54.   
  55.             DynamicParameters objParam = new DynamicParameters();    
  56.             objParam.Add("@EmpId", objUpdate.Id);    
  57.             objParam.Add("@Name", objUpdate.Name);    
  58.             objParam.Add("@City", objUpdate.City);    
  59.             objParam.Add("@Address", objUpdate.Address);    
  60.             connection();    
  61.             con.Open();    
  62.             con.Execute("UpdateEmpDetails", objParam, commandType: CommandType.StoredProcedure);    
  63.             con.Close();    
  64.         }    
  65.         catch (Exception)    
  66.         {    
  67.             throw;    
  68.         }    
  69.     }    
  70.     //To delete Employee details    
  71.     public bool DeleteEmployee(int Id)    
  72.     {    
  73.         try    
  74.         {    
  75.             DynamicParameters param = new DynamicParameters();    
  76.             param.Add("@EmpId", Id);    
  77.             connection();    
  78.             con.Open();    
  79.             con.Execute("DeleteEmpById", param, commandType: CommandType.StoredProcedure);    
  80.             con.Close();    
  81.             return true;    
  82.         }    
  83.         catch (Exception ex)    
  84.         {    
  85.             //Log error as per your need     
  86.             throw ex;    
  87.         }    
  88.     }    
  89. }  
 Note
  1. In the above code we are manually opening and closing connection, however you can directly pass the connection string to the dapper without opening it. Dapper will automatically handle it.

  2. Log the exception in database or text file as per your convenience, since in the article I have not implemented it .
Step 7: Create Methods into the HomeController.cs file.

Now open the HomeController.cs and create the following action methods:
  1. public class HomeController : Controller    
  2. {    
  3.     //Get Employee List with json data    
  4.     public JsonResult GetEmpDetails()    
  5.     {    
  6.         EmpRepository EmpRepo = new EmpRepository();    
  7.         return Json(EmpRepo.GetAllEmployees(),JsonRequestBehavior.AllowGet);    
  8.   
  9.     }    
  10.       
  11.     public ActionResult AddEmployee()    
  12.     {    
  13.            
  14.         return View();    
  15.     }    
  16.     //Get record by Empid for edit    
  17.     public ActionResult Edit(int?id)    
  18.     {    
  19.         EmpRepository EmpRepo = new EmpRepository();    
  20.         return View(EmpRepo.GetAllEmployees().Find(Emp => Emp.Id == id));    
  21.     }    
  22.   //Add Employee details with json data    
  23.     [HttpPost]    
  24.     public JsonResult AddEmployee(EmpModel EmpDet)    
  25.   
  26.     {              
  27.         try    
  28.         {    
  29.               
  30.             EmpRepository EmpRepo = new EmpRepository();    
  31.             EmpRepo.AddEmployee(EmpDet);    
  32.             return Json("Records added Successfully.");    
  33.             
  34.         }    
  35.         catch    
  36.         {    
  37.             return Json("Records not added,");    
  38.         }    
  39.     }    
  40.   
  41.  //Delete the records by id    
  42.     [HttpPost]    
  43.     public JsonResult Delete(int id)    
  44.     {               
  45.         EmpRepository EmpRepo = new EmpRepository();    
  46.         EmpRepo.DeleteEmployee(id);    
  47.        return Json("Records deleted successfully.", JsonRequestBehavior.AllowGet);    
  48.     }    
  49.  //Updated edited records    
  50.     [HttpPost]         
  51.     public JsonResult Edit(EmpModel EmpUpdateDet)    
  52.     {            
  53.         EmpRepository EmpRepo = new EmpRepository();    
  54.         EmpRepo.UpdateEmployee(EmpUpdateDet);    
  55.         return Json("Records updated successfully.", JsonRequestBehavior.AllowGet);    
  56.     }    
  57.     //Get employee list of Partial view     
  58.     [HttpGet]    
  59.     public PartialViewResult EmployeeDetails()    
  60.     {    
  61.   
  62.         return PartialView("_EmployeeDetails");    
  63.   
  64.     }    
  65. }    
Step 8: Create Views.

Create the view to Add the employees

To create the View to add Employees, right click on view folder and then click Add view. Now specify the view name as AddEmployee or as you wish, template name and model class in EmpModel.cs and click on Add button.

After clicking on Add button it will creates the AddEmployee view having extension .cshtml , Now write the jQuery Ajax post method to insert the records into the database.
 
Create jQuery Ajax post method to Add Records
  1. $(document).ready(function()  
  2. {  
  3.     //firing function on button click     
  4.     $("#btnsave").click(function()  
  5.     {  
  6.         //Creating Javascript array to post it as json data    
  7.         var EmpModel = {  
  8.             Name: $("#Name").val(),  
  9.             City: $("#City").val(),  
  10.             Address: $("#Address").val()  
  11.         };  
  12.         $.ajax(  
  13.         {  
  14.             type: "POST",  
  15.             URL: "/Home/AddEmployee",  
  16.             dataType: "json",  
  17.             contentType: "application/json",  
  18.             data: JSON.stringify(  
  19.             {  
  20.                 EmpDet: EmpModel  
  21.             }),  
  22.             error: function(response)  
  23.             {  
  24.                 alert(response.responseText);  
  25.             },  
  26.             //After successfully inserting records    
  27.             success: function(response)  
  28.             {  
  29.                 //Reload Partial view to fetch latest added records    
  30.                 $('#DivEmpList').load("/Home/EmployeeDetails");  
  31.                 alert(response);  
  32.             }  
  33.         });  
  34.     });  
  35. });  
Now after adding jQuery Ajax post method then AddEmployee.cshtml view source code will be look like as follows.

AddEmployee.cshtml  
  1. @model CrudOperationUsingDapperWihtjQueryJson.Models.EmpModel  
  2.   
  3. @{  
  4.     ViewBag.Title = "Add Employee";  
  5. }  
  6. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  7. <script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>  
  8. <script>  
  9.     $(document).ready(function () {  
  10.         //firing function on button click  
  11.         $("#btnsave").click(function () {  
  12.             //Creating Javascript array to post it as json data  
  13.             var EmpModel = {  
  14.                 Name: $("#Name").val(),  
  15.                 City: $("#City").val(),  
  16.                 Address: $("#Address").val()  
  17.             };  
  18.             $.ajax({  
  19.                 type: "POST",  
  20.                 URL: "/Home/AddEmployee",  
  21.                 dataType: "json",  
  22.                 contentType: "application/json",  
  23.                 data: JSON.stringify({ EmpDet: EmpModel }),  
  24.                 error: function (response) {  
  25.                     alert(response.responseText);  
  26.   
  27.                 },  
  28.                 //After successfully inserting records  
  29.                 success: function (response) {  
  30.   
  31.                     //Reload Partial view to fetch latest added records  
  32.                     $('#DivEmpList').load("/Home/EmployeeDetails");  
  33.                     alert(response);  
  34.   
  35.                 }  
  36.             });  
  37.   
  38.         });  
  39.   
  40.   
  41.     });  
  42. </script>  
  43. <div class="form-horizontal">  
  44.     <hr />  
  45.     @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
  46.     <div class="form-group">  
  47.         @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })  
  48.         <div class="col-md-10">  
  49.             @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })  
  50.             @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })  
  51.         </div>  
  52.     </div>  
  53.     <div class="form-group">  
  54.         @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })  
  55.         <div class="col-md-10">  
  56.             @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })  
  57.             @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })  
  58.         </div>  
  59.     </div>  
  60.   
  61.     <div class="form-group">  
  62.         @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })  
  63.         <div class="col-md-10">  
  64.             @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })  
  65.             @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })  
  66.         </div>  
  67.     </div>  
  68.   
  69.     <div class="form-group" id="divSave">  
  70.         <div class="col-md-offset-2 col-md-10">  
  71.             <input type="submit" name="SaveData" id="btnsave" value="Save" class="btn btn-primary" />  
  72.         </div>  
  73.     </div>  
  74.     @*Calling partial view of employee list*@  
  75.     <div class="form-group" id="DivEmpList">  
  76.         <div class="col-md-12">  
  77.             @Html.Partial("_EmployeeDetails")  
  78.         </div>  
  79.     </div>  
  80. </div> 
To View Added Employees

To view the employee details let us create the partial view named _EmployeeDetails:
 
Create the jQuery Ajax function to fetch and delete employee records
  1. $(document).ready(function()  
  2. {  
  3.     //Get the list of employee records in json format    
  4.     var tr;  
  5.     $.getJSON("/Home/GetEmpDetails", function(json)  
  6.     {  
  7.         $.each(json, function(i, EmpData)  
  8.         {  
  9.             var Empid = EmpData.Id;  
  10.             tr = $('<tr/>');  
  11.             tr.append("<td class='Name'>" + EmpData.Name + "</td>");  
  12.             tr.append("<td class='City'>" + EmpData.City + "</td>");  
  13.             tr.append("<td class='Address'>" + EmpData.Address + "</td>");  
  14.             tr.append("<td>" + "<a Onclick='return false;' class='DeleteCss' href=/Home/Delete/" + Empid + ">Delete</a>" + " | " + "<a class='EditCss' href=/Home/Edit/" + Empid + ">Edit</a>" + "</td>");  
  15.             $('#TblEmpDet').append(tr);  
  16.         });  
  17.     });  
  18.     //Delete the records    
  19.     $('#TblEmpDet').on('click', 'td a.DeleteCss', function()  
  20.     {  
  21.         var DeleteUrl = $(this).attr("href");  
  22.         if (confirm("Are you sure wants to delete ?."))  
  23.         {  
  24.             $.ajax(  
  25.             {  
  26.                 url: DeleteUrl,  
  27.                 dataType: "json",  
  28.                 type: "POST",  
  29.                 contentType: "application/json",  
  30.                 error: function(err)  
  31.                 {  
  32.                     alert('Unable to delete record.');  
  33.                 },  
  34.                 success: function(response)  
  35.                 {  
  36.                     $('#DivEmpList').load("/Home/EmployeeDetails");  
  37.                 }  
  38.             });  
  39.         }  
  40.     });  
  41. });  
 Now after adding the above function the _EmployeeDetails.cshtml partial view source code will be look like as follows.

 _EmployeeDetails.cshtml
  1. <script type="text/javascript">  
  2.     $(document).ready(function()  
  3.     {  
  4.         //Get the list of employee records in json format    
  5.         var tr;  
  6.         $.getJSON("/Home/GetEmpDetails", function(json)  
  7.         {  
  8.             $.each(json, function(i, EmpData)  
  9.             {  
  10.                 var Empid = EmpData.Id;  
  11.                 tr = $('<tr/>');  
  12.                 tr.append("<td class='Name'>" + EmpData.Name + "</td>");  
  13.                 tr.append("<td class='City'>" + EmpData.City + "</td>");  
  14.                 tr.append("<td class='Address'>" + EmpData.Address + "</td>");  
  15.                 tr.append("<td>" + "<a Onclick='return false;' class='DeleteCss' href=/Home/Delete/" + Empid + ">Delete</a>" + " | " + "<a class='EditCss' href=/Home/Edit/" + Empid + ">Edit</a>" + "</td>");  
  16.                 $('#TblEmpDet').append(tr);  
  17.             });  
  18.         });  
  19.         //Delete the records    
  20.         $('#TblEmpDet').on('click', 'td a.DeleteCss', function()  
  21.         {  
  22.             var DeleteUrl = $(this).attr("href");  
  23.             if (confirm("Are you sure wants to delete ?."))  
  24.             {  
  25.                 $.ajax(  
  26.                 {  
  27.                     url: DeleteUrl,  
  28.                     dataType: "json",  
  29.                     type: "POST",  
  30.                     contentType: "application/json",  
  31.                     error: function(err)  
  32.                     {  
  33.                         alert('Unable to delete record.');  
  34.                     },  
  35.                     success: function(response)  
  36.                     {  
  37.                         $('#DivEmpList').load("/Home/EmployeeDetails");  
  38.                     }  
  39.                 });  
  40.             }  
  41.         });  
  42.     });  
  43. </script>  
  44. <table id="TblEmpDet" class="table  table-bordered table-hover">  
  45.     <thead>  
  46.         <tr>  
  47.             <th> Name </th>  
  48.             <th> City </th>  
  49.             <th> Address </th>  
  50.             <th></th>  
  51.         </tr>  
  52.     </thead>  
  53.     <tbody></tbody>  
  54. </table>  
View to Update Added Employees

Follow the same procedure and create Edit,cshtml view to edit the employees and create the following jQuery function to update the records.

jQuery Ajax function to update the records
  1. $(document).ready(function()  
  2. {  
  3.     //firing function on button click to update records    
  4.     $("#btnUpdate").click(function()  
  5.     {  
  6.         //creating javascript array to pass it as json data    
  7.         var EmpModel = {  
  8.             Id: $("#hdnId").val(),  
  9.             Name: $("#Name").val(),  
  10.             City: $("#City").val(),  
  11.             Address: $("#Address").val()  
  12.         };  
  13.         $.ajax(  
  14.         {  
  15.             type: "POST",  
  16.             URL: "/Home/Edit",  
  17.             dataType: "json",  
  18.             contentType: "application/json",  
  19.             data: JSON.stringify(  
  20.             {  
  21.                 EmpUpdateDet: EmpModel  
  22.             }),  
  23.             error: function(response)  
  24.             {  
  25.                 alert(response.responseText);  
  26.             },  
  27.             success: function(response)  
  28.             {  
  29.                 alert(response);  
  30.                 //redirect to the AddEmployee view after successfully updating records    
  31.                 window.location.href = "/Home/AddEmployee";  
  32.             }  
  33.         });  
  34.     });  
  35. });  
After adding the above function the Edit.cshtml view source code will be look like as:

Edit.cshtml
  1. @model CrudOperationUsingDapperWihtjQueryJson.Models.EmpModel  
  2.   
  3. @{  
  4.     ViewBag.Title = "Edit";  
  5. }  
  6. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  7. <script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>  
  8. <script>  
  9.     $(document).ready(function () {  
  10.         //firing function on button click to update records  
  11.         $("#btnUpdate").click(function () {  
  12.             //creating javascript array to pass it as json data  
  13.             var EmpModel = {  
  14.                 Id: $("#hdnId").val(),  
  15.                 Name: $("#Name").val(),  
  16.                 City: $("#City").val(),  
  17.                 Address: $("#Address").val()  
  18.             };  
  19.   
  20.             $.ajax({  
  21.                 type: "POST",  
  22.                 URL: "/Home/Edit",  
  23.                 dataType: "json",  
  24.                 contentType: "application/json",  
  25.                 data: JSON.stringify({ EmpUpdateDet: EmpModel }),  
  26.                 error: function (response) {  
  27.                     alert(response.responseText);  
  28.                 },  
  29.                 success: function (response) {  
  30.                     alert(response);  
  31.                     //redirect to the AddEmployee view after successfully updating records  
  32.                     window.location.href = "/Home/AddEmployee";  
  33.   
  34.                 }  
  35.             });  
  36.         });  
  37.     });  
  38. </script>  
  39.   
  40.   
  41. <div class="form-horizontal">  
  42.   
  43.     <hr />  
  44.     @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
  45.     @Html.HiddenFor(model => model.Id, new { @id = "hdnId" })  
  46.   
  47.     <div class="form-group">  
  48.         @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })  
  49.         <div class="col-md-10">  
  50.             @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })  
  51.             @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })  
  52.         </div>  
  53.     </div>  
  54.     <div class="form-group">  
  55.         @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })  
  56.         <div class="col-md-10">  
  57.             @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })  
  58.             @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })  
  59.         </div>  
  60.     </div>  
  61.   
  62.     <div class="form-group">  
  63.         @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })  
  64.         <div class="col-md-10">  
  65.             @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })  
  66.             @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })  
  67.         </div>  
  68.     </div>  
  69.   
  70.     <div class="form-group">  
  71.         <div class="col-md-offset-2 col-md-10">  
  72.             <input type="button" id="btnUpdate" value="Update" class="btn btn-default" />  
  73.         </div>  
  74.     </div>  
  75. </div> 
Step 9: Run the Application.

Now run the application the AddEmployee view appears as in the following screenshot.
 
 
Now enter the details like as in following screenshot.
 
 
And on clicking save button similarly add another record, then the added records get added into the database and it will be displayed in the following table. 

 

Update Record

In the above list of records we added city as USA by mistake so let us edit it by clicking on edit hyperlink then record will be displayed in edit mode correct it as per your need.

 
Now after correcting records click on update button then the updated records will be shown are as follows:

 

Deleting Records

To delete the record click on delete button it will ask you for confirmation before deleting records as follows:

 
 
Click on ok to delete record or cancel if you can not be wantsdon't want to delete the record. After deleting the record the remaining records will be shown in table as follows:

 
From the preceding examples we have learned how to implement CRUD Operation In ASP.NET MVC Using jQuery Json with Dapper ORM.

Note:
  • Configure the database connection in the web.config file depending on your database server location.
  • Download the Zip file of the sample application for a better understanding.
  • Since this is a demo, it might not be using proper standards, so improve it depending on your skills.
  • This application is created completely focusing on beginners.
  • In the Repository code we manually opening and closing connection, however you can directly pass the connection string to the dapper without opening it, dapper will automatically handled.
  • Log the exception in database or text file as per you convenience, since in this article I have not implemented it.
  • Since we are Using jQuery So don't forgot to add the reference of jQuery library.
Summary

My next article will explains about the action filters in MVC. I hope this article is useful for all readers. If you have any suggestion please contact me.
 
Read more articles on ASP.NET:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs