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

asp.net-mvc razor webgrid

33,217

Solution 1

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

Solution 2

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.

Solution 3

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.

Solution 4

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

View more solutions

33,217

Author by

Sham

I am a Software Developer

Updated on July 05, 2022

Comments

Sham almost 2 years

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>

Rookian over 11 years

I strongly recommend you to not use the webgrid, because it is very inflexible.
JohnG over 9 years

What do you recommend instead of webgrid?

Xavi López over 10 years

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.