Multiple UserControl instances in a page and JQuery

If any UserControl contains javascript/client code and we have multiple instances of that usercontrol in a given aspx page, there often arises a conflict in retreiving control with correct ids in the client script. JQuery selectors actually lets us select any control with certain trailing pattern very easily. I usually work it this way —
1) If I ever need to have any client code in any usercontrol, I create a separate JS file to keep my usercontrol’s JS code. That way when I have multiple instances of that UserControl, the javascript atleast doesn’t get repeated on the browser.
2) In the parent aspx page, I keep the different instances of the same user-control under separate divs, which I call as Container divs. I use the id of these div’s , to create a unique identifier for any instance of the usercontrol.
3) Now in UserControl’s js file, for every JS function , I pass the container div’s id and dynamically generate the correct id,–  something like this
$(‘#parentContainerdivID [id$=UserControlID]’) 
Also it would be usefull to mention here, if we pass the parameter ‘this’, in javascript function, that also gets the correct control in question. Anyway, here’s an example, in details.

aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CallMultipleUserControl.aspx.cs" Inherits="CallMultipleUserControl" %>
<%@ Register  Src="~/UControls/UserControlMultipleInstance.ascx"  TagName="UserControlMultipleInstance" TagPrefix="uc1"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="JS/MultipleInstance.js" type="text/javascript"></script>
    
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<uc1:UserControlMultipleInstance ID="UserControlMultipleInstance1"  runat="server" />
</div>
<br />
<div id="div2">
<uc1:UserControlMultipleInstance ID="UserControlMultipleInstance2"  runat="server" />
</div>
<br />
<div id="div3">
<uc1:UserControlMultipleInstance ID="UserControlMultipleInstance3"  runat="server" />
</div>
    
<br /><br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" onClientClick="abc('div1')" 
Text="Call UserControl Instance1" />
&nbsp;&nbsp;
<asp:Button ID="Button2" runat="server" onclick="Button1_Click" onClientClick="abc('div2')" 
Text="Call UserControl Instance2" />
&nbsp;&nbsp;
<asp:Button ID="Button3" runat="server" onclick="Button1_Click" onClientClick="abc('div3')" 
Text="Call UserControl Instance2" />
</form>
</body>
</html>

//ascx

%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserControlMultipleInstance.ascx.cs" Inherits="UControls_UserControlMultipleInstance" %>

<asp:TextBox ID="txt1" runat="server"></asp:TextBox>

//js file

var ContainerId;

function SetContainerID(ParentContainerID) {
ContainerId = ParentContainerID;
}

function abc(ParentContainerID) {
SetContainerID(ParentContainerID);
alert("TextBox Contentx: " + $('#'+ContainerId+' [id$=txt1]').val());
}

Advertisements
This entry was posted in JQuery. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s