Radiobutton or button to sort data

Question

In my project, I have a Occurrences table and a column called Status and the Status values are: pending or solved.

I need to sort the data and create a logic that in my view i have a button, or two, and when clicking show all occurrences that are with the Status pending or solved. That is, two buttons one to show all that are pending and one to show all that are solved.

How would I do that? Could anyone help me ? Not a notion of how to do that.

*Note: If it can be by radiobuttons, would be more practical.

Answer 1

You can use a logic using jQuery, for example, to call a Action using GET. Something like this:

public ActionResult Listar(String status) 
{
    var lista = contexto.Ocorrencias.Where(o => o.Status == status).ToList();
    return View(lista);
}

Status can be a RadioGroup:

<input type="radio" name="status" value="P">Pendente<br>
<input type="radio" name="status" value="R">Resolvido

The trigger could be something like this:

$('input[type=radio]').click(function() {
    $(this).closest("form").submit();
});

Answer 2

Complementing the response of the Gypsy, for it to work in my scenario I had to make some changes.

First, I created the Action:

 public ActionResult Ordenar(String status, int? pagina)
    {
        var lista = db.Ocorrencias.Where(o => o.Status == status).Include(o => o.Aluno).ToList();

        int paginaTamanho = 10;
        int paginaNumero = (pagina ?? 1);
        return View(lista.ToPagedList(paginaNumero, paginaTamanho));
    }

Then I created a Partialview of that Action:

<h3>Busca por Status</h3>

<div class="alert-info">
<form action="/Ocorrencias/Ordenar" id="status">
    Ordenar por:
    <input type="radio" name="status" value="Pendente" onclick="myFunction()">Pendente
    <input type="radio" name="status" value="Resolvido" onclick="myFunction()">Resolvido
</form>
</div>

 <table class="table table-striped">
 <tr>
     <th>
         Nome do Aluno
     </th>
    <th>
        Status
    </th>
    <th>
        Data de Entrada
    </th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Aluno.NomeAluno)
        </td>
        <td>
            <input type="text" name="Status" id="Status" value="@Html.DisplayFor(modelItem => item.Status)" readonly class="Status" />
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DataOcorrencia)
        </td>
        <td>
           <a href="~/Ocorrencias/[email protected]" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-edit"></span></a>
           <a href="~/Ocorrencias/[email protected]" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-list"></span></a>
           <a href="~/Ocorrencias/[email protected]" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span></a>                
        </td>
    </tr>
    }

   </table>

   Página @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de          @Model.PageCount
   @Html.PagedListPager(Model, pagina => Url.Action("Ordenar", new { pagina, filtro = ViewBag.Filtro }))

 //Esse *script* faz com que o *radio* tenha o mesmo comportamento de um *button*
 <script>
 function myFunction() {
     document.getElementById("status").submit();
 }
 </script>

And in order for the filter to work perfectly, I put a form in my view Index, which calls to Action Sort in the Controller Occurrences.

//Demais controles da minha *view*
//Note no atributo *action* do *form* que chamo a *action* que será usada
<form action="/Ocorrencias/Ordenar" id="status">
Ordenar por:
<input type="radio" name="status" value="Pendente" onclick="myFunction()">Pendente
<input type="radio" name="status" value="Resolvido" onclick="myFunction()">Resolvido
</form>
//O restante dos controles
//Esse *script* faz com que o *radio* tenha o mesmo comportamento de um *button*
 <script>
 function myFunction() {
     document.getElementById("status").submit();
 }
 </script>

And that way it worked for me.