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

Question

我有一个带有多个用户控件的 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。怎么了？

Answer 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 %>"]();

Answer 2

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

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

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

Answer 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 或在其中添加一个就绪侦听器。