Proper way for delete function in ASP.NET MVC 4 WebGrid

Question

I just started using WebGrid and I have been searching a proper way to delete a row.

But I don't want to use solutions which redirects the user an other window. I just want that when the user clicks delete then pop up a confirm window and if the user choose yes, delete the data and refresh the page, but with ajax.

I have found a way to do this, but I have not seen other people do it on the Internet in the same way and I want to know if it is a good practice to follow it in the future.

In the WebGrid I have the following column definition:

grid.Column(header: "", format: @<text> <button  type="submit" name="Delete" value="@item.Id">Delete</button></text>)

It is in a @Ajax.Beginform(...) { ... }

In my Controller I check if a Delete button was clicked and get the Id this way:

[HttpPost]
public ActionResult Index(ManageOvertimesViewModel model, FormCollection formCollection)
{
...
if (formCollection["Delete"] != null)
  {
  int id = int.Parse(formCollection["Delete"]);
  //Delete the data
  return PartialView("IndexPartial", model);
  }
...
}

When I delete something in this view other data displayed can be changed, so I need to have the posted ViewModel to recreate some DropDowns in the view and this is the reason I don't use Ajax.ActionLink to solve the delete.

So is it a good way to achieve delete?

score 0 · Answer 1 · answered Oct 17 '13 at 12:05

0

Here you have example from View:

grid.Column("", "", canSort: false, format:@<b>@Html.ActionLink("Delete", "DeletePrizeRun", new { id = item.ID })</b>, style: "column")

Here code from controller:

public ActionResult DeletePrizeRun(int id)
{ 
    using (var context = new ExampleDataContext())
    {
        var prizeRun = context.PrizeRuns.FirstOrDefault(p => p.id == id);
        context.PrizeRuns.Remove(prizeRun);
        context.SaveChanges();
    }
}

answered Oct 17 '13 at 12:05

tzm

588
1
12
27

As I said I don't want to use ActionLink, because I need the ViewModel server side to recreate the view and I it have to be through ajax. – dvjanm Oct 17 '13 at 12:10

score 0 · Answer 2 · answered Oct 18 '13 at 12:23

For your solution the Grid has to be inside the the Ajax form. The ajax form will do partial updates and the grid will do (if you specify an ajax target which you must if you want to avoid page reloads, at least if you are using paging and sorting with pager / sort headers generated by WebGrid). That is where my headache with a similar solution started. The Grid started to behave strangely when sorting or paging, e.g. the controller was executed multiple times.

I ended up giving up on WebGrid and I am now using html tables with razor commands which works great and provides much better control.

I recommend not to use WebGrid for anything but the most simple demo.

Other than that I see no problem with your approach, using name / value to pass data to the controller worked for me.

Thanks for your response. A have been thinking about using jquery ui table, because of other jquery-ui elements I used before were fine. Anyway, in my webgrid the sorting and paging works fine. But if it were a simple html table I would ask the same for the concept of deleting. — dvjanm, Oct 18 '13 at 12:41

Proper way for delete function in ASP.NET MVC 4 WebGrid

2 Answers2