Accesso ai controlli di un Repeater - Javascript

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

Print
«ottobre»
domlunmarmergiovensab
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789