Infinity Coding Tamizha: March 2022

Overview:

In this article, we are going to explain, how to add Edit and Delete icons employee information list ajax data table form design in asp.net MVC using bootstrap. now we are going to create step by step in this article.

add edit and delete icons in ajax datatable

Add Edit and Delete icons in MVC

Step 1: Open the project already created in the previous session.

Open the project

Step 2: add new ID model in ViewEmployeeModel.cs class file

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

namespace InsertUpdateMVC.Models
{
public class ViewEmployeeModel
{
public int ID { get; set; }
public int Sno { get; set; }
public string Employee { get; set; }
public string Designation { get; set; }

public string Salary { get; set; }
public string Address { get; set; }

}
}

Step 3: Add ID in Listemployee() Method in HomeController below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using InsertUpdateMVC.Models;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;

namespace InsertUpdateMVC.Controllers
{
public class HomeController : Controller
{
string constring = ConfigurationManager.ConnectionStrings["constring"].ConnectionString;
public ActionResult Index()
{
return View();
}

public ActionResult About()
{
ViewBag.Message = "Your application description page.";

return View();
}

public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";

return View();
}
public ActionResult Employee()
{

return View();
}

[HttpPost]
public ActionResult Employee(InsertUpdateModel model)
{
try
{
using(SqlConnection con=new SqlConnection(constring))
{
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "prInsertUpdateEmployee";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Id", model.ID);
cmd.Parameters.AddWithValue("@employee", model.Employee);
cmd.Parameters.AddWithValue("@designation", model.Designation);
cmd.Parameters.AddWithValue("@salary", model.Salary);
cmd.Parameters.AddWithValue("@address", model.Address);
cmd.Connection = con;
con.Open();
int affect=cmd.ExecuteNonQuery();
if(affect >0)
{
ViewBag.Message = "Data saved successfully..!";
}
con.Close();
}
ModelState.Clear();
}
catch(Exception ex)
{
throw new Exception(ex.Message);
}
return View();
}

public ActionResult Jsonemployeelist()
{
InsertUpdateModel model = new InsertUpdateModel();
model.listemployee = Listemployee();
var listemployee = model.listemployee;
return Json(new { data = listemployee }, JsonRequestBehavior.AllowGet);
}

public List<ViewEmployeeModel> Listemployee()
{
List<ViewEmployeeModel> list = new List<ViewEmployeeModel>();
try
{

using (SqlConnection con=new SqlConnection(constring))
{
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "prListemployee";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = con;
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
while(reader.Read())
{
ViewEmployeeModel model = new ViewEmployeeModel();
model.Sno = reader["SNo"].GetHashCode();
model.ID = reader["ID"].GetHashCode();
model.Employee = reader["Employee"].ToString();
model.Designation = reader["Designation"].ToString();
model.Salary = reader["Salary"].ToString();
model.Address = reader["Address"].ToString();
list.Add(model);
}
con.Close();
}
}
catch(Exception ex)
{
throw new Exception(ex.Message);
}

return list;
}

}
}

Step 4: Add ID model in View Page and Ajax script

@model InsertUpdateMVC.Models.InsertUpdateModel
@{
ViewBag.Title = "Employee";
}
<h2>Employee Information (Insert, Edit, Update, Delete and List)</h2>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Styles.Render("~/Content/css")
<link href="~/Content/bootstrap.datatables.css" rel="stylesheet" />
<link href="~/Content/dataTables.bootstrap.css" rel="stylesheet" />
<style>
.error {
color: white;
background-color: #f12e2e;
font-weight: bold;
font-size: 12px;
font-family: 'Times New Roman';
position: static;
display: inline-block;
z-index: 5;
}
.table-responsive {
overflow-x: hidden;
}
</style>
@using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{
<div class="container">
<div class="row">
<div class="col-lg-3">@Html.LabelFor(Model => Model.Employee)</div>
<div class="col-lg-3">@Html.TextBoxFor(Model => Model.Employee, new { @class = "form-control" })</div>
<div class="col-lg-1">
@Html.ValidationMessageFor(Model => Model.Employee, "", new { @class = "error" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-3">@Html.LabelFor(Model => Model.Designation)</div>
<div class="col-lg-3">@Html.TextBoxFor(Model => Model.Designation, new { @class = "form-control" })</div>
<div class="col-lg-1">
@Html.ValidationMessageFor(Model => Model.Designation, "", new { @class = "error" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-3">@Html.LabelFor(Model => Model.Salary)</div>
<div class="col-lg-3">@Html.TextBoxFor(Model => Model.Salary, new { @class = "form-control" })</div>
<div class="col-lg-1">
@Html.ValidationMessageFor(Model => Model.Salary, "", new { @class = "error" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-3">@Html.LabelFor(Model => Model.Address)</div>
<div class="col-lg-3">@Html.TextBoxFor(Model => Model.Address, new { @class = "form-control" })</div>
<div class="col-lg-1">
@Html.ValidationMessageFor(Model => Model.Address, "", new { @class = "error" })
</div>
</div>
<br />
<div class="col-lg-offset-4">
<button type="submit" class="btn btn-primary" value="Save">Save</button>

</div>
</div>
<br />
}
<div class="container">
<div class="panel panel-body">
<div class="row">
<table class="table table-responsive table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th>Action</th>
<th style="visibility:hidden">ID</th> // add ID column in table header
<th>S.No</th>
<th>Employee</th>
<th>Designation</th>
<th>Salary</th>
<th>Address</th>
</tr>
</thead>
</table>
</div>
</div>
</div>

@if (ViewBag.Message != null)
{
<script type="text/javascript">
{
alert('@ViewBag.Message')
}
</script>
}

@section scripts{
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/dataTables.bootstrap.js"></script>
<script src="~/Scripts/jquery.dataTables.js"></script>
<script src="~/Scripts/dataTables.bootstrap.min.js"></script>

Step 5: Select ID column in prListemployee store procedure

ALTER PROCEDURE [dbo].[prListemployee]

AS
BEGIN

SET NOCOUNT ON;

select ROW_NUMBER() over(order by ID) as SNo, ID, Employee,Designation,Salary,Address
from tblEmployee

END

Step 6: Create a new store procedure for Edit and Delete operation in employee information

// Edit store procedure below
CREATE PROCEDURE [dbo].[prEditEmployeeDetails]
@Id int
AS
BEGIN

SET NOCOUNT ON;

select ID, Employee,Designation, Salary,Address from tblEmployee where ID=@Id

END

// Delete store procedure below
CREATE PROCEDURE [dbo].[prDeleteEmployee]

@Id int
AS
BEGIN

SET NOCOUNT ON;

delete from tblEmployee where ID=@Id

END