在 ASP.Net 网站中包含带有自定义控件的 Javascript

Question

我有一个自定义日期控件，它本质上是一个文本框和 ajaxToolKit calendarExtender。我想在控件中包含 Javascript 并使其正常工作，无论控件在哪个页面上。该控件名为 DateControl.ascx

所以我有两个 Javascript 函数，dateEditor_OnShown 和 dateEditor_OnHiding。他们通过...被 DateControl.ascx 的页面加载所束缚。

CalendarExtender.OnClientShown = "dateEditor_OnShown";
CalendarExtender.OnClientHiding = "dateEditor_OnHiding"; 

DateControl 工具用于两个单独的页面。如果我将直接的 Javascript 直接放入 DateControl 的 HTML 中，它将仅在默认页面上工作，但当我使用控件加载下一页时会崩溃。错误是js运行时错误'dateEditor_OnHiding'未定义。

如果我尝试从我的 DateControl 的 html 链接到 Javascript 文件...

<script type="text/javascript" src="../JavaScript/IE6CalendarExtenderFix.js"></script>

...不是直接在页面中使用Javascript，而是立即崩溃并出现相同的错误。我应该注意js的路径是正确的。

我真正让它工作的唯一方法是，如果我在使用该控件的每个页面上链接到 javascript。

更新：我觉得有必要澄清一下。建议的解决方案非常感谢，但要么我不理解，要么无论出于何种原因它们在我的情况下都不起作用（很可能是前者）。

所以，这基本上就是我的控件的样子...

<div id="CustomDateControl" style="<%# ControlStyle %>">
    <div id="TextBox" style="display:inline; white-space:nowrap;"> 
        <asp:TextBox runat="server" ID="txtCalender" Style="<%# TextBoxStyle %>" />
    </div>

    <div id="Calendar" runat="server">
        <ajaxToolkit:CalendarExtender
            runat="server"  
            ID="CalendarExtender" 
            Format="MM/dd/yyyy" 
            TargetControlID="txtCalender" 
            PopupButtonID="CalenderImage" /> 
    </div>
</div>

在 aspx 页面中，使用确切的代码，如果我将确切的 javascript 放在脚本标签中，那么页面看起来就像这样......

<script type="text/javascript">
    function dateEditor_OnShown(dateControl, emptyEventArgs) {
        ...
    }

    function dateEditor_OnHiding(dateControl, emptyEventArgs) {
        ...
    }
</script>

<div id="CustomDateControl" style="<%# ControlStyle %>">
    <div id="TextBox" style="display:inline; white-space:nowrap;"> 
        <asp:TextBox runat="server" ID="txtCalender" Style="<%# TextBoxStyle %>" />
    </div>

    <div id="Calendar" runat="server">
        <ajaxToolkit:CalendarExtender
            runat="server"  
            ID="CalendarExtender" 
            Format="MM/dd/yyyy" 
            TargetControlID="txtCalender" 
            PopupButtonID="CalenderImage" /> 
    </div>
</div>

当访问第二个页面（不是默认页面的第一个页面）中的控件说“dateEditor_OnHiding”未定义时，这仍然会崩溃。现在，如果我使用下面建议的相对路径链接到具有相同代码的 js 文件，我仍然会得到相同的结果。

另外，如果按照下面的建议，我重写 OnPreRender 并运行 RegisterClientScriptInclude，我将再次得到相同的结果。该控件始终在默认页面上工作，但从不在第二页上工作，即使据我所知脚本已包含在控件中。

有什么想法吗？

Answer 1

与控件相关的文件路径问题

您的 JS 文件的相对路径可能存在问题。您正在指定 自定义控件 的相对路径。您可能应该编写用户控件。反正。您的 JS 文件是自定义控件的相对路径，但与包含页面无关，因此您的 JS 文件实际上永远不会加载。这就是您的事件处理程序未定义的原因。

最简单的方法是使用绝对路径。由于您使用的是用户控件，因此您可以轻松地添加应用程序根文件夹。

Answer 2

在您的用户控件中附加以下代码。

protected override void OnPreRender(EventArgs e)
{
    Page.ClientScript.RegisterClientScriptInclude("DateControl", this.ResolveClientUrl("~/JavaScript/IE6CalendarExtenderFix.js"));

    base.OnPreRender(e);
}