在表中添加多个用户控件

I'm trying to put multiple user controls on the dashboard. But only one user control is visible.

我试图将多个用户控件放在仪表板上。但是只有一个用户控件是可见的。

Dashboard.aspx:

Dashboard.aspx:

<table cellpadding="0" cellspacing="0" border="0" width="220px">
<tr>
<td>
<dc:MyControl ID="c1" runat="server"/>
</td>
<td>
<dc:MyControl ID="c2" runat="server"/>
</td>
</tr>
</table>

It looked like the global object created in user control overwrites the other one.

看起来用户控件中创建的全局对象覆盖了另一个对象。

I then changed my javascript code as:

然后我将javascript代码改为:

MyControl.ascx:

MyControl.ascx:

//Display gauge on the page (has some html5 elements like canvas)
<div id="gauge1" class="gauge"></div>

<script type="text/javascript">
var <%=this.ClientID%>global = new jGauge(); // Create a new gauge.
<%=this.ClientID%>global.id = 'gauge1'; // Link the new gauge to the placeholder DIV.


// This function is called by jQuery once the page has finished loading.
$(document).ready(function () {
<%=this.ClientID%>global.init(); // Put the gauge on the page by initializing it.
});
</script>

But still only one user control is visible. Any suggestions?

但是仍然只有一个用户控件是可见的。有什么建议吗?

2 个解决方案

#1

You still need to change the container ID (gauge1) so that it's unique for each control, otherwise it will get overwritten. Something like this:

您仍然需要更改容器ID (gauge1)，以便它对每个控件都是惟一的，否则它将被覆盖。是这样的:

<div id="<%=this.ClientID%>gaugecontainer" class="gauge"></div>

And modify the Javascript to use the dynamic ID:

修改Javascript使用动态ID:

<%=this.ClientID%>global.id = '<%=this.ClientID%>gaugecontainer'; 
// Link the new gauge to the placeholder DIV.

#2

try this

试试这个

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td style="width:50%;">
            <dc:MyControl ID="c1" runat="server"/>
        </td>
        <td style="width:50%;">
            <dc:MyControl ID="c2" runat="server"/>
        </td>
    </tr>

#1