Hi,
i can able to edit and delete the row in the department table.
i am getting edit and delete option for employee table.
but not getting for department table.
@model IEnumerable<jQuery_AJAX_MVC.Models.Department>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div class="topnav">
<a href="welcomepage">HOME</a>
<a href="Addingemp">EMPLOYEE FORM</a>
<a href="Index">LOGOUT</a>
</div>
<div>
<table id="tblDepartments" class="table" cellpadding="0" cellspacing="0">
<tr>
<th style="width:100px">Depid</th>
<th style="width:150px">Depname</th>
<th style="width:150px">Mname</th>
</tr>
@foreach (jQuery_AJAX_MVC.Models.Department department in Model)
{
<tr>
<td class="Depid">
<span>@department.Depid</span>
</td>
<td class="Depname">
<span>@department.Depname</span>
<input type="text" value="@department.Depname" style="display:none" />
</td>
<td class="Mname">
<span>@department.Mname</span>
<input type="text" value="@department.Mname" style="display:none" />
</td>
<td>
<a class="Edit" href="javascript:;">Edit</a>
<a class="Update" href="javascript:;" style="display:none">Update</a>
<a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
<a class="Delete" href="javascript:;">Delete</a>
</td>
</tr>
}
</table>
<center>
<h2>ADD NEW DEPARMENT</h2>
<label id="Label1">DEPID</label>
<input type="text" id="txtDepid" style="width:140px" />
<br />
<br />
<label id="Label2">DEPNAME</label>
<input type="text" id="txtDepname" style="width:140px" />
<br />
<br />
<label id="Label3">MNAME</label>
<input type="text" id="txtMname" style="width:140px" />
<br />
<br />
<input type="button" id="btnAdding" value="Add" />
</center>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
$(function () {
//Remove the dummy row if data present.
if ($("#tblDepartments tr").length > 2) {
$("#tblDepartments tr:eq(1)").remove();
} else {
var row = $("#tblDepartments tr:last-child");
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
}
});
function AppendRow(row, Depid, Depname, Mname) {
$(".Depid", row).find("span").html(Depid);
$(".Depid", row).find("input").val(Depid);
//Bind Empname.
$(".Depname", row).find("span").html(Depname);
$(".Depname", row).find("input").val(Depname);
//Bind Empage.
$(".Mname", row).find("span").html(Mname);
$(".Mname", row).find("input").val(Mname);
row.find(".Edit").show();
row.find(".Delete").show();
$("#tblDepartments").append(row);
};
//Add event handler.
$(document).on("click", "#btnAdding", function () {
var txtDepid = $("#txtDepid");
var txtDepname = $("#txtDepname");
var txtMname = $("#txtMname");
var _department = {};
_department.Depid = txtDepid.val();
_department.Depname = txtDepname.val();
_department.Mname = txtMname.val();
$.ajax({
type: "POST",
url: "/api/AjaxAPI/InsertDepartment",
data: JSON.stringify(_department),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var row = $("#tblDepartments tr:last-child");
if ($("#tblDepartments tr:last-child span").eq(0).html() != " ") {
row = row.clone();
}
AppendRow(row, r.Depid, r.Depname, r.Mname );
txtDepid.val("");
txtDepname.val("");
txtMname.val("");
}
});
});
$(document).on("click", "#tblDepartments .Edit", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find("input").length > 0) {
$(this).find("input").show();
$(this).find("span").hide();
}
});
row.find(".Update").show();
row.find(".Cancel").show();
row.find(".Delete").hide();
$(this).hide();
});
$(document).on("click", "#tblDepartments .Update", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find("input").length > 0) {
var span = $(this).find("span");
var input = $(this).find("input");
span.html(input.val());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Delete").show();
row.find(".Cancel").hide();
$(this).hide();
var _department = {};
_department.Depid = row.find(".Depid").find("span").html();
_department.Depname= row.find(".Depname").find("span").html();
_department.Mname = row.find(".Mname").find("span").html();
$.ajax({
type: "POST",
url: "/api/AjaxAPI/UpdateDepartment",
data: JSON.stringify(_department),
contentType: "application/json; charset=utf-8",
dataType: "json"
});
});
$(document).on("click", "#tblDepartments .Cancel", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find("input").length > 0) {
var span = $(this).find("span");
var input = $(this).find("input");
input.val(span.html());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Delete").show();
row.find(".Update").hide();
$(this).hide();
});
$(document).on("click", "#tblDepartments .Delete", function () {
if (confirm("Do you want to delete this row?")) {
var row = $(this).closest("tr");
var _department = {};
_department.Depid = row.find("span").html();
$.ajax({
type: "POST",
url: "/api/AjaxAPI/DeleteDepartment",
data: JSON.stringify(_department),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if ($("#tblDepartments tr").length > 2) {
row.remove();
} else {
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
}
}
});
});
</script>
</div>
</body>
</html>
HomeController.cs
using jQuery_AJAX_MVC.Models;
using jQuery_AJAX_WebAPI_MVC.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace jQuery_AJAX_WebAPI_MVC.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult welcomepage()
{
return View();
}
public ActionResult Addingemp()
{
EmployeeEntities4 entities = new EmployeeEntities4();
List<Employee> employees = entities.Employees.ToList();
if (employees.Count == 0)
{
employees.Add(new Employee());
}
return View(employees);
}
public ActionResult Adddep()
{
EmployeeEntities4 entities = new EmployeeEntities4();
List<Department> departments = entities.Departments.ToList();
if(departments.Count==0)
{
departments.Add(new Department());
}
return View(departments);
}
}
}
AJAXcontroller.cs
using jQuery_AJAX_MVC.Models;
using jQuery_AJAX_WebAPI_MVC.Models;
using System;
using System.Web.Http;
using System.Web.UI.WebControls.WebParts;
using System.Linq;
namespace jQuery_AJAX_WebAPI_MVC.Controllers
{
public class AjaxAPIController : ApiController
{
[Route("api/AjaxAPI/Loginvalidate")]
[HttpPost]
public bool Loginvalidate(PersonModel person)
{
if ((person.Name=="admin")&&(person.Password=="admin"))
{
return true;
}
else
{
return false;
}
}
[Route("api/AjaxAPI/InsertEmployee")]
[HttpPost]
public Employee InsertEmployee(Employee _employee)
{
using (EmployeeEntities4 entities = new EmployeeEntities4())
{
entities.Employees.Add(_employee);
entities.SaveChanges();
}
return _employee;
}
[Route("api/AjaxAPI/UpdateEmployee")]
[HttpPost]
public bool UpdateEmployee(Employee _employee)
{
using (EmployeeEntities4 entities = new EmployeeEntities4())
{
Employee updatedEmployee = (from c in entities.Employees
where c.Empid== _employee.Empid
select c).FirstOrDefault();
updatedEmployee.Empid = _employee.Empid;
updatedEmployee.Empname = _employee.Empname;
updatedEmployee.Empage = _employee.Empage;
updatedEmployee.Deptname= _employee.Deptname;
entities.SaveChanges();
}
return true;
}
[Route("api/AjaxAPI/DeleteEmployee")]
[HttpPost]
public void DeleteEmployee(Employee _employee)
{
using (EmployeeEntities4 entities = new EmployeeEntities4())
{
Employee employee = (from c in entities.Employees
where c.Empid == _employee.Empid
select c).FirstOrDefault();
entities.Employees.Remove(employee);
entities.SaveChanges();
}
}
[Route("api/AjaxAPI/InsertDepartment")]
[HttpPost]
public Department InsertDepartment(Department _department)
{
using (EmployeeEntities4 entities= new EmployeeEntities4())
{
entities.Departments.Add(_department);
entities.SaveChanges();
}
return _department;
}
[Route("api/AjaxAPI/UpdateDepartment")]
[HttpPost]
public bool UpdateDepartment(Department _department)
{
using (EmployeeEntities4 entities = new EmployeeEntities4())
{
Department updatedDepartment = (from c in entities.Departments
where c.Depid == _department.Depid
select c).FirstOrDefault();
updatedDepartment.Depid = _department.Depid;
updatedDepartment.Depname = _department.Depname;
updatedDepartment.Mname = _department.Mname;
entities.SaveChanges();
}
return true;
}
[Route("api/AjaxAPI/DeleteDepartment")]
[HttpPost]
public void DeleteDepartment(Department _department)
{
using (EmployeeEntities4 entities = new EmployeeEntities4())
{
Department department = (from c in entities.Departments
where c.Depid == _department.Depid
select c).FirstOrDefault();
entities.Departments.Remove(department);
entities.SaveChanges();
}
}
}
}
