在 ASP.NET MVC 4 中创建可编辑的 WebGrid

如何解决在 ASP.NET MVC 4 中创建可编辑的 WebGrid

我需要在 ASP.NET MVC 4 中创建一个可编辑的 WebGrid，通过它我将能够编辑、删除和更新网格本身中的数据。

我已经尝试过教程的建议，但在 VS 2019 调试视图中返回是

代码的 JavaScript 部分似乎不起作用...

如何解决这个问题？

我的代码如下所示：

查看

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>

控制器

    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);
    }