How to execute javascript pageload event on multi instance web user control
Question
I'm developing an web user control for that i need to set some properties at page load (client side page load). My control works fine with one instance on page. But when i need multiple instance of that control on same page.Page load event shows effects only on last control.
My control
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControlLoadTest.ascx.cs" Inherits="WebUserControlLoadTest" ClientIDMode="Predictable" %>
<link rel="stylesheet" href="GridViewCSSThemes/YahooGridView.css" type="text/css" media="screen" />
<script runat="server" type="text/C#">
static Int16 _count;
public static Int16 count
{
get { return _count++; }
}
</script>
<script type="text/javascript">
function pageLoad() {
document.getElementById('<%= Hidden_RowIndex.ClientID%>').value = '<%= count%>';
document.getElementById('<%= txtUC.ClientID%>').value = "Count : " + document.getElementById('<%= Hidden_RowIndex.ClientID%>').value;
}
</script>
<asp:HiddenField ID="Hidden_RowIndex" Value="" runat="server" />
<asp:TextBox ID="txtUC" CssClass="tb10" Enabled="false" runat="server"></asp:TextBox>
Use control on aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContextMenuTest.aspx.cs" Inherits="ContextMenuTest" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register TagPrefix="uc1" TagName="UCTest" Src="~/WebUserControlLoadTest.ascx" %>
<!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>Java Script Load Test</title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true" />
<table style="padding:1%;width:100%;">
<tr>
<td>
<uc1:UCTest runat="server" ID="UCTest1"/>
</td>
</tr>
<tr>
<td>
<uc1:UCTest runat="server" ID="UCTest2"/>
</td>
</tr>
</table>
</form>
</body>
After execution result will be Count - 0 in first Control and Count - 1 in Second. But it shows 1 Control blank and second with Control -1 text. Can any one tell me how can i make different instance of java-script page-load event in multi instance web user control.
1 answers
solution1
0 2013-07-03 12:01:10
The problem is
static Int16 _count;
public static Int16 count
{
get { return _count++; }
}
If you declare your control multiple times, then you override the counter each time the control is rendered.
You need a smarter Javascript, for examle, add a class on the control wrapper inside WebUserControlLoadTest.ascx something like
<div class="myControl">
<asp:HiddenField ID="Hidden_RowIndex" Value="" runat="server" />
<asp:TextBox ID="txtUC" CssClass="tb10" Enabled="false" runat="server">
</asp:TextBox>
</div>
and at the top of the aspx page you can have this:
$(document).ready(function(){
var count = 0;
$("myControl input:hidden").each(function(){$(this).value = count++});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.