如何在一个 aspx 页面上对每个用户控件使用 javascript pageLoad() 事件？

Posted 2023-02-22

【中文标题】如何在一个 aspx 页面上对每个用户控件使用 javascript pageLoad() 事件？

【英文标题】：how can i use javascript pageLoad() event with each user control at one aspx page?

【发布时间】：2012-10-30 18:47:42

【问题描述】：

我有一个带有多个用户控件的 aspx 页面。 页面是这样的，

<asp:Content ID="Content2" ContentPlaceHolderID="chpMainBody" runat="server">

            <en:ProfileInfo ID="ucProfileInfo" runat="server" />

            <br />
             <en:WorkingExperienceInfo ID="ucWorkingExperienceInfo" runat="server" />
            <br />
              <en:TechnicalInfo ID="ucTechnicalInfo" runat="server" />

   <br />
           <en:EducationInfo ID="ucEducationInfo" runat="server" />
</asp:Content>

我在每个用户控件中使用此脚本用于带有树视图的 dropdownextender，这是用于“ucEducationInfo”用户控件

<script type="text/javascript">
    var DDE4;
    var DDE5;
    function pageLoad() 
        DDE4 = $find('<%= dde_CountryUniversity.ClientID %>');
        DDE5 = $find('<%= dde_UniversityMajors.ClientID %>');


        DDE4._dropWrapperHoverBehavior_onhover();
        DDE5._dropWrapperHoverBehavior_onhover();

        $get('<%= pnl_CountryUniversity.ClientID %>').style.width = $get('<%= txt_CountryUniversity.ClientID %>').clientWidth;
        $get('<%= pnl_UniversityMajors.ClientID %>').style.width = $get('<%= txt_UniversityMajors.ClientID %>').clientWidth;


        if (DDE4._dropDownControl) 
            $common.removeHandlers(DDE4._dropDownControl, DDE4._dropDownControl$delegates);
        
        if (DDE5._dropDownControl) 
            $common.removeHandlers(DDE5._dropDownControl, DDE5._dropDownControl$delegates);
        



        DDE4._dropDownControl$delegates = 
            click: Function.createDelegate(DDE4, ShowMe),
            contextmenu: Function.createDelegate(DDE4, DDE4._dropDownControl_oncontextmenu)
        
        DDE5._dropDownControl$delegates = 
            click: Function.createDelegate(DDE5, ShowMe),
            contextmenu: Function.createDelegate(DDE5, DDE5._dropDownControl_oncontextmenu)
        


        $addHandlers(DDE4._dropDownControl, DDE4._dropDownControl$delegates);
        $addHandlers(DDE5._dropDownControl, DDE5._dropDownControl$delegates);
    

    function ShowMe() 
        DDE4._wasClicked = true;
        DDE5._wasClicked = true;
    

但我注意到 scipt 仅适用于“ucEducationInfo”用户控件。我尝试更改用户控件的行，我认为这是因为用户控件位于页面末尾。我不擅长 javascript。怎么了？

【参考方案1】：

在我看来，实现自定义 ajax 控件应该是最好的决定。但是由于您没有使用过 JavaScript，所以这对您来说是一项相当复杂的任务。尝试用下面的脚本替换用户控件中的 pageLoad 函数：

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () 

    // code from pageLoad method here

    window.showControl = window.showControl || ;

    window.showControl["<%= this.ClientID %>"] = function () 
        DDE4._wasClicked = true;
        DDE5._wasClicked = true;
    ;
);

以下是 ucEducationInfo 控件页面中使用 showControl 函数的示例：

showControl["<%= ucEducationInfo.ClientID %>"]();

【讨论】：

我试过这个，但也许我无法用我的代码实现。它不起作用。不过谢谢

【参考方案2】：

由于您标记了 AJAX，您可以在此处尝试信息。

http://www.asp.net/ajax/documentation/live/overview/AJAXClientEvents.aspx

您的代码的问题是当呈现用户控件时，可能会覆盖最后一次加载。您需要像上面的链接一样添加一个处理程序，并可能检查它们不会在异步回发中双重添加，具体取决于您使用 ajax 的位置。

【讨论】：

好的，我添加了脚本的顶部，它已经解决了 Sys.Application.add_load(myEducationFunction); Sys.Application.add_load(ShowMe);变种 DDE4;变种 DDE5;函数 myEducationFunction() ......

【参考方案3】：

隔离函数，使变量本地化并且不冲突。试试这个：

<script type="text/javascript">
(function() 
    var DDE4;
    var DDE5;
    function pageLoad() 
        DDE4 = $find('<%= dde_CountryUniversity.ClientID %>');
        DDE5 = $find('<%= dde_UniversityMajors.ClientID %>');


        DDE4._dropWrapperHoverBehavior_onhover();
        DDE5._dropWrapperHoverBehavior_onhover();

        $get('<%= pnl_CountryUniversity.ClientID %>').style.width = $get('<%= txt_CountryUniversity.ClientID %>').clientWidth;
        $get('<%= pnl_UniversityMajors.ClientID %>').style.width = $get('<%= txt_UniversityMajors.ClientID %>').clientWidth;


        if (DDE4._dropDownControl) 
            $common.removeHandlers(DDE4._dropDownControl, DDE4._dropDownControl$delegates);
        
        if (DDE5._dropDownControl) 
            $common.removeHandlers(DDE5._dropDownControl, DDE5._dropDownControl$delegates);
        



        DDE4._dropDownControl$delegates = 
            click: Function.createDelegate(DDE4, ShowMe),
            contextmenu: Function.createDelegate(DDE4, DDE4._dropDownControl_oncontextmenu)
        
        DDE5._dropDownControl$delegates = 
            click: Function.createDelegate(DDE5, ShowMe),
            contextmenu: Function.createDelegate(DDE5, DDE5._dropDownControl_oncontextmenu)
        


        $addHandlers(DDE4._dropDownControl, DDE4._dropDownControl$delegates);
        $addHandlers(DDE5._dropDownControl, DDE5._dropDownControl$delegates);
    

    function ShowMe() 
        DDE4._wasClicked = true;
        DDE5._wasClicked = true;
    
)();
</script>

此外，如果您这样做，您需要从该功能块中调用 page_Load 或在其中添加一个就绪侦听器。

【讨论】：

pageLoad 是 asp.net AJAX 调用的特殊函数。它需要在范围内吗？

可以手动调用吗？抱歉，我不使用 AJAX.NET，但假设它只需要在 document.ready 上调用，您可以使用 jQuery 调用它或使用纯 Javascript 添加事件。但要具体回答您的问题，在我的回答中，page_Load 不能在该功能块之外调用。