如何在一个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>

我在每个带有树形下拉框的用户控件中使用此脚本，这是针对“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;
    }

但我注意到脚本仅适用于“ucEducationInfo”用户控件。我尝试更改用户控件的行，但我认为这是因为用户控件位于页面末尾。我不擅长JavaScript。有什么问题吗？

- tessa

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

- Yuriy Rozhovetskiy

---

我尝试了这个，但也许我不能用我的代码实现。它没有起作用。但是谢谢。 - tessa

Answer 2

既然你标记了AJAX，你可以在这里尝试这些信息。

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

你的代码问题在于当用户控件被渲染时，每个控件可能会覆盖上一次加载。你需要像上面链接中所述添加一个处理程序，并根据你在哪里使用ajax来检查它们是否在异步回发中被重复添加。

- Michael Christensen

---

好的，我添加了脚本的顶部，并解决了以下问题： Sys.Application.add_load(myEducationFunction); Sys.Application.add_load(ShowMe); var DDE4; var DDE5; function myEducationFunction() ................ - tessa

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或在其中添加一个ready监听器。

- Lawrence Johnson

---

pageLoad是由ASP.NET AJAX调用的一种特殊函数。它需要在作用域内吗？ - Michael Christensen

你能手动调用它吗？抱歉，我不使用 AJAX.NET，但是假设它只需要在 document.ready 上被调用，你可以使用 jQuery 调用它或者使用纯 JavaScript 添加事件。但是具体回答你的问题，在我的回答中，page_Load 不能在该函数块之外被调用。 - Lawrence Johnson