Código Expresso

Aqui você encontra tudo o que procura e se não encontrar nós encontramos pra você...

Disparando uma requisição JQuery Ajax que fornece como retorno conteúdo HTML gerado pela url acessado C#(CSHarp) ASP.NET MVC.

Autor : Antonio Carlos Ferreira de Azevedo
Postado em : 01/08/2021

O que significa `Ajax`

AJAX significa Asynchronous JavaScript and XML, ou JavaScript e XML Assíncronos, em bom português. Ele é um conjunto de técnicas de desenvolvimento voltado para a web que permite que aplicações trabalhem de modo assíncrono, processando qualquer requisição ao servidor em segundo plano.

Como funciona uma Requisição `Ajax`

Uma requisição HTTP é enviada do navegador para o servidor.
O servidor recebe a requisição e busca os dados.
O servidor envia os dados requisitados para o navegador.
O navegador recebe os dados e recarrega a página para fazer com que apareçam.

Nosso primeiro passo é mostra a sintaxe completa do Ajax que pode ser visto abaixo.

Sintaxe Completa

var data="abc123";

$.ajax({
   type: "GET",
      url: "XYZ",
      data: {
          "data":data,
               },
      dataType: "html"      
      contentType: "application/json",
      / / Se recebeu uma resposta do servidor
      success: function( datas, textStatus, jqXHR) {

      },

      // Se não houve resposta do servidor
      error: function(jqXHR, textStatus, errorThrown){

      },

      // capturar a solicitação antes de ser enviada ao servidor
      beforeSend: function(jqXHR, settings){

      },

      // Isso é chamado depois que as funções de resposta ou erro são concluídas para que possamos tomar alguma ação
         complete: function(jqXHR, textStatus){

      }
});

Vamos destrinchando tudo aos poucos e ao final desta postagem você vai ter um exemplo completo de como utilizar uma solicitação JQuery Ajax em ASP.NET MVC, mas neste momento vamos passo a passo.
A segurança é muito importante e por isso é necessário garantir que que a chamada de nosso link realmente veio de nossa pagina, para isso, para isso sugiro que leia nossa postagem sobre Ataque CSRF - (Cross-Site Request Forgery), para entender um pouco mais sobre AntiForgeryToken, isso vai dar uma garantia de que nosso link só vai ser carregado caso seja solicitado por nossa requisição.
Para isso dentro de seu código HTM entre a tag

deve constar o comando Razor @Html.AntiForgeryToken(), caso seu código não pretenda ter um form valido, mesmo assim você pode simplesmente colocar o comando dentro da tag em seu código, conforme o exemplo abaixo.

<form>
    @Html.AntiForgeryToken()
</form>

Você pode recuperar o valor deste token facilmente em sua função JavaScript mais tarde com o comando a seguir.

Var token = $('[name=__RequestVerificationToken]').val();

Agora que colocamos as devidas restrições de segurança, vamos na pratica colocar um exemplo de requisição Ajax pratica e funcional.

function consultaUnidade() {
        
  // Captura a área que vai receber os dados
  area = $("#area-dados");
        
  // Coloca a mensagem aguardando na área que vai receber os dados
  area.html("Aguarde...");

  // Captura as variáveis 
  var token = $('[name=__RequestVerificationToken]').val();
  var idunidade = $("#cb-unidade").val()
  var idclasse = $("#cb-classe").val()

  // Monta os parâmetros 
  var formdata = new FormData();
  formdata.append('__RequestVerificationToken', token);
  formdata.append('idunidade', idunidade);
  formdata.append('idclasse', idclasse);

  // Solicitação Ajax
  $.ajax({
      type: 'Post',
      url: '@Url.Action("_CarregaConsultaUnidade", "Home", new { Area = "Escolas"})',
      data: formdata,
      processData: false,
      contentType: false,
      dataType: "html",
      success: function (retorno) {
                
          // Carrega os dados retornados do servidor na área que vai receber os dados
          area.html(retorno);
      }
  });
}

Agora para completar em nosso Controller a View que recebe esta solicitação, para fecha a matéria, e não deixar duvidas.

[HttpPost]
[ValidateAntiForgeryToken]

public PartialViewResult _ConsultaAlunos(Int32 idunidade, Int32 idclasse)
{

    daoUnidde daounidades =  new daoUnidade();
    
    Classes classe = daounidades.ConsutaClasse(idunidade, idclasse);

    ViewBag.Classes = classe;

    return PartialView();
}

Mais uma vez espero ter ajudado, deixe seu comentário ele é muito importante, visite nossos patrocinadores eles ajudam a manter o site, a postagem sobre Ataque CSRF - (Cross-Site Request Forgery) estava logo acima mas caso não tenha encontrado e queira visitar vou deixar o link abaixo, obrigado.

Ataque CSRF - (Cross-Site Request Forgery)