Post
Ask Question
sangeetha k

sangeetha k

  • NA
  • 207
  • 51k

Inplace editing in mvc5 gridview can anyone help

Apr 12 2018 3:57 AM
My update phase in #dal
public int UpdateOrEditEmployee(string propertyName,string value, int empid)
{
try
{
using (AdventureWorksEntities empDbentity = new AdventureWorksEntities())
{
var status = false;
var message = "";
var users = empDbentity.tblEmployees.Find(empid);
if(users!=null)
{
empDbentity.Entry(users).Property(propertyName).CurrentValue = value;
empDbentity.SaveChanges();
status = true;
}
else
{
message = "Error!";
}
#bal
 
public int UpdateOrEditEmployee(string value,int empid,string propertyName)
{
try
{
return empdata.UpdateOrEditEmployee(propertyName, value, empid);
}
catch(Exception ex)
{
throw ex;
}
}
#controller
[HttpPost]
public ActionResult UpdateOrEditEmployee(string propertyName,string value, int id)
{
var status=false;
var message="";
try
{
EmployeeBusiness EmpBusiness = new EmployeeBusiness();
var empid = EmpBusiness.UpdateOrEditEmployee(propertyName, id, value);
var response = new { value = value, status = status, message = message };
JObject o = JObject.FromObject(response);
return Content(o.ToString());
return View();
}
 
 
 
#View for the grid
 
@using PagedList;
@using PagedList.Mvc;
@model IPagedList<EmployeeEntityLayer.EmployeeEntity>
@{
Layout = null;
ViewBag.Title = "EmployeeDetails";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EmployeeForm</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<style>
.Delete{
color:green;
}
.table td{
width:25%;
}
</style>
</head>
<body>
<div class="panel panel-info margin">
<div class="panel-heading"><b>Registered Employess</b></div>
<div class="panel-body">
<div class="col-sm-12 container">
<table id="EmpTable" class="table table-striped table-responsive table-bordered" style="width:100%">
<thead>
<tr>
<th>EmpLoyee ID</th>
<th>Employee Name</th>
<th>Designation</th>
<th>Employee Image</th>
<th>Salary</th>
<th>Email</th>
<th>Department</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr> <td scope="row"> @Html.DisplayFor(model => item.Empid, new { data_id = "@item.Empid", data_propertyname = "EmpId", @class = "edit" })</td>
<td> @Html.DisplayFor(model => item.Empname, new { data_id = "@item.Empid", data_propertyname = "EmpName", @class = "edit" })</td>
<td > @Html.DisplayFor(model => item.Designation, new { data_id = "@item.Empid", data_propertyname = "Designation", @class = "edit" })</td>
@*<td>
<img src="@Url.Content(@item.Empimage)" alt />
</td>*@
<td>
@{
var base64 = Convert.ToBase64String(item.ImageData);
var imagesrc = string.Format("data:image/jpeg;base64,{0}", base64);
<img src='@imagesrc' style="max-width:100px;max-height:100px;" data-id="@item.Empid" data-propertyname="Employee Image" />
}
</td>
<td >@Html.DisplayFor(model => item.Salary, new { data_id = "@item.Empid", data_propertyname = "Salary", @class = "edit" })</td>
<td data-id ="@item.Empid" class="edit"> @Html.DisplayFor(model => item.Email, new { data_id = "@item.Empid", data_propertyname = "Email", @class = "edit" })</td>
<td data-id="@item.Empid" class="edit">@Html.DisplayFor(model => item.Department, new { data_id = "@item.Empid", data_propertyname = "Department", @class = "edit" })</td>
<td>
<a href="#" data-id="@item.Empid" id="btnDelete" class="Delete" role="button" >
<span class="glyphicon glyphicon-trash"></span>
</a></td>
</tr>
}
</tbody>
</table>
@Html.PagedListPager(Model, page => Url.Action("EmployeeDetails", new { page }))
<input type="submit" id="btnback" value=" GetBack" class="btn btn-default" />
</div>
</div>
</div>
@section scripts{--------this is the section iam using for editing the cell but its not hitting can anyone help?
<script src="https://www.appelsiini.net/download/jquery.jeditable.js"></script>
<script>
$(document.ready(function () {
debugger;
$("#EmpTable").on('click','.Delete',(function () {
debugger;
var empID = $(this).attr('data-id');
var oldValue='';
$('.edit').editable('/Employee/UpdateOrEditEmployee?id='+empID, {
cssclass: 'jeditForm',
tooltip: 'Click to edit me....',
width: 'none',
height: 'none',
onsubmit: function (settings, original) {
oldValue = original.revert;
},
submitdata: function () {
return {
id: $(this).data('Empid'),
PropertyName:$(this).data('propertyname')
}
},
callback: function (value,settings) {
var jsonData = $.parseJSON(value);
if (jsonData.status) {
$(this).text(jsonData.value);
}
else {
$(this).text(oldValue);
}
}
})
}))
}))
</script>
}
<script>
$(document).ready(function () {
$("#EmpTable").on('click','.Delete',(function () {
debugger;
var empID = $(this).attr('data-id');
window.location.href = "/Employee/DeleteEmployee?empid=" + empID;
}));
$("#btnback").click(function () {
debugger;
window.location.href = '@Url.Action("Employee", "Employee")';
});
})
</script>
</body>
</html>