Como impedir que o ASP.NET altere os IDs para usar o jQuery

Eu tenho este controle de etiqueta na minha página web

 

E quando a página processou o id do controle muda para algo como isto

  test 

Como posso parar o asp.net de alterar IDs para executar uma operação jQuery como esta

 $('#label1').html(xml); 

em vez de usar este seletor

 $('#Label1') 

use este, basicamente você está usando o código do lado do servidor asp inline clássico.

 $('#<%= Label1.ClientID %>') 

isso irá inserir o ID que for gerado para ser colocado como um literal.

Se você deseja usar arquivos externos, eu sugiro que você crie um obj que seja global na página para armazenar todos os seus ids de clientes e, em seguida, faça referência a esse obj dentro de seus arquivos externos (não ideal, mas é uma solução)

 var MyClientIDs = { Label1 = '<%= Label1.ClientID %>', Label2 = '<%= Label2.ClientID %>', Textbox1 = '<%= Textbox1.ClientID %>', Textbox2 = '<%= Textbox2.ClientID %>' }; 

e, em seguida, no seu arquivo externo, você pode acessar o Label1, por exemplo: $('#' + MyClientIDs.Label1)

O .NET 4 agora tem a capacidade de permitir que você escolha o seu ClientIDMode :

Tipo: System.Web.UI.ClientIDMode

Um valor que indica como a propriedade ClientID é gerada. O padrão é Herdar.

AutoID O valor ClientID é gerado pela concatenação dos valores de ID de cada contêiner de nomenclatura pai com o valor de ID do controle. Em cenários de vinculação de dados em que várias instâncias de um controle são renderizadas, um valor de incremento é inserido na frente do valor do ID do controle. Cada segmento é separado por um caractere de sublinhado (_). Esse algoritmo foi usado em versões do ASP.NET anteriores ao ASP.NET 4.

Static O valor de ClientID é definido como o valor da propriedade do ID. Se o controle for um contêiner de nomenclatura, o controle será usado como o topo da hierarquia de contêineres de nomeação para qualquer controle que ele contenha.

Previsível Esse algoritmo é usado para controles que estão em controles ligados a dados. O valor de ClientID é gerado pela concatenação do valor de ClientID do contêiner de nomenclatura pai com o valor de ID do controle. Se o controle for um controle vinculado a dados que gera várias linhas, o valor do campo de dados especificado na propriedade ClientIDRowSuffix será adicionado no final. Para o controle GridView, vários campos de dados podem ser especificados. Se a propriedade ClientIDRowSuffix estiver em branco, um número seqüencial será adicionado no final, em vez de um valor de campo de dados. Esse número começa em zero e é incrementado em 1 para cada linha. Cada segmento é separado por um caractere de sublinhado (_).

Herdar O controle herda a configuração ClientIDMode do seu controle NamingContainer.

Você não pode parar o asp.net de gerar esses IDs. É assim que faz as coisas.

Você ainda pode usar o jquery da seguinte forma:

 $('#<%=label1.ClientID %>').html(xml) 

ou

 $('[id$=_label1]').html(xml) 

set ClientIDMode="Static" . Isto irá resolver o seu problema.

Exemplo:

  

Se e somente se o layout do contêiner nunca for alterado e você precisar colocar seu JavaSctipt / jQuery em um arquivo externo, poderá usar os IDs gerados nos seletores do jQuery, ou seja,

 $('#ctl00_ContentPlaceHolder1_Label3').html(xml); 

Obviamente, essa abordagem exige que você descubra quais serão os IDs gerados e requer caucanvas se você começar a alterar a construção do site / aplicativo.

Caso contrário, suas melhores opções são

1. Use a marcação de código do lado do servidor inline. A desvantagem dessa abordagem é que você não pode colocar seu código js em um arquivo externo –

 $('#<%= Label3.ClientID %>').html(xml); 

2. Defina classs CSS exclusivas em cada controle que você precisa usar em seu jQuery, que ainda permitiria colocar seu código js em um arquivo externo –

   $('.label3').html(xml); 

3. Use os seletores jQuery para combinar com o id original, o qual, novamente, permitiria que você colocasse seu código js em um arquivo externo –

 $('[id$=Label3]').html(xml); 

Este seletor de jQuery selecionará todos os elementos com id de atributo cujo valor termina com Label3 . A única desvantagem potencial que eu poderia ver com essa abordagem é que, em teoria, poderia ser possível ter um controle Label com o ID Label3, digamos, uma página Master e também em duas páginas de conteúdo. Neste exemplo, usar o seletor jQuery acima corresponderia a todos os três labels, o que pode ter consequências indesejadas.

EDITAR:

Eu pensei que poderia ser útil chamar sua atenção para o controle IDOverride . Uma página de exemplo pode ser encontrada aqui

Ele permite que você especifique quais controles devem ter seu ID desconfigurado dentro da marcação HTML de saída sobreposta com o ID, como é fornecido no arquivo .aspx ao renderizar a página HTML. Eu só toquei brevemente com uma única Master Page e Painéis, mas parece funcionar bem. Usando isso, você pode usar os IDs originais nos seletores do jQuery. Esteja ciente, no entanto, que os resultados são imprevisíveis se você tivesse controles com os mesmos IDs em suas páginas mestras e páginas de conteúdo que são combinadas para renderizar o HTML para uma página.

Resposta curta, não se preocupe em usar os IDs do asp.net. Em asp.net você pode adicionar seu próprio atributo a uma tag:

  

Então no jquery você pode se referir a este elemento via:

 $("input[MyCustomAttr='foo']") 

Eu faço isso o tempo todo com jQuery. Espero que ajude.

O código embutido é a maneira correta de fazer isso. No entanto, isso estará mudando no ASP.NET 4.0. Passamos algum tempo adicionando um recurso que permite o controle total dos IDs gerados pelo cliente. Abaixo estão alguns resources na web sobre esse recurso.

Se você digitar isso na primeira linha da MasterPage, seus IDs de controle não serão alterados:

ClientIDMode="Static"

Gostar;

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Main_MasterPage" ClientIDMode="Static" %> 

A maioria das sugestões aqui funcionará, mas os resultados dos testes no código jQuery mostram que os seletores de ID puros são de longe os mais rápidos. O que eu uso com mais frequência:

 $("[id$=origControlId]") 

é bem lento, mas o problema não é aparente a menos que a página tenha muitos controles e muito jQuery.

Como é indolor atribuir várias classs a um controle, você poderia atribuir a cada uma delas uma CSSClass que corresponda à ID. Como eles seriam únicos (você terá que assistir a controles do tipo repetidor que geram vários controles), você pode selecionar por class.

Por exemplo:

   

pode ser selecionado exclusivamente por:

 $(".Label1") 

Que é quase tão rápido quanto um ID select.

Eu nunca tinha considerado este:

 $('#<%= Label1.ClientID %>') 

mas vou tentar!

Você tem que passar ClientID do controle para o código javascript (eu duvido que Label1 é renomeado para Label3)

 ClientScriptManager.RegisterClientScriptBlock(GetType(), "someKey", "$('#" + Label1.ClientID + "').html(xml);", true); 

Você pode usar o ClientID (assim como todo mundo disse), mas o problema é que ele não pode ser usado em um arquivo JavaScript externo.

Então, idealmente, em vez de usar o ID para referenciá-lo a partir do jQuery, use uma class CSS :

  

Então você pode referenciá-lo assim:

 $(".myclass") 

Você pode replace o ClientID e o UniqueID como este fella fez .

 ///  /// Override to force simple IDs all around ///  public override string UniqueID { get { return this.ID; } } ///  /// Override to force simple IDs all around ///  public override string ClientID { get { return this.ID; } } 

Você também pode criar um controle personalizado que herda do label que substitui a propriedade de identificação para ser o que você deseja que seja.

Isso pode ser conseguido substituindo o id asp.net com o id original como o controle é processado. Isso é muito fácil e pode ser feito criando um conjunto de controles personalizados.

http://www.bytechaser.com/en/articles/ts8t6k5psp/how-to-display-aspnet-controls-with-clean-id-value.aspx

Correndo o risco de ser uma mudança evidentemente óbvia:

  

para

  

Você precisa colocar a propriedade ClientIDMode="Static" no seu botão, isso garante que o ID será o mesmo em tempo de execução, é o que você precisa para obter o object em Javascript.

você não precisa “evitar” que o asp.net altere o ID de controle para usar o jquery ou o javascript.

o ID que é renderizado em sua página é a propriedade ClientID do controle e o que você está definindo no próprio controle é o ID. você não pode definir a propriedade ClientID, ela é gerada para você e pode ou não ser igual ao seu ID. no entanto, como outros mencionaram, você pode usar a propriedade ClientID no seu aspx:

 $('<%= Label1.ClientID %>').html() 

ou registrando o script do cliente em seu código por trás do arquivo usando um dos methods ClientScriptManager.

Apenas se livre do espaço reservado. Ou selecione por class ou hierarquia DOM. Ou até mesmo usar correspondência parcial no ID como último recurso. Existem muitas maneiras fáceis e limpas de selecionar um elemento em jQuery, precisamos nos afastar de nossos antigos e feios hábitos ASP.NET.

E Dreas Grech colocou o último prego no caixão. Você não pode usar arquivos de script externos com as soluções do tipo $ (‘# <% = label1.ClientID%>‘).

Mike

Você ainda pode usar PlaceHolders e definir ClientIDMode na tag PlaceHolder:

   

Nenhum dos IDs de controles contidos será alterado.

Simples, com overriding da class de controle. Aqui está um exemplo com um HtmlGenericControl, mas você pode fazê-lo com qualquer controle ASP.Net:

 public class NoNamingContainerControl : HtmlGenericControl { public NoNamingContainerControl(string tag) : base(tag) { } public override string ClientID { get { return this.ID; } } }