¿Cómo paso el Id de cliente real de un control de servidor a una función de JavaScript?

Question

Tengo el siguiente control de servidor cuadro de texto en mi página web:

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

Cuando la página se representa, se construye incluyendo las siguientes:

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

que estoy tratando de pasar el cliente del cuadro de texto IDAS el segundo parámetro a esta función Javascript:

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

¿Cómo llego a, en el servidor, evaluar el control de la TexBox y pasar esa cadena literal a la ¿Función Javascript?

Answer 1

Ponga la <%= txtZip.ClientId %> entre comillas simples, por qué ser así:

'<%= txtZip.ClientId %>' 


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

actualización

Por favor, compruebe este artículo: http://www.jagregory.com/writings/how-to-use-clientids-in-javascript-without-the-ugliness/

También me gusta this answer

Answer 2

Hay muchas maneras de arreglar esto, pero me parece el más simple ing que hacer en el caso general es utilizar el ScriptManager para incluir una secuencia de comandos independiente en la parte superior de mis páginas específicamente con el fin de ClientIDs añadiendo:

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); 
} 

de llamadas que en el caso de PreRender (en algún lugar después de enlace de datos). Luego, si desea obtener un poco de fantasía, puede adaptar fácilmente el método para aceptar una matriz de controles IEnumerable o params, y dejar que use los nombres de control para los nombres de las variables de JavaScript. A veces hago eso, pero generalmente es lo suficientemente simple como para agregar lo que necesito directamente al método.

Incluso esto es un poco incómodo, porque los controles incluidos en otros contenedores de nombres (como cuadrículas) aún pueden causar problemas. Me gustaría ver al equipo ASP.Net construir algo como esto directamente en el marco pronto, pero no estoy realmente esperando que :(

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

He resuelto el mismo problema con un <asp:CheckBox...

cuando se utiliza <%= TargetControl.ClientID %> (sin comillas simples circundantes), ASP.NET representa '<%= TargetControl.ClientID %>' y la función de JavaScript asociado nO ES llama.

al utilizar '<%= TargetControl.ClientID %>' (con citas sigle circundantes), ASP.NET no te evalúa la expresión y hace exactamente lo mismo dentro de las comillas simples.

Así que decide probar con una entrada (casilla de verificación) de control HTLM lugar, utilizando el siguiente marcado

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

y funcionó !!!

Espero que ayude.

Answer 5

Encontré el mismo problema, no pude solucionarlo por ningún método dado anteriormente. Así que agregué un JS intermedio que agregó una llamada a la función JS real en función del valor pasado.Sé que es un método poco convincente para resolverlo, pero aún así funcionó para mí.

Antes:

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

Después

<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

puede agregar el evento onchange del código subyacente en el método Load.

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (IsPostBack) return; 
    txtZip.Attributes.Add("onclick", "ZipCode_OnChange(" + txtZip.ClientID + ")"); 
} 

Si desea pasar más de un control junto con su ClientID, entonces este enfoque es una buena opción.

Espero que esto solucione el problema.