Deleting a row from inside a partial view

Post #200! I hope it’s a good one…

I had a view, within which was a partial view that contained a table. Inside this table was link to delete the current table row.

Form

Form

So to recap: View -> Partial View -> Delete Row

Since I did not want the whole page to refresh, I needed to use some jQuery to do this.
On my main page, I populated the various drop down lists you see above. Leaving out all that code, I have this remaining code at the bottom of the page:

    function deleteRow(id) {
        $.ajax({
            url: "/MyApp/DeletePermission",
            type: "GET",
            data: { id: id }
        })
        .done(function (partialViewResult) {
            $("#results").html(partialViewResult);
        });
    }

The “results” DIV tag holds the partial view, which I am populating with an onchange event earlier in the page. I assume you have this part down, but if not, post a comment and I’ll write something up about binding data to a partial view. Heck, maybe I will anyways.

In my partial view, I build the table, a truncated version of which is here:

     @foreach (var item in Model) {
         <tr>
             <td>@Html.DisplayFor(modelItem => item.) </td>
             <td><a onclick="deleteRow('@item.ID')">Delete</a></td>
         </tr>
     }

So when I click the “Delete” link in the partial view, it will call the “deleteRow” function in the main view. The jQuery will then call my controller action:

  public ActionResult DeletePermission(Permission item) {
      List<Permission> model = Repository.DeletePermission(item.ID);
      return PartialView("_PermissionsTable", model);
  }

Notice that the action returns a list of Permission objects, which is then use to refresh / rebind the table when the “done” method of the jQuery function is completed.

Advertisements

,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: