CODEWITHSUNDEEP
asp.net-mvc
arame3333
arame3333

Reputation: 10193

MVC: I delete a row from my grid, but my page does not refresh

I have a Html.Helper that I use to delete rows from my grid. It calls the following method on my controller;

   [AcceptVerbs(HttpVerbs.Delete)]
    public ActionResult Delete(int _employeeOtherLeaveId)
    {
        EmployeeOtherLeaf.Delete(_employeeOtherLeaveId);
        return RedirectToAction("Payroll");
    }

This calls the GET method on my controller which I would expect to refresh the view of my grid, but it doesn't. When I manually refresh I see the row has in fact been deleted. Why is this?

[HttpGet]
public ActionResult Payroll()
{
    if ((SessionObjects.PeriodStartDate > DateTime.MinValue) && (SessionObjects.PeriodEndDate > DateTime.MinValue))
        if (SessionObjects.PayrollSelectedEmployeeId == 0)
            return View(new PayrollViewModel()
                {
                    PeriodStartDate = SessionObjects.PeriodStartDate,
                    PeriodEndDate = SessionObjects.PeriodEndDate
                });
        else
            return View(new PayrollViewModel(
                SessionObjects.PeriodStartDate,
                SessionObjects.PeriodEndDate,
                SessionObjects.PayrollSelectedEmployeeId
                ));

    return View();
}

Upvotes: 1

Views: 4162

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038830

This will depend how you are calling the DELETE action. Judging from your previous question and the answer you accepted I suppose that you are doing the following:

onclick="$.ajax({url: this.href, type: 'DELETE'}); return false;"

which obviously is insufficient as you are sending the AJAX request to delete but you aren't handling the success event to update the DOM. So you might need to do this:

$.ajax({
    url: this.href, 
    type: 'DELETE',
    success: function(result) {
        // update some DOM element with the result returned by the
        // server. So supposing that you have some <div id="someContainer">
        // that will contain the part of the DOM you want updated:
        $('#someContainer').html(result);
    }
}); 
return false;

Now obviously stuffing all this javascript inside the HTML as you were using your custom helper is ugly. Personally I would use unobtrusive javascript. I would have my helper generate a normal anchor with a class and then in a completely separate javascript file I would AJAXify this link:

$(function() {
    // AJAXify the anchor with the delete class that would
    // be generated by your custom helper
    $('.delete').click(function() {
        $.ajax({
            url: this.href, 
            type: 'DELETE',
            success: function(result) {
                // update some DOM element with the result returned by the
                // server. So supposing that you have some <div id="someContainer">
                // that will contain the part of the DOM you want updated:
                $('#someContainer').html(result);
            }
        }); 
        return false;
    });
});

Upvotes: 3

Related Questions