简体   繁体   English

如何在多实例Web用户控件上执行javascript Pageload事件

[英]How to execute javascript pageload event on multi instance web user control

I'm developing an web user control for that i need to set some properties at page load (client side page load). 我正在为此开发一个Web用户控件,我需要在页面加载(客户端页面加载)时设置一些属性。 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 在aspx页面上使用控件

<%@ 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. 执行后,结果将是第一个控件中的Count-0和第二个控件中的Count-1。 But it shows 1 Control blank and second with Control -1 text. 但是它显示1个空白控件,第二个带有-1控件文本。 Can any one tell me how can i make different instance of java-script page-load event in multi instance web user control. 谁能告诉我如何在多实例Web用户控件中创建不同的Java脚本页面加载事件实例。

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 您需要一个更智能的Javascript,例如,在WebUserControlLoadTest.ascx内的控件包装上添加一个类,例如

<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: 在aspx页面顶部,您可以执行以下操作:

$(document).ready(function(){
   var count = 0;
   $("myControl input:hidden").each(function(){$(this).value = count++});
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM