Ciao,
ok:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication2
{
public partial class WebForm1 : System.Web.UI.Page
{
static string[] list = new string[] { "Giorgio", "Pietro", "Rino", "Pino", "Gino", "Mario", "Giovanni", "Ivo", "Marco" };
protected void Page_Load(object sender, EventArgs e)
{
//conto il numero di volte che è stata chiamata la pagina
if (Session["PageLoadCount"] == null)
Session["PageLoadCount"] = 0;
Session["PageLoadCount"] = ((int)Session["PageLoadCount"])+1;
//scrivo a video il numero di volte che la pagina è stata caricata
Label1.Text = string.Format("Numero di volte che è stata caricata la pagina: {0}", Session["PageLoadCount"]);
//cancello la listBox dei nomi
this.ListBox1.Items.Clear();
//scrivo tutti i nomi nel listbox
this.ListBox1.Items.AddRange(list.Where(w => w.Contains(query.Text)).Select(s => new ListItem(s)).ToArray());
}
[System.Web.Services.WebMethod]
public static string[] GetNames(string query)
{
return list.Where(w=>w.Contains(query)).ToArray();
}
}
}
In questa prova di concetto, ogni volta che viene caricata la pagina viene caricato il valore filtrato del contenuto della lista dei nomi nella listbox. Se il valore di "query" (un campo input per scrivere il contenuto da trovare per restituire il nome, ad esempio "ino" restituisce Gino, Pino,Lino ecc.) non è valorizzato viene restituito tutto. Inoltre viene incrementato il numero di volte che hai caricato tutta la pagina
Poi abbiamo il webmethod, che sostanzialmente fa la stessa cosa: restituisce i nomi filtrati, ma il parametro lo passo come post tramite ajax.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<%-- Label contenente il numero di volte che viene caricata la pagina --%>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<%-- textbox filtro per scrivere il contenuto che i nomi devono contenere per essere restituiti --%>
<asp:TextBox ID="query" runat="server"></asp:TextBox>
<%-- bottone per la chiamata ajax --%>
<button onclick="javascript:GetNames();return false;">Usa Ajax</button>
<%-- bottone che usa il postback --%>
<asp:Button ID="Button1" runat="server" Text="Usa postback" /><br />
<%-- ListBox contenente i risultati --%>
<asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
</div>
<script type="text/javascript">
//funzione che chiama il webMethod
function GetNames() {
$.ajax({
//chiamata di tipo POST
type: "POST",
//indirizzo composto dal nome della pagina piu il nome del metodo
url: "webform1.aspx/GetNames",
//tipo dati json
contentType: "application/json; charset=utf-8",
dataType: "json",
//passo i parametri post recuperati dal input id=query
data: "{'query':'" + document.getElementById('<%=query.ClientID%>').value + "'}",
cache: false,
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
//cancello le vecchie option
$('#<%=ListBox1.ClientID%>').empty();
//itero gli elementi restituiti
$.each(response.d, function (index, item) {
//aggiungo option con il valore dell'elemento
$('#<%=ListBox1.ClientID%>').append('<option value="1">' + item + '</option>');
});
}
</script>
</form>
</body>
</html>
Una volta che scrivi un filtro (es:"ino"), se usi postback la pagina verrà ricaricata, quindi entrerà nel Page_Load, ed essendo valorizzato query ("ino") il sistema filtra i nomi e li aggiunge al listbox. Ovviamente incrementa anche il numero di volte che la pagina è stata caricata.
Se clicchi su usa ajax verrà invece chiamato il webmethod tramite ajax, quindi la pagina non verrà ricaricata, dunque non si entra nel page_load e non si incrementa il numero di volte che la pagina è stata chiamata. Una volta restituito il resultato in background uso JQuery per riscrivere i risultati nel listbox lato client.
