27.01.2025

Chamada de Método de Ação do Controlador MVC com Botão HTML

Resposta Rápida

Para chamar um método de ação do controlador MVC usando a tag <form>, utilize o seguinte código HTML:

<form action="/Controlador/Ação" method="post">
    <input type="submit" value="Executar Ação" />
</form>

Uma chamada de método assíncrona usando AJAX e jQuery pode ser feita da seguinte forma:

$("#idDoBotao").click(function() {
    $.post('/Controlador/Ação', function(resposta) {
        // Lidar com a resposta recebida aqui
    });
});

Estes exemplos são para requisições POST e exigirão adaptações para seus controladores e métodos específicos. Não se esqueça de incluir jQuery para uso de AJAX.

Redirecionamento Simples: Evitando Formulários

Se você só precisa de um redirecionamento, evite usar formulários. Use um botão com type="button" e o atributo onclick:

<input type="button" value="Executar Ação"
       onclick="location.href='@Url.Action('Ação', 'Controlador')'" />

Isso cria um botão que não submete dados (não-POST) e redireciona o usuário para a URL especificada. A sintaxe Razor é utilizada aqui.

A Era do AJAX: Invocando Métodos Sem Recarregar a Página

Use AJAX para chamar métodos de ação sem recarregar a página:

$("#botaoAjax").click(function(e) {
    e.preventDefault(); // Previne o recarregamento da página
    $.ajax({
        url: '@Url.Action('Ação', 'Controlador')',
        type: 'GET', 
        success: function(resposta) {
            // Lidar com a resposta recebida
        }
    });
});

Este código inicia requisições HTTP sem recarregar a página, mantendo o usuário engajado.

Armadilhas Comuns: Erros e Soluções

Esteja atento aos erros típicos:

• O envio acidental de formulários pode ocorrer se um botão dentro de <form> não tiver type="button".
• Problemas com o símbolo $? Verifique a inclusão do jQuery.
• O Url.Action não está gerando corretamente? Certifique-se de que você está usando @.

Ajuda dos Colegas: HtmlHelpers nas Views MVC

Para deixar o código mais conciso, use Html Helpers MVC:

@Html.ActionLink("Executar Ação", "Ação", "Controlador", null, new { @class = "botao" })

O resultado será uma tag <a> que se parece e se comporta como um botão - estética de alto nível.

Visualização

Botão de Entrada HTML atua sobre a interatividade:

🖱️ Botão HTML: "Toc, toc!"

Ele envia um sinal para o Controlador MVC:

🎯 Controlador MVC: "Quem está aí?"

O método de ação revela o segredo:

💡 Método de Ação: "Operação solicitada."

Assim, cada clique do mouse cria uma nova intriga para o aplicativo. O acesso é concedido!

Trabalhando com Botões de Entrada Sem Formulários: Melhores Práticas

Siga estas melhores práticas ao trabalhar com botões type="button":

• Defina type="button" para evitar o recarregamento acidental da página.
• Use @Url.Action() nas views Razor para o roteamento correto.
• Utilize AJAX para aprimorar a interação do usuário.
• Ao usar AJAX, inclua os componentes jQuery necessários.
• Lembre-se, no MVC, as requisições são executadas exatamente como seus planos de exercícios.
• O comportamento do botão impacta SEO e UX, portanto proceda com plena compreensão.

Com essas recomendações, você não se verá pressionando o botão de reset quando surgirem problemas com botões.

Recursos Úteis

1. Adicionando um Novo Controlador | Microsoft Learning Resources
2. Html Helpers no ASP.Net MVC | TutorialsTeacher
3. ASP.NET MVC - Razor | Guia Tutorials Point
4. ASP.NET MVC - Prevenindo "hotlinking" de imagens usando Custom RouteHandler | Blog .NET do Mike
5. Chamando um Método de Ação de uma View no ASP.NET MVC usando jQuery AJAX | C# Corner

Video

Navigation