In this article I’ll discuss an issue which is not discussed on many places but is an issue any one can face when he uses Web User Control and JavaScript combination in ASP.Net.
Issue
Consider a simple WebUserControl with some JavaScript below.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UC_TestCS.ascx.cs" Inherits="UC_TestCS" %>
<script type="text/javascript">
function DisplayMessage_<%=uniqueKey %>() {
var message = document.getElementById("<%=TextBox1.ClientID %>").value;
alert(message);
return false;
}
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Show Message" />
The above WebUserControl simply runs a JavaScript method that displays the text from the TextBox in alert when the button is clicked.
Now I want to use the same WebUserControl on a page multiple times, hence I registered it and placed on the page twice with different Id which is normal and should not affect as WebUserControls are meant for reusability.
<%@ Register Src="~/UC_TestCS.ascx" TagName="TestCS" TagPrefix="uc" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc:TestCS ID="TestCS1" runat="server" />
<br />
<uc:TestCS ID="ucTest1" runat="server" />
<br />
<uc:TestVB ID="TestVB1" runat="server" />
<br />
<uc:TestVB ID="ucTest2" runat="server" />
</div>
</form>
</body>
</html>
Now the issue is that when I use the same WebUserControl multiple times on the same page it actually repeats itself. The Ids of the Controls are managed by .Net but the JavaScript is simply duplicated as shown in the screenshot below.
![Issue: JavaScript in WebUserControl not working when used multiple times on same page]()
In the above screenshot you can clearly see that the JavaScript functions are simply repeated. Hence when I try to run it and click the Button the second function is executed always irrespective of which button is clicked. Many will say to put JavaScript in JS Files but there we can’t make use of ClientID method.
Solution
The solution is that we should append a unique key or number to the method name so that each user control renders its JavaScript methods and variables with a unique name.
C#
protected string uniqueKey;
protected void Page_Load(object sender, EventArgs e)
{
this.uniqueKey = Guid.NewGuid().ToString("N");
this.Button1.Attributes["onclick"] = "return DisplayMessage_" + uniqueKey + "();";
}
VB.Net
Protected uniqueKey As String
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
Me.uniqueKey = Guid.NewGuid.ToString("N")
Me.Button1.Attributes("onclick") = ("return DisplayMessage_" _
+ (uniqueKey + "();"))
End Sub
The above code snippet generates a unique key and assigns it to the protected variable. Now I can use this variable to append the unique key to the method and variable names in JavaScript. Also you will see that instead of OnClientClick event I am now assigning the JavaScript setting it server side so that the unique key can be appended to the method call.
Below is markup of the WebUserControl.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UC_TestCS.ascx.cs" Inherits="UC_TestCS" %>
<script type="text/javascript">
function DisplayMessage_<%=uniqueKey %>() {
var message = document.getElementById("<%=TextBox1.ClientID %>").value;
alert(message);
return false;
}
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Show Message" />
Above marked in GREEN you can see that I am appending the unique key to the method name. This way even if I have multiple WebUserControls on the same web page the JavaScript methods will function properly as all will have unique names. The below screenshot displays the unique method names.
![Issue: JavaScript in WebUserControl not working when used multiple times on same page]()
Download
