Como utilizar Ajax em views

Escrito por joey liam | Traduzido por joao marcos padua filho
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como utilizar Ajax em views
O Ajax tem muitas utilidades interessantes para o desenvolvimento web (Jupiterimages/Photos.com/Getty Images)

Uma das muitas funções do Ajax é fazer com que você carregue views (visualizações) para linguagens de programação, como ASP.NET, através do uso de um componente chamado Ajax.ActionLink. Esse módulo do Ajax é também usado em sistemas de gerenciamento de conteúdo (CMS), como o Drupal. Ele permite que você crie uma paginação em estilo Ajax, determinando um bloco view, especificando a view de uma página com qualquer outro tipo de programa e, ainda, determinando um argumento de tipo, como o "AJAX Views: AJAX Selector".

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Cole o código a seguir para adicionar os arquivos ASP.NET MVC Ajax JavaScript em sua view ASPX:

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

    Crie um espaço reservado para a sua partial view (visualização parcial), enquanto ela é carregada, adicionando este elemento HTML vazio:

    CopyPlaceholder HTML element <div id="result"></div>

  2. 2

    Insira um "Ajax.ActionLink" em sua view (visualização), que fará o carregamento da partial view (visualização parcial) quando clicada pelo usuário:

    CopyAjax.ActionLink declaration <%= Ajax.ActionLink("Load partial view", "PartialGrid", new AjaxOptions { // Função do JavaScript executada após uma solicitação do Ajax realizada com sucesso OnSuccess = "updatePlaceholder", //O atributo "id" do espaço reservado do HTML UpdateTargetId = "result" })%>

  3. 3

    Cole o seguinte código JavaScript, ou o código manipulador de eventos OnSuccess, logo após o Ajax.ActionLink:

    <script type="text/javascript"> function updatePlaceholder(context) { // A saída HTML da partial view (visualização parcial) var html = context.get_data();

    // O elemento DOM que representa o espaço reservado var placeholder = context.get_updateTarget();

    // Use jQuery para atualizar o espaço reservado. Ele executará qualquer instrução JavaScript $(placeholder).html(html);

    // Retorna "false" para evitar a atualização automática da área reservada return false; } </script>

  4. 4

    Execute o método "PartialGrid" para chamar o Ajax.ActionLink e exibir a partial view (visualização parcial) que contém o Grid:

    public ActionResult PartialGrid() { var model = new NorthwindDataContext().Orders;

    return PartialView("PartialGrid", model); }

    Cole o código abaixo para fazer a chamada da partial view que contém o Grid:

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MvcApplication1.Models.Order>>" %>

    <%= Html.Telerik().Grid(Model) .Name("Grid") .DataBinding(dataBinding => dataBinding.Ajax().Select("Orders", "Controller")) .Pageable() .Sortable() .Filterable() %>

  5. 5

    Registre todos os arquivos CSS que são necessários ao elemento UI em sua página principal para usar sua aplicação de definição de estilo do Ajax. Seu ASP.NET já está pronto para usar seu aplicativo Ajax de partial view (visualização parcial).

Dicas & Advertências

  • Pule o registro de todos arquivos JavaScript, pois o último lançamento de extensões da Telerik Extensions para ASP.NET MVC dispensa isso.
  • Inicialize todos os elementos UI na partial view quando estiver executando um evento OnSuccess pois o ASP.NET MVC Ajax não executará suas declarações JavaScript nesse modo.
  • Vincule o Grid com seu Ajax ou cliente WebService para evitar que desapareça após sua primeira operação, que deve ser apenas a mudança de uma página da Internet ou classificação de uma coluna.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível