Poco fa ho scritto un articolo su come accedere ai controlli di un Repeater lato server per leggere quello che un utente ha inserito. Vi ho lasciato promettendovi un altro articolo a breve su come accedere ai controlli lato client. Non ho saputo resistere e mi sono messo subito a lavoro.
L’idea è semplice: scrivere un Array javascript in cui siano contenuti degli oggetti che abbiano per proprietà i riferimenti ai controlli. Vi assicuro che suona più difficile di quel che è in realtà.
Faccio sempre riferimento all’esempio dell’articolo precedente: Proponiamo all’utente una serie di nominativi e l’utente ne può scegliere alcuni. Al Postback leggiamo i nomi scelti dall’utente e li stampiamo in campo litteral. Stavolta aggiungiamo che il primo utente DEVE essere scelto.
Per semplificare il riutilizzo del codice ho creato un controllo server che eredita dal controllo repeater in cui andiamo a overlodare solo la funzione onPreRender. In questa funzione creiamo tutto il javascript che ci occorre.
Create un file wmbRepeater.cs sotto la cartella di sistema APP_Code del vostro sito.
La classe wmbRepeater.cs
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;
namespace wmb
{
///<summary>
/// Summary description for wmbRepeater
///</summary>
public class wmbRepeater : Repeater
{
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
StringBuilder ContentJson = new StringBuilder();
ContentJson.AppendLine("var " + this.ID + " = new Array();");
RepeaterItem Item;
for (int i = 0; i < this.Items.Count; i++)
{
Item = this.Items[i];
ContentJson.AppendLine(this.ID + "[" + i.ToString() + "] = {");
foreach (Control C in Item.Controls)
{
if ((C.ID != null)&&(C.ID != string.Empty))
{
ContentJson.AppendLine(string.Format("{0}:document.getElementById('{1}'),", C.ID, C.ClientID));
}
}
ContentJson.Remove(ContentJson.Length - 1, 1);
ContentJson.AppendLine("}");
}
Page.ClientScript.RegisterStartupScript(typeof(wmbRepeater), this.ID + "_wmbRepeater_Registration", ContentJson.ToString(), true);
}
}
}
Registriamo il controllo nella pagina come:
<%@ Register Namespace="wmb" TagPrefix="wmb" %>
Usiamo il controllo come un comune repeater:
<wmb:wmbRepeater ID="repList" runat="server">
<HeaderTemplate>
<asp:Label ID="lblTitle" runat="server" Text="Titolo"></asp:Label>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name")%>'></asp:Label>
</td>
<td>
<asp:Label ID="lblAge" runat="server" Text='<%# Eval("Age")%>'></asp:Label>
</td>
<td>
<asp:CheckBox ID="chkIsSelected" runat="server" Checked='<%#Eval("Selected")%>'/>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</wmb:wmbRepeater>
Agganciamo al pulsante btnAnalyze la funzione javascript btnAnalyze_Click()attraverso l’attributo OnClientClick
<asp:Button ID="btnAnalyze" runat="server" Text="PostBack" OnClientClick="return btnAnalyze_Click()" />
Infine scriviamo la funzione javascript che sfrutta la nuova funzionalità della classe wmbRepeater:
<script type="text/javascript">
function btnAnalyze_Click(){
if(!repList[0].chkIsSelected.checked)
{
alert('il signor ' + repList[0].lblName.innerHTML + ' deve essere selezionato perchè è raccomandato!');
return false;
}
return true;
}
</script>
Come vedete usiamo solo i nomi server. IdRepeater[RigaDaControllare].IDControlloServer.
Rimango come sempre a disposizione per chiarimenti.
posted @ sabato 19 gennaio 2008 03:49