如何在MVC3 Razor的Webgrid上实现编辑和删除？答案

【问题标题】：How to achieve edit and delete on Webgrid of MVC3 Razor?如何在MVC3 Razor的Webgrid上实现编辑和删除？
【发布时间】：2012-08-17 12:14:34
【问题描述】：

下面我给出了控制器、模型和视图。运行后，网格显示值，但我需要编辑值并删除同一页面上的值。我已经搜索并看到了一些示例，因为编辑、删除它们创建了单独的索引，但我需要的是编辑和删除应该在同一页面而不是另一个页面上完成。请给我一个解决方案。

控制器：

public ActionResult Index()
        {
            var PersonList = new List<Person>()
            {
            new Person(){Name="A", Age=20,Id =1},
            new Person(){Name="B",Age=45,Id =2},
            new Person(){Name="C", Age=30,Id =3},
            new Person(){Name="D",Age=55,Id =4},
            new Person(){Name="E", Age=30,Id =5},
            new Person(){Name="F",Age=25,Id =6},
            new Person(){Name="G", Age=30,Id =7},
            new Person(){Name="H",Age=25,Id =8},
            };

            return View(PersonList);
        }

类：

public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }

查看：

@model IEnumerable<edit.Models.Person>

@{
    ViewBag.Title = "Index";
}

<html>
<head>
<title>Index</title>
<style type="text/css">
.webGrid { margin: 4px; border-collapse: collapse; width: 300px; }
.header { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E8E8E8; color: #000; }
.person { width: 200px; font-weight:bold;}
</style>
</head>
<body>
@{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
grid.Pager(WebGridPagerModes.NextPrevious);
@grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Name", "Given Name", canSort: true, format:@<b>@item.Name</b>, style: "person"),
grid.Column("Age", "How Old?", canSort: true)
));
}
</body>
</html>

【问题讨论】：

我强烈建议你不要使用 webgrid，因为它非常不灵活。
你推荐什么来代替 webgrid？

标签： asp.net-mvc razor webgrid

【解决方案1】：

@Yasser，通过 GET 链接实现 DELETE 非常危险。抓取该页面的搜索引擎可能会删除您的所有信息。

最好实现一个 POST 操作。这是一个例子：

在视图中：

@functions{
  string Delete(dynamic p)
  {
    string actionController = Url.Action("Delete", "Admin", new {id=p.AccountId});
    return "<form style='display:inline;' method='post' action='" + actionController + "'><input type='submit' value='Delete' onclick=\"return confirm('Are you sure?')\"/></form>";
  }
}

...
grid.Column(header: "", format: p => Html.Raw(Delete(p)))

在控制器中：

[HttpPost]
public ActionResult Delete(int id)
{
   PerformDelete(id);
   return RedirectToAction("Index");
}

【讨论】：

【解决方案2】：

你可以从这里开始，

您必须首先生成两个名为“编辑”和“删除”的操作链接以及 webgrid 中的每条记录。

请参阅this tutorial。

类似的东西

grid.Column(format: (item) => Html.ActionLink("Edit", "ActionName", new { param1 = "send id here", param2 = "xtra param" }))
grid.Column(format: (item) => Html.ActionLink("Delete", "ActionName2", new { param1 = "hello", param2 = "bye" }))

希望这会有所帮助。

【讨论】：

【解决方案3】：

给你...

http://www.dotnet-tricks.com/Tutorial/mvc/E2S9150113-Enhancing-WebGrid-with-Insert-Update-and-Delete-Operations.html

我想你正在寻找这个。

【讨论】：

虽然理论上这可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【解决方案4】：

您可以使用 asp.net mvc 和 knockoutjs 尝试这个内联可编辑网格视图： www.anhbui.net/blog?id=kojs-1

【讨论】：