Actionlink on a list without reloading page

Question

I have a conventional list generated by Asp.Net MVC. In the items I put an Actionlink to change the status of the item from Pending to Finished. Every time I click on the link it reloads the page. Because my list exceeds the screen height, when I click on the link of some item at the bottom of the list, it reloads the page and goes back up.

How do I refresh the item without reloading the page?

In short, my view:

@model IEnumerable<PortalDeRelacionamento.Areas.Workflow.Models.Atividade>

<h2>Minhas Atividades</h2>

<table class="table">
    <tr>
        <th>
            @Html.DisplayName("Atividade")
        </th>
        <th>
            @Html.DisplayName("Situação")
        </th>
        <th></th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.DescricaoResumida)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Situacao.Descricao)
            </td>
            <td>
                @Html.ActionLink("Detalhes", "Details", "Atividades", new { id = item.Id }, new { data_id = item.Id, id = item.Id })
                @if (item.SituacaoId == 1) {
                    <span> | </span> @Html.ActionLink("Finalizar", "Finalizar", new { id = item.Id })
            </td>
        </tr>
    }
</table>

And so is my controller:

    public ActionResult Finalizar(int id)
    {
        var atividade = db.Atividades.Find(id);
        atividade.SituacaoId = 2;
        UpdateModel(db);
        try
        {
            db.SaveChanges();
        }
        catch (Exception dbEx)
        {
            throw new Exception(dbEx.ToString());
        }

        return RedirectToAction("Listar"):
    }

Answer 1

A way for you to solve this problem and use ajax

<script>
function Finalizar(id) {
    $.ajax({
        url: '@Url.Action("Finalizar", "Home")',
        dataType: "json",
        data: { id: id },
        success: function(data) {
            if (data.success) {
                alert('Sucesso');
            } else {
                alert('Erro: '+ data.message);
            }
        }
    });
}
</script>

@Html.ActionLink("Finalizar", "Finalizar", new { }, new { onclick =    "Finalizar("+ 1 +");return false; " }) 

Action

public ActionResult Finalizar(int id)
{
    var atividade = db.Atividades.Find(id);
    atividade.SituacaoId = 2;
    UpdateModel(db);
    try
    {
        db.SaveChanges();
        return Json(new { success = true }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception dbEx)
    {
        return Json(new { success = false, message = dbEx.Tostring() }, JsonRequestBehavior.AllowGet);
    }
}