Ottenere l'ID da ASP.NET RUNAT SERVER in jQuery

Question

Sto provando a fare alcune cose in jQuery usando asp.net. Ma l'ID da runat="server" non è lo stesso dell'ID utilizzato in HTML.

Lo usavo per ottenere l'ID da questa situazione:

$("#<%=txtTest.ClientID%>").val();

Ma in questo caso, non funziona. Non ho all'oscuro del perché.

JavaScript

/* Modal */
function contatoModal() {
    //alert("Test");
    alert($("#<%=txtTest.ClientID%>").val());
}

Html

< input runat="server" id="txtTest" value="test" />

Qualche consiglio?

Answer 1

<%= txtTest.ClientID %> Dovrebbe funzionare ma non in un file JavaScript separato in cui gli script laterali del server non eseguono. Un'altra possibilità è quella di utilizzare un selettore di classe:

<input runat="server" id="txtTest" value="test" class="txtTest" />

poi:

var value = $('.txtTest').val();

Answer 2

Come altri hanno già detto, puoi passare un selettore di classe a jQuery, ma è un po 'disordinato. Preferisco usare il L'attributo jQuery termina con il selettore. Dato che un ID generato è una gerarchia appiattita di controlli, è possibile utilizzare il selettore "estremità con" per trovare il tuo elemento.

<input runat="server" id="txtText" />

Se reso, l'ID generato diventa qualcosa del genere (se all'interno del titolare del contenuto di un masterpage):

<input id="ctl00_contentplaceholder_txtText" />

Per trovare questo controllo:

$("input[id$='txtText']")

Prestare attenzione quando lo usi all'interno di un ripetitore.

Answer 3

Nella pagina WebForm / HTML ....

<asp:TextBox ID="txtUserName" runat="server" Class="form-control"></asp:TextBox>  

In jQuery

var UserName = $("[id*=txtUserName]").val();
alert(UserName);

100% sicuro che funzioni per me ...

Answer 4

Prova a metterlo in un nome variabile:

var txtTestID = '#' + '<%=txtTest.ClientID %>';

$(txtTestID).val();

Non sono sicuro se il <%= piace essere dentro doppie citazioni. Ho sempre avuto comportamenti contrastanti quando non ho usato la singola citazione.

Answer 5

Quando si utilizza ASP.NET 4 e ClientIDMode è impostato su "prevedibile", è possibile prevedere l'ID in base alla gerarchia. Oppure impostato su "statico", quindi asp.net non lo sbalzirà.

L'articolo di Scottgu su di esso http://weblog 4-0-Series.aspx

E questo è estremamente utile quando si utilizzano scenari di file JS esterni.

Answer 6

Come Darin Dimitrov detto nella sua risposta:

<%= txtTest.ClientID %> dovrebbe funzionare ma Non in un file javascript separato in cui gli script lato server non eseguono.

Le soluzioni che potrei trovare per quelle sono:

<input runat="server" id="txtTest" value="test" class="txtTest" />

---

• Uso class invece di ID

Usando la classe puoi recuperare il valore ovunque. Questa è una delle migliori soluzioni (di solito le migliori)

var value = $('.txtTest').val();

---

• Uso ClientID codice nel aspx

Puoi sempre chiamare ClientID Nell'ASPX, ma se stai lavorando con una sorta di struttura, questa non è la soluzione migliore. Mi piace usare questo metodo quando provo qualcosa.

var value = $('#<%=txtTest.ClientID%>').val();

Puoi anche usare ClientID In un file JS esterno con una soluzione alternativa. Non è carino, usa solo se ne hai davvero bisogno. Di solito lo faccio quando uso Telerik.

In ASPX:

var id = <%=txtTest.ClientID%>;

Nel file JS:

var value = $('#'+id).val();

---

• Uso Proprietà Control.ClientIdMode Static

Quindi l'HTML diventa

<input runat="server" id="txtTest" value="test" ClientIDMode="Static" />

e il JS può chiamarlo come è chiamato

var value = $('#txtTest').val();

Il problema con questa soluzione è che devi essere molto Attento a evitare la duplicità sul ids della tua pagina. Prova a non usare mai Static modalità in un controller.

Come afferma MSDN:

Il valore clientID è impostato sul valore della proprietà ID. Se il controllo è un contenitore di denominazione, il controllo viene utilizzato come parte superiore della gerarchia dei contenitori di denominazione per eventuali controlli che contiene.

---

Il collegamento di La risposta di Shaans è un posto fantastico per controllare informazioni extra su ClientIDMode.

Cleaner HTML Markup con ASP.NET 4 moduli Web - ID client (vs 2010 e .NET 4.0 Series)

Answer 7

Per evitare problemi con ID resi, usa invece una classe. Questo non cambierà durante il rendering:

function contatoModal() {

//alert("Test");

alert($(".txtTest").val());

}

Html:

< input runat="server" id="txtTest" value="test" class="txtText" />