Question

I have a delete hyperlink shown on the screen:

UsersPartial VIEW:

<%: Ajax.ActionLink("Delete", "Delete", new { id = item.UserID }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "tabs-users", InsertionMode = InsertionMode.Replace }, htmlAttributes: new { data_target = "#tabs-users" })%>

This calls a method in my controller

CONTROLLER

    [HttpGet]
    public PartialViewResult Delete(int id)
    {
        userManager.DeleteUser(id);
        ViewBag.Status = string.Format("User deleted ok, id: {0}", id);
        return PartialView("UsersPartial", userManager.GetUsers());
    }

In the above code, I return a PartialView, this works. I would like to also display a message at the top of this view, defined above in ViewBag.Status, but I only want it to show this div once this action is taken.

Also note, that my view I am returning to has is strongly typed:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<LMS.Data.User>>" %>

Lastly, the status message I’d like to display is a div that I created into another partial view so I can show it throughout the site.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<div id="status" class="statusok">
<%: ViewBag.Status %>
</div>

What’s the proper way to do this?

Answer 1

You cannot return 2 different partial views from a controller action. One approach you might use is to render the first partial to a string and then have your controller action return a JSON result with 2 properties – one containing the HTML partial and the other containing the message to display:

[HttpDelete]
public PartialViewResult Delete(int id)
{
    userManager.DeleteUser(id);
    return Json(new 
    {
        Partial = RenderPartialViewToString("UsersPartial", userManager.GetUsers()),
        StatusMessage = string.Format("User deleted ok, id: {0}", id)
    });
}

and then:

<%= Ajax.ActionLink(
    "Delete", 
    "Delete", 
    new { 
        id = item.UserID 
    }, 
    new AjaxOptions { 
        HttpMethod = "DELETE", 
        OnSuccess = "onDelete"
    }, 
    htmlAttributes: new { data_target = "#tabs-users" }
) %>

and then write the onDelete callback:

function onDelete(result) {
    $('#tabs-users').html(result.Partial);

    // TODO: instead of alerting display the message wherever you want
    // and using whatever plugin you want to make it look pretty
    alert(result.StatusMessage);
}

You will also notice that I have used the proper HTTP verb for this task – DELETE. Never use the GET verb to invoke controller actions that are modifying state on your server (such as deleting an entity).