I need to create 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.
This is the tutorial
I have tried suggestion's of tutorial but in VS 2019 debug on the view the return is
It seems that the JavaScript part of the code is not working...
How to do resolve this?
My code is shown below:
View
IEnumerable<Ins.Models.PersonModel>
@{
ViewBag.Title = "Grid";
WebGrid grid = new WebGrid(source: Model, canPage: true, canSort: false, rowsPerPage: 5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Recovery</title>
<style>
.edit-mode {
}
.edit-user {
}
.edit-user display-mode {
}
.save-user edit-mode {
}
.display-mode {
}
.cancel-user {
}
.webgrid-table {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
width: 650px;
display: table;
border-collapse: collapse;
border: solid px #C5C5C5;
background-color: white;
}
.webgrid-table td, th {
border: 1px solid #C5C5C5;
padding: 3px 7px 2px;
}
.webgrid-header, .webgrid-header a {
background-color: #E3E3E3;
color: black;
text-align: left;
text-decoration: none;
}
.webgrid-footer {
}
.webgrid-row-style {
padding: 3px 7px 2px;
}
.webgrid-alternating-row {
background-color: #F5F5F5;
padding: 3px 7px 2px;
}
.col1Width {
width: 50px;
}
.col2Width {
width: 200px;
}
hr.new3 {
border-top: 1px dotted #a19c9c;
}
</style>
<script type="text/javascript">
$(function () {
$('.edit-mode').hide();
$('.edit-user, .cancel-user').on('click', function () {
var tr = $(this).parents('tr:first');
tr.find('.edit-mode, .display-mode').toggle();
});
$('.save-user').on('click', function () {
var tr = $(this).parents('tr:first');
var Name = tr.find("#Name").val();
var UserID = tr.find("#UserID").html();
tr.find("#lblName").text(Name);
tr.find('.edit-mode, .display-mode').toggle();
var UserModel =
{
"ID": UserID,
"Name": Name
};
$.ajax({
url: '/User/ChangeUser/',
data: JSON.stringify(UserModel),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data);
}
});
});
})
</script>
</head>
<body>
<br />
<div class="row">
<div class="col-md-4">
Welcome <strong>@HttpContext.Current.User.Identity.Name</strong>
</div>
</div>
<br />
<div class="row">
<div class="col-md-offset-0">
<h4>@ViewBag.Title</h4>
</div>
</div>
<hr class="new3">
<div class="row">
<div id="gridContent" style="padding:20px;">
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns:
grid.Columns(
grid.Column("ID", format: @<text>
<span class="display-mode">@item.sID </span>
<label id="UserID" class="edit-mode">@item.sID</label>
</text>, style: "col1Width"),
grid.Column("TicketId", "TicketId", format: @<text>
<span class="display-mode">
<label id="lblName">@item.TicketId</label>
</span>
<input type="text" id="Name" value="@item.TicketId" class="edit-mode" />
</text>, style: "col2Width"),
grid.Column("Action", format: @<text>
<button class="edit-user display-mode">Edit</button>
<button class="save-user edit-mode">Save</button>
<button class="cancel-user edit-mode">Cancel</button>
</text>, style: "col3Width", canSort: false)
))
</div>
</div>
</body>
</html>
Controller
public JsonResult ChangeUser(PersonModel model)
{
string message = "Success";
return Json(message, JsonRequestBehavior.AllowGet);
}
public ActionResult Recovery()
{
List<PersonModel> lmd = new List<PersonModel>();
DataSet ds = new DataSet();
Connection.Connection con = new Connection.Connection();
ds = con.mydata();
foreach (DataRow dr in ds.Tables[0].Rows)
{
lmd.Add(new PersonModel
{
sID = Convert.ToInt64(dr["sID"]),
TicketId = (string)dr["TicketId"],
});
}
return View(lmd);
}
question from:
https://stackoverflow.com/questions/65647034/create-an-editable-webgrid-in-asp-net-mvc-4 
