Come si passa l'ID cliente effettivo di un controllo server a una funzione javascript?

Question

Ho il seguente controllo server textbox nella mia pagina web:

<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, <%= txtZip.ClientId %>, txtCity, txtState);/"> 

Quando la pagina esegue il rendering, è costruito tra cui le seguenti:

<input name="txtZip" type="text" id="txtZip" onchange="ZipCode_OnChange(this, &lt;%= txtZip.ClientId %>, txtCity, txtState);" /> 

Sto cercando di passare client della casella di testo iDAS il 2 ° param a questa funzione JavaScript:

function ZipCode_OnChange(txtZipCode, ClientId) { 
    var ret; 
    ret = WebService.GetCityAndState(txtZipCode.value, OnComplete1, OnError, ClientId); 
} 

Come si arriva a, sul server, valutare il controllo del texbox e di passare quella stringa letterale al Funzione Javascript?

Answer 1

Mettere il <%= txtZip.ClientId %> tra virgolette singole, per essere come questo:

'<%= txtZip.ClientId %>' 


<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, '<%= txtZip.ClientId %>', txtCity, txtState);" /> 

Aggiornamento

Si prega di controllare questo articolo: http://www.jagregory.com/writings/how-to-use-clientids-in-javascript-without-the-ugliness/

Inoltre mi piace this answer

Answer 2

ci sono un sacco di modi per risolvere questo problema, ma trovo il più semplice ing fare nel caso generale è utilizzare lo ScriptManager per includere uno script separato nella parte superiore delle mie pagine specificamente allo scopo di ClientIDs aggiungendo:

void AddClientIDs() 
{ 
    var clientIDs = new StringBuilder(); 
    var declaration = "var {0}={1};"; 

    clientIDs.AppendFormat(declaration, "txtZip", txtZip.ClientID);   


    ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientIDs", clientIDs.ToString(), true); 
} 

chiamate che, in caso PreRender (da qualche parte dopo l'associazione dati). Quindi, se vuoi ottenere un po 'di fantasia, puoi facilmente adattare il metodo per accettare un array IEnumerable o params di controlli e lasciare che usi i nomi dei controlli per i nomi delle variabili javascript. A volte lo faccio, ma di solito è abbastanza semplice da aggiungere solo ciò di cui ho bisogno direttamente al metodo.

Anche questo è un po 'strano, perché i controlli inclusi in altri contenitori di denominazione (come le griglie) possono ancora causare problemi. Mi piacerebbe vedere la squadra ASP.Net costruire qualcosa di simile direttamente nel quadro presto, ma io non sono davvero aspettavo :(

Answer 3

<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, txtCity, txtState);"> 


function ZipCode_OnChange(element, txtCity, txtState) { 
    var ClientId = element.getAttribute('id'), 
     ret = null, 
     value = element.value; 

    ret = WebService.GetCityAndState(value, OnComplete1, OnError, ClientId); 
} 

Answer 4

ho risolto lo stesso problema con un <asp:CheckBox...

quando si utilizza <%= TargetControl.ClientID %> (senza singoli apici circostanti), ASP.NET rende '<%= TargetControl.ClientID %>' e la funzione javaScript associata purtroppo non si chiama.

quando si utilizza '<%= TargetControl.ClientID %>' (con citazioni sigle circostanti), ASP.NET tiratevi valuta l'espressione e rende esattamente lo stesso all'interno delle virgolette singole

Così ho deciso di provare con un ingresso (Casella) Controllo HTLM, invece, utilizzando il seguente markup

<input id="CheckBox1" type="checkbox" onclick="myFunction(someValue, '<%= TargetControl.ClientID %>')" /> 

e ha funzionato !!!

Spero che aiuti.

Answer 5

È venuto attraverso lo stesso problema, non è stato possibile risolvere con qualsiasi metodo di cui sopra. Così ho aggiunto un JS intermedio aggiunto una chiamata alla funzione JS effettiva basata sul valore passato.Conosco il suo unico metodo per risolverlo, ma ha comunque funzionato per me.

Prima:

<asp:ListBox ID="List1" runat="server" ondblclick="AddToList2(this,'<%= List2.ClientID %>');" SelectionMode="Multiple" /> 

Dopo

<asp:ListBox ID="List1" runat="server" ondblclick="ProcessList('Add');" SelectionMode="Multiple" /> 

<script> 
function ProcessList(xStr){ 
if(xStr == "Add") 
    AddToList2('<%= List1.ClientID %>', '<%= List2.ClientID %>'); 
else 
    DeleteFromList2('<%= List2.ClientID %>');} 
</script> 

Answer 6

è possibile aggiungere l'evento onchange dal codice dietro nel metodo Page Load.

Se si desidera passare più di un controllo insieme al proprio ClientID, questo approccio è una buona scelta.

Spero che questo risolva il problema.