多个UserControl在一个页面中使用相同的javascript文件 [英] Multiple UserControl in one page with the same javascript file usage

问题描述

你好，任何人都可以提供任何显示多个用户控件和javascript功能的例子吗？因为我试图在谷歌和其他论坛找到解决方案，但没有成功。



所以我的用户控件如下所示：

Hello could anyone provide any example, which show functionality with multiple user controls and javascript? Because I try to find solution with google and in other forum but without success.

So my user control looks like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Bar.ascx.cs" Inherits="Portal.Web.Widgets.Bar" %>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Widgets/Widget.js" type="text/javascript"></script>
        

<dx:ASPxDockPanel ID="BarPanel" ClientIDMode="Static"  runat="server" DragElement="Window" ShowHeader="false"

    ShowShadow="false" Border-BorderWidth="0" ClientInstanceName="dpBar" AllowedDockState="DockedOnly">
        <ContentCollection>
            <dx:PopupControlContentControl id="pcBar"  runat="server" SupportsDisabledAttribute="True">
                <div id="dockPanelContent" style="width: 100%; height: 100%">
                        <dx:WebChartControl ID="chartControl" ClientIDMode="Static"  runat="server" ClientInstanceName="chartControl"

                                                             önCustomCallback="chartControl_CustomCallback" ClientSideEvents-EndCallback="chartControl_EndCallback">
                        </dx:WebChartControl>
                        <dx:ASPxButton ID="checkButton"  runat="server" ClientIDMode="static" ClientInstanceName="checkButton">
                        
                        </dx:ASPxButton>
                 </div>
            </dx:PopupControlContentControl>
        </ContentCollection>
    <ClientSideEvents AfterResizing="dockPanel_AfterResizing"/>
</dx:ASPxDockPanel>

和外部文件中的Widget.js javascript代码如下：

And Widget.js javascript code in external file like this:

var waiting = false;
var callback = false;
var newWidth;
var newHeight = 0;
function dockPanel_AfterResizing(s,e) {
 
    if (s.IsDocked()) {
        newWidth = dockPanelContent.clientWidth;
        newHeight = dockPanelContent.clientHeight;
    }
    else {
        newWidth = dockPanelContent.clientWidth - 10;
        var height = dockPanelContent.parentNode.parentNode.clientHeight;
        var divContent = dockPanelContent.parentNode;
        newHeight = height - parseInt($(divContent).css("padding-top")) - parseInt($(divContent).css("padding-bottom")) - 10;
    }
    chartControl.SetWidth(newWidth);
    chartControl.SetHeight(newHeight);

    if (!waiting) {
        waiting = true;
        dockPanel = s;
        setTimeout("TimeoutedCallback()", 1000);
    }
}

function TimeoutedCallback() {
    chartControl.PerformCallback(newWidth + "|" + newHeight);
}

function chartControl_EndCallback(s, e) {
    waiting = false;
}

在我的页面上我放了多个用户控件实例

web.config

On my page i put multiple user control instances
web.config

<controls>
                               <add src="~/Widgets/Bar.ascx" tagName="Bar" tagPrefix="widget" />
                               <add src="~/Widgets/Gantt.ascx" tagName="Gantt" tagPrefix="widget" />

default.aspx

default.aspx

<div id="UC1">
            <widget:Bar ID="BarWidget"  runat="server" OwnerZoneID="ASPxDockZone1" ClientInstanceName="bar" ClientIDMode="static" />
<div id="UC1"></div>
            <widget:Gantt ID="GanttWidget"  runat="server" OwnerZoneID="ASPxDockZone2" ClientInstanceName="gantt" ClientIDMode="static" />
       </div>

并尝试运行功能但没有白费。每个用户控件被最后一个用户控件覆盖。

请你能帮助我。在此先感谢。

and try to run functions but no vain. Each user control''s overridden by last usercontrol.
Please could you help me. Thanks in advance.

推荐答案

（divContent）.css（ padding-top）） - parseInt （

(divContent).css("padding-top")) - parseInt(

（divContent）.css（ padding-bottom）） - 10 ;
}
chartControl.SetWidth（newWidth）;
chartControl.SetHeight（newHeight）;

if （！等待）{
waiting = true ;
dockPanel = s;
setTimeout（ TimeoutedCallback（）， 1000 ）;
}
}

function TimeoutedCallback（）{
chartControl.PerformCallback（newWidth + | + newHeight）;
}

function chartControl_EndCallback（s，e）{
waiting = 假;
}

(divContent).css("padding-bottom")) - 10; } chartControl.SetWidth(newWidth); chartControl.SetHeight(newHeight); if (!waiting) { waiting = true; dockPanel = s; setTimeout("TimeoutedCallback()", 1000); } } function TimeoutedCallback() { chartControl.PerformCallback(newWidth + "|" + newHeight); } function chartControl_EndCallback(s, e) { waiting = false; }

在我的页面上我放了多个用户控件实例

web.config

On my page i put multiple user control instances
web.config

<controls>
                               <add src="~/Widgets/Bar.ascx" tagName="Bar" tagPrefix="widget" />
                               <add src="~/Widgets/Gantt.ascx" tagName="Gantt" tagPrefix="widget" />

default.aspx

default.aspx

<div id="UC1">
            <widget:Bar ID="BarWidget"  runat="server" OwnerZoneID="ASPxDockZone1" ClientInstanceName="bar" ClientIDMode="static" />
<div id="UC1"></div>
            <widget:Gantt ID="GanttWidget"  runat="server" OwnerZoneID="ASPxDockZone2" ClientInstanceName="gantt" ClientIDMode="static" />
       </div>

并尝试运行功能但没有白费。每个用户控件被最后一个用户控件覆盖。

请你能帮助我。在此先感谢。

and try to run functions but no vain. Each user control''s overridden by last usercontrol.
Please could you help me. Thanks in advance.

这是因为ClientInstanceName在你的情况下是静态的，它总是一样的对于你的所有控件。在ClientInstanceName中，您定义将存储客户端JS API对象的变量的名称。并且因为这些名称对于所有用户控件都是相同的（并且浏览器对用户控件一无所知，只有最终的HTML和JS），所以您在页面初始化（客户端）阶段之后获得最后一个。

+与ClientIDMode类似的行为=静态



所以如何修复：

1.在这part - newWidth = dockPanelContent.clientWidth;

您直接通过ID引用节点，显然如果您在页面上有多个具有相同ID的节点则无法工作。

我建议在发件人内搜索主要控制来识别元素

例如：

var dockPanelContent =

Hi,

It''s because of ClientInstanceName in your case is static it is always the same for all your controls. In ClientInstanceName you defining the name of variable where client side JS API object will be stored. And because these names are equals for all your user contriols (and browser knows nothing about user controls, only final HTML and JS) you getting the last one after page initialization (client side) phase.
+ similar behaviour with ClientIDMode="Static"

So how to fix:
1. in this part - newWidth = dockPanelContent.clientWidth;
you referring to node directly by ID, obviously if you have several node on page with the same ID it can''t work.
I would recommend to search within sender main control to identify element
for example:
var dockPanelContent =

这篇关于多个UserControl在一个页面中使用相同的javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！