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
![enter image description here](https://i.stack.imgur.com/slzEq.png)
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