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.

Comando	Exemplo de uso
sessionStorage.getItem()	Os parâmetros de pesquisa podem ser recuperados com este comando do armazenamento de sessão do navegador. Nesse caso, ele recupera o valor de pesquisa fornecido anteriormente e garante que o campo de pesquisa seja preenchido novamente após uma atualização da página ou da grade.
sessionStorage.setItem()	Salva a consulta de pesquisa atual no armazenamento de sessão do navegador. Isso evita que os parâmetros de pesquisa sejam perdidos caso o usuário escolha um item ou a grade ASP.NET poste de volta.
ScriptManager.RegisterStartupScript()	Registra e executa um script ASP.NET do lado do cliente no servidor. Para salvar o valor da pesquisa na caixa de pesquisa da grade, ele é utilizado aqui para aplicar os critérios de pesquisa armazenados no carregamento da página ou após um postback.
DataTable().search()	Após uma atualização ou carregamento de página, o valor da pesquisa em cache é aplicado de volta à grade usando este método DataTables. Garante que a grade seja filtrada de acordo com a consulta de pesquisa inserida anteriormente.
DataTable().draw()	Aplica os critérios de pesquisa e redesenha o DataTable. Quando a página é atualizada usando AJAX ou outra técnica, este comando é necessário para reaplicar os termos de pesquisa e mostrar os dados filtrados.
on('keyup')	Adiciona um manipulador de eventos à caixa de entrada de pesquisa para que cada pressionamento de tecla seja registrado. Neste caso, garante que o valor da pesquisa seja mantido mesmo se a grade for atualizada ou recarregada, atualizando o armazenamento da sessão com a entrada de pesquisa atual.
__doPostBack()	Esta função ASP.NET envia dados de volta ao servidor usando JavaScript para iniciar um postback. Quando um item da grade é selecionado, o script é utilizado para comunicar o valor atual da pesquisa ao servidor, garantindo que o estado da pesquisa seja mantido durante os processos do lado do servidor.
$.ajax()	Envia ao servidor uma solicitação HTTP assíncrona. Nesse caso, ajuda a preservar a entrada da pesquisa enquanto atualiza áreas específicas do site (como a grade) com AJAX, enviando os critérios de pesquisa ao servidor sem recarregar a página inteira.

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 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 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.

é 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 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 ou , 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 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.

1. Como posso manter os critérios de pesquisa após um postback?
2. Os critérios de pesquisa podem ser preservados entre postbacks armazenando a entrada de pesquisa em ou .
3. Quando o site for atualizado, posso manter minhas seleções na grade?
4. Sim, empregando JavaScript para reaplicar os IDs dos itens escolhidos quando a página for recarregada e salvando-os em ou .
5. Ao escolher itens de grade, existe uma maneira de impedir que a página seja recarregada completamente?
6. Para atualizações parciais da página, use para evitar o recarregamento total da grade e preservar os parâmetros de busca.
7. As opções de classificação e paginação podem ser preservadas entre postbacks?
8. Sim, empregar ; alternativamente, utilize ou o propriedade para manter a condição.
9. Seleção de itens na grade e persistência de pesquisa juntas?
10. Sim, você pode usar JavaScript para reaplicar os critérios de pesquisa e itens selecionados ao recarregar a página após armazená-los em .

Melhorar a experiência do usuário em grades ASP.NET exige que os critérios de pesquisa sejam mantidos em vigor depois que os itens forem selecionados. As estratégias do lado do cliente e do lado do servidor garantem que os usuários mantenham suas entradas de pesquisa durante o postback. Isso resulta em uma interface mais integrada e fácil de usar.

Preservando a entrada de pesquisa e os itens selecionados, seja por retenção ou armazenamento, é o objetivo. Isso deve minimizar o aborrecimento. Ao usar essas técnicas, você pode manter a natureza dinâmica e fácil de usar de seus aplicativos baseados em grade, ao mesmo tempo que melhora a usabilidade geral.