Hi,
I have created an editable WebGrid in ASP.NET MVC 4 through which I will be able to edit, delete and update the data in the grid itself.
I can't validate data in edit row in WebGrid and show JavaScript alert and blocking editing row if field are null or empty.
I tried to search posts, without any result either, maybe I didn't use the right words.
How to do resolve this?
My code is shown below:
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
EmployeeEntities entities = new EmployeeEntities();
List<Employee> employees = entities.Employees.ToList();
employees.Insert(0, new Employee());
return View(employees.ToList());
}
[HttpPost]
public JsonResult InsertEmployee(Employee employee)
{
using (EmployeeEntities entities = new EmployeeEntities())
{
entities.Employees.Add(employee);
entities.SaveChanges();
}
return Json(employee);
}
[HttpPost]
public ActionResult UpdateEmployee(Employee employee)
{
using (EmployeeEntities entities = new EmployeeEntities())
{
Employee updatedEmployee = (from c in entities.Employees
where c.EmployeeID == employee.EmployeeID
select c).FirstOrDefault();
updatedEmployee.FirstName = employee.FirstName;
updatedEmployee.BirthDate = employee.BirthDate;
entities.SaveChanges();
}
return new EmptyResult();
}
}
View
@model IEnumerable<Employee>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source: Model, canPage: true, canSort: false);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
columns: webGrid.Columns
(
webGrid.Column(header: "Id", format: @<span class="label">@item.EmployeeID</span>, style: "EmployeeId"),
webGrid.Column(header: "Name", format: @<span>
<span class="label">@item.FirstName</span>
<input class="text" type="text" value="@item.FirstName" style="display:none" />
</span>, style: "Name"),
webGrid.Column(header: "DOB", format: @<span>
<span class="label">@item.BirthDate</span>
<input class="text DOB" type="text" value="@item.BirthDate" style="display:none" />
</span>, style: "DOB"),
webGrid.Column(format:@<span class="link">
<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>
</span>)
)
)
<br />
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 150px">
Name:<br />
<input type="text" id="txtName" style="width:140px" />
</td>
<td style="width: 150px">
Birth Date:<br />
<input type="text" id="txtDOB" style="width:140px" />
</td>
<td style="width: 100px">
<br />
<input type="button" id="btnAdd" value="Add" />
</td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="Stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
jQuery(function ($) {
var options = $.extend({},
$.datepicker.regional["es"], {
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
yearRange: "-2:+0",
highlightWeek: true,
maxDate: 0
});
$(".DOB").datepicker(options);
});
</script>
<script type="text/javascript">
$(function () {
var row = $("#WebGrid TBODY tr:eq(0)");
if ($("#WebGrid TBODY tr").length > 1) {
row.remove();
} else {
row.find(".label").html("");
row.find(".text").val("");
row.find(".link").hide();
}
});
function AppendRow(row, employeeId, name, dob) {
//Bind EmployeeId.
$(".EmployeeId", row).find(".label").html(employeeId);
//Bind Name.
$(".Name", row).find(".label").html(name);
$(".Name", row).find(".text").val(name);
//Bind BirthDate.
$(".DOB", row).find(".label").html(dob);
$(".DOB", row).find(".text").val(dob);
row.find(".link").show();
$("#WebGrid TBODY").append(row);
};
$("body").on("click", "#btnAdd", function () {
var txtName = $("#txtName");
var txtDOB = $("#txtDOB");
var employee = {};
employee.FirstName = txtName.val();
employee.BirthDate = txtDOB.val();
$.ajax({
type: "POST",
url: "/Home/InsertEmployee",
data: '{employee:' + JSON.stringify(employee) + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var row = $("#WebGrid TBODY tr:last-child").clone();
if (row.find(".label").is(":empty")) {
$("#WebGrid TBODY tr:last-child").remove();
}
AppendRow(row, r.EmployeeID, r.FirstName, r.BirthDate);
txtName.val("");
txtDOB.val("");
}
});
});
$("body").on("click", "#WebGrid TBODY .Edit", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find(".text").length > 0) {
$(this).find(".text").show();
$(this).find(".label").hide();
}
});
row.find(".Update").show();
row.find(".Cancel").show();
$(this).hide();
});
$("body").on("click", "#WebGrid TBODY .Update", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find(".text").length > 0) {
var span = $(this).find(".label");
var input = $(this).find(".text");
span.html(input.val());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Cancel").hide();
$(this).hide();
var employee = {};
employee.EmployeeID = row.find(".EmployeeId").find(".label").html();
employee.FirstName = row.find(".Name").find(".label").html();
employee.BirthDate = row.find(".DOB").find(".label").html();
$.ajax({
type: "POST",
url: "/Home/UpdateEmployee",
data: '{employee:' + JSON.stringify(employee) + '}',
contentType: "application/json; charset=utf-8",
dataType: "json"
});
});
$("body").on("click", "#WebGrid TBODY .Cancel", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find(".text").length > 0) {
var span = $(this).find(".label");
var input = $(this).find(".text");
input.val(span.html());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Update").hide();
$(this).hide();
});
</script>
</body>
</html>
