An vielen Stellen der ASP Programmierung wird der JScript Code automatisch generiert, an andreren Stellen muss man nach wie vor selbst Hand anlegen. Soweit so gut, was aber, wenn Variableninhalte von ASP.Net an eine JScript Funktion, oder vice versa, übergeben werden müssen.
In diesem Fall ist die einfachste Schnittstelle simples Html. Der Zugriff auf, beispielsweise, eine unsichtbare Textbox (<input type=”hidden”>) ist auf einfachen WebForms auch kein Problem.
Befindet sich das Html Element aber in einem Kontainer wie einem Panel oder einem ContentPlaceholder, ist der Zugriff nicht ganz so einfach.
Folgendes Beispiel:
2 ASP Buttons, eine ASP Textbox und eine normale Html Textbox.
<asp:Button ID="BtnSet" runat="server" Text="Set Text From Asp"
OnClick="BtnSet_Click" />
<asp:TextBox ID="AspTextbox" runat="server"></asp:TextBox>
<br />
<input ID="HtmlTextbox" type="text" runat="server"/>
<asp:Button ID="BtnGet" type="button" Text="Get Text From Html"
runat="server" OnClientClick="GetText();" />
Beim Klick auf einen Button(BtnSet) wird Serverseitig der Inhalt aus einer ASP-Textbox ausgelesen und in eine Html Textbox geschrieben.
protected void BtnSet_Click(object sender, EventArgs e)
{
//Text aus Asp Textbox auslesen und in Html Textbox schreiben
string Input = AspTextbox.Text;
HtmlTextbox.Value = Input;
}
Beim Klick auf den anderen Button soll dann der Inhalt aus der Html Textbox von einer JScript Funktion ausgelesen werden
function GetText() {
var Output = document.getElementById("HtmlTextbox").value;
alert(Output);
}
Ist der Debugger aktiv, erhalten wir eine Fehlermeldung, dass ein Objekt erforderlich sei, also eine Null Referenz. Ist er nicht aktiv, liefert uns die alert Methode “undefined”, da die Variable Output keinen Inhalt hat.
Doch wie kann das sein? Schauen wir uns den Code mal genauer an.
<input name="ctl00$ContentPlaceHolder1$HtmlTextbox"
type="text" id="ctl00_ContentPlaceHolder1_HtmlTextbox"
value="Test" />
Sowohl die name-, als auch die id-Attribute wurden umbenannt. Nun könnte man solche Seiten jedes Mal im Browser öffnen und überprüfen welchen Präfix die Elemente erhalten haben und das beim Zugriff entsprechend anpassen. Allerdings könnte sich Präfix auch schnell ändern, wenn das Element später mal in ein anderes Panel rutscht. Etwas eleganter ist folgende Syntax mit der man relativ bequem auf die Client ID zugreifen kann.
<%=ElementName.ClientID%>
Im oberen Beispiel sieht das dann so aus
function GetText() {
var Output = document.getElementById("<%=HtmlTextbox.ClientID%>").value;
alert(Output);
}