Como usar JavaScript para manter critérios de pesquisa em uma grade ASP.NET após selecionar itens

Otimizando a experiência do usuário na pesquisa e seleção de grade do ASP.NET

Oferecer aos clientes a capacidade de pesquisar e escolher objetos dentro de uma interface de grade é um recurso frequente em aplicativos ASP.NET. Os desenvolvedores, no entanto, frequentemente encontram um problema: a grade é atualizada e os parâmetros de pesquisa são perdidos quando um item é selecionado. Como eles precisam reiniciar a pesquisa cada vez que escolhem um novo item, isso pode irritar os usuários.

É imperativo preservar os critérios de pesquisa após um postback ou atualização de grade para melhorar a usabilidade. Isto é particularmente crucial quando os consumidores têm de escolher várias opções com base nos mesmos padrões. O processo é repetido desnecessariamente se os termos de pesquisa forem perdidos.

Felizmente, podemos garantir que as palavras-chave de pesquisa continuem mesmo depois de escolher um item na grade, utilizando JavaScript e os recursos integrados do ASP.NET. Através do uso de métodos que complementam DataTables e o estado de visualização do ASP.NET, podemos tornar a experiência do usuário mais tranquila.

Veremos como usar JavaScript e VB.Net para conseguir isso em um projeto ASP.NET no guia a seguir. Também passaremos por um cenário do mundo real para mostrar como manter os critérios de pesquisa de maneira eficaz à medida que você atualiza sua grade.

Noções básicas sobre soluções de script para preservar critérios de pesquisa na grade ASP.NET

O objetivo dos scripts oferecidos é resolver um problema comum em aplicativos ASP.NET, onde os usuários perdem o controle de seus parâmetros de pesquisa quando fazem uma seleção em uma grade. A primeira abordagem armazena a entrada de pesquisa no lado do cliente usando JavaScript sessãoArmazenamento função. A experiência do usuário é melhorada por essa estratégia, que garante que a frase de pesquisa permaneça ativa mesmo após o site ser recarregado. Quando a página é recarregada ou um item é selecionado, o valor da pesquisa em cache pode ser aplicado à grade novamente, capturando e salvando a entrada localmente. O usuário não terá que inserir sempre os mesmos critérios graças a este método.

Outro método usa o lado do servidor Visualizar estado recurso do ASP.NET. Nesse caso, o valor da pesquisa é mantido no objeto ViewState, que preserva os dados entre postbacks. O valor mantido no ViewState é transmitido de volta à página quando um usuário interage com a grade e seleciona um item. Este método garante que os parâmetros de pesquisa sejam acessíveis durante toda a sessão e sejam facilmente incorporados ao processamento do lado do servidor. Para evitar a perda de entrada de pesquisa, o servidor pode então executar um script para reaplicar a pesquisa na grade do lado do cliente.

AJAX é usado na terceira abordagem para interromper recarregamentos de página inteira. A atualização dinâmica da página ocorre quando um item é selecionado, o que aciona uma solicitação assíncrona ao servidor. Isso mantém os critérios de pesquisa - que são fornecidos com a solicitação AJAX - intactos enquanto a grade é atualizada. Após a conclusão da atualização, a função JavaScript reaplica o valor de pesquisa à grade. Esta técnica atualiza o material de forma assíncrona, preservando o estado da grade para maximizar a experiência do usuário.

De forma diferente, cada um desses métodos garante a preservação dos dados de pesquisa. Para soluções mais simples do lado do cliente, a técnica sessionStorage é apropriada, enquanto ViewState oferece uma estratégia ASP.NET mais abrangente. AJAX garante que as ações do usuário não interfiram no processo de pesquisa, fornecendo um equilíbrio entre atualizações do lado do servidor e interatividade do lado do cliente. Cada solução segue as práticas recomendadas de desempenho e usabilidade, com o objetivo de minimizar o atrito do usuário e preservar uma experiência contínua de interação de dados baseada em grade ASP.NET.

// JavaScript to store search criteria in session storage
$(document).ready(function() {
  var searchValue = sessionStorage.getItem('searchValue') || '';
  var table = $('#gridViewArtifacts').DataTable({
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    searching: true,
    ordering: true,
    paging: true
  });
  table.search(searchValue).draw(); // Apply search from session
  $('#gridViewArtifacts_filter input').on('keyup', function() {
    sessionStorage.setItem('searchValue', $(this).val());
  });
});

' VB.NET Code-Behind: Store search criteria in ViewState
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
  If Not IsPostBack Then
    ViewState("SearchValue") = String.Empty
  End If
End Sub
Protected Sub chkSelect_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
  ' Retain search criteria in ViewState
  Dim searchValue As String = CType(ViewState("SearchValue"), String)
  ScriptManager.RegisterStartupScript(Me, Me.GetType(), "ApplySearch",
    "document.getElementById('gridViewArtifacts_filter').value = '" & searchValue & "';", True)
End Sub
' Frontend JavaScript to capture search input
$(document).ready(function() {
  $('#gridViewArtifacts_filter input').on('input', function() {
    __doPostBack('UpdateSearch', $(this).val());
  });
});

// JavaScript for AJAX request to retain search after item selection
$(document).ready(function() {
  $('#gridViewArtifacts').DataTable({
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    searching: true,
    ordering: true,
    paging: true
  });
  $('#chkSelect').on('change', function() {
    var searchValue = $('#gridViewArtifacts_filter input').val();
    $.ajax({
      type: 'POST',
      url: 'UpdateGrid.aspx',
      data: { searchValue: searchValue },
      success: function() {
        // Reapply search after AJAX update
        $('#gridViewArtifacts').DataTable().search(searchValue).draw();
      }
    });
  });
});

Aprimorando a persistência da pesquisa em grade com ASP.NET e JavaScript

Manter o estado destacado dos itens selecionados na grade após uma atualização ou postback de página é uma parte crucial para manter intacta a experiência do usuário da grade do ASP.NET. Os usuários antecipam que suas seleções permanecerão no lugar enquanto interagem com outras áreas da interface ao fazerem seleções múltiplas. Isto é frequentemente difícil, uma vez que certos estados podem ser redefinidos como resultado de modificações na rede. Usando JavaScript e o EnableViewState atributo para armazenar e reaplicar o estado de seleção após postbacks é uma maneira de resolver isso.

Os desenvolvedores podem usar armazenamento do lado do cliente, como armazenamento local ou sessãoArmazenamento, para acompanhar os objetos que foram selecionados, além de armazenar critérios de pesquisa. Isto é particularmente útil em situações em que os usuários escolhem vários produtos ao mesmo tempo. JavaScript pode ser usado para reaplicar a seleção à grade após o recarregamento da página, armazenando os IDs dos itens selecionados. Ao evitar que as ações do usuário sejam perdidas, essa técnica melhora muito toda a experiência do usuário.

Melhor velocidade é garantida para grades mais complexas, especialmente aquelas que gerenciam grandes conjuntos de dados, usando atualizações AJAX. Modificações parciais podem ser feitas mantendo intactos os parâmetros de pesquisa e os objetos selecionados, evitando a necessidade de recarregar toda a grade. Uma experiência de grade mais fluida e interativa é alcançada combinando AJAX com lógica do lado do servidor, que permite que o site se adapte dinamicamente às atividades do usuário sem interferir no seu fluxo de trabalho.