How to achieve edit and delete on Webgrid of MVC3 Razor?

Below I have given the controller, model and view. After run, grid is displaying with values, but I need to edit the values and delete the values on same page. I have searched and seen some example, in that for edit, delete they creating separate index but mine need is to edit and delete should done on same page instead of another page. Please give me a solution.

Controller:

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

Class :

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

View :

@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>

@Yasser, it is very dangerous to implement a DELETE via a GET link. A search engine crawling the page might delete all your information.

It is much better to implement a POST operation. Here is an example:

In the View:

@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)))

In the Controller:

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

Here is something you can start with,

You will have to first generate two action link called "Edit" and "Delete" along with each record in the webgrid.

See this tutorial for that.

something like this

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

Hope this helps.

Here you go...

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

I think you are looking for this.

You can try this inline editable gridview using asp.net mvc and knockoutjs: www.anhbui.net/blog?id=kojs-1

来源：https://stackoverflow.com/questions/12066915/how-to-achieve-edit-and-delete-on-webgrid-of-mvc3-razor

标签

asp.net-mvc

razor

webgrid