How do I keep this scenario to 1 round trip?

Question

I have a page that is a list of users. The controller's Index function is the action responsible for showing the page of users. The user can select those users and chose to delete them.

I perform the delete action with an ajax request, however then the page's list of users is out of date. So I reload the page because I want to re-use the index action, and all the query string parameters are still there. This means I'm performing two round trips. How do I avoid this?

function DeleteUsers()
{
    var selectedUserIds = ;
    $.post("/Account/DeleteUsers",
    { 
        userIds: selectedUserIds
    },
    function (data) {
        if( data.status == "success"){
            location.reload();
        }
    });
}

Index function:

    [AuthorizeActionFilter]
    public ActionResult Index(UserModel model)
    {
        ViewData["PageTitle"] = ServiceSite.Resources.Resources.REGISTERED_USERS;
        ViewBag.MaxUsersPerPage = PAGE_MAX_COUNT;

        if(model  == null)
        {
            model = new UserModel();
        }

        int totalCount = 0;

        //Get users
        model.Users = CADC.GetUsers(AccountController.GetRegionID(), model.CompanyID, out totalCount, 
            model.SortField, model.PageNumber * PAGE_MAX_COUNT, PAGE_MAX_COUNT, model.Ascending, User.Identity.Name);

        model.TotalUserCount = totalCount;

        int totalPages = totalCount / PAGE_MAX_COUNT;
        model.TotalPages = (totalCount % PAGE_MAX_COUNT) == 0 ? totalPages : totalPages + 1;

        return View(model);
    }

and the model:

public class UserModel
{
   public bool Ascending { get; set; }

    public int PageNumber { get; set; }

    public string SortField { get; set; }

    public int TotalUserCount { get; set; }

    public int TotalPages { get; set; }

    public long CompanyID { get; set; }

    public List<User> Users { get; set; }

    public UserModel()
    {
        this.Ascending = true;
        this.PageNumber = 0;
        this.SortField = "FirstName";
        this.CompanyID = 0;
        this.TotalUserCount = 0;
        this.TotalPages = 0;
    }

}

Answer 1

I agree with @David's comments. In the AJAX success block, remove the rows just deleted based on what you requested to delete.

The pagination is indeed more complicated; either adjust it in the same way, or revamp everything to use a proper view model in Javascript with bound elements--see AngularJS or other such frameworks.