In this article I will explain with an example, how to use multiple instances of same UserControl on one page with JavaScript in ASP.Net using C# and VB.Net.
When multiple instances of a UserControl are used on same page the JavaScript code present inside the UserControl is repeated and hence it leads to JavaScript errors, thus this article will provide solution on how this issue can be resolved.
 
 
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.
Using multiple instances of same UserControl on Page with JavaScript in ASP.Net
 
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.
Using multiple instances of same UserControl on Page with JavaScript in ASP.Net
 
 
Download
Download Code