如何在同一页面上多次使用 Web 用户控件？

Question

我已经为日历创建了 Web 用户控件。即它有一个文本框和一个日历图像。通过单击日历弹出窗口打开日历。然后通过选择任何日期，它会存储该日期的年份。我使用此代码：

<script language="javaScript" type="text/javascript" src="Scripts/Calendar.js">  </script>
<link href="Styles/Calendar.css" rel="stylesheet" type="text/css" />
<table>
    <tr>
        <td>
            <input type="text" name="datum1"/>
        </td>
        <td>
            <img id="Img1" src="images/calFinal.jpg" alt="" runat="server" onclick="setYears(1947, 2040);
   showCalender(this, 'datum1');" />
        </td>
    </tr>
</table>
<div>
    <!-- Calender Script  -->
    <table id="calenderTable">
        <tbody id="calenderTableHead">
            <tr>
                <td colspan="4" align="center">
                    <select onchange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
           this.selectedIndex, false));" id="selectMonth">
                        <option value="0">Jan</option>
                        <option value="1">Feb</option>
                        <option value="2">Mar</option>
                        <option value="3">Apr</option>
                        <option value="4">May</option>
                        <option value="5">Jun</option>
                        <option value="6">Jul</option>
                        <option value="7">Aug</option>
                        <option value="8">Sep</option>
                        <option value="9">Oct</option>
                        <option value="10">Nov</option>
                        <option value="11">Dec</option>
                    </select>
                </td>
                <td colspan="2" align="center">
                    <select onchange="showCalenderBody(createCalender(this.value, 
            document.getElementById('selectMonth').selectedIndex, false));" id="selectYear">
                    </select>
                </td>
                <td align="center">
                    <a href="#" onclick="closeCalender();"><font color="#003333" size="+1">X</font></a>
                </td>
            </tr>
        </tbody>
        <tbody id="calenderTableDays">
            <tr style="">
                <td>Sun</td>
                <td>Mon</td>
                <td>Tue</td>
                <td>Wed</td>
                <td>Thu</td>
                <td>Fri</td>
                <td>Sat</td>
            </tr>
        </tbody>
        <tbody id="calender">
        </tbody>
    </table>
    <!-- End Calender Script  -->
</div>

当我在同一个 Web 表单上使用用户控件两次时，就会出现问题。我已经注册了控件。当我使用它一次时，它可以正常工作。但我想在两个地方。因此，请就如何在同一个 Web 表单上多次使用用户控件提供一些解决方案。我为用户控件指定了不同的 ID，但它仍然不起作用。

用户控制代码：

<tr>
    <td class="directorytdWidth directorylabel">
        School Name:
    </td>
    <td class="directoryTdPadding">
        <asp:TextBox ID="txtSchoolName"  runat="server" Width="120px" ForeColor="#FF9F00"></asp:TextBox>
    </td>
</tr>
<tr>
    <td class="directorytdWidth directorylabel">
        School Passout Year:
    </td>
    <td class="directoryTdPadding">
        <uc1:calendar ID="schoolPassout" runat="server" />
    </td>
</tr>
<tr>
    <td class="directorytdWidth directorylabel">
        College Name:
    </td>
    <td class="directoryTdPadding">
        <asp:TextBox ID="txtCollegeName"  runat="server" Width="120px" ForeColor="#FF9F00"></asp:TextBox>
    </td>
</tr>
<tr>
    <td class="directorytdWidth directorylabel">
        College Passout Year:
    </td>
    <td class="directoryTdPadding">    
       <uc1:calendar ID="collegePassout" runat="server" />
    </td>
</tr>

Answer 1

使用相同的用户控件但具有不同的 ID。例如（见下面的代码）

在您的网页中注册您的用户控件

 <%@ Register Src="~/Controls/SearchAffiliated.ascx" TagPrefix="uc" TagName="SearchAffiliated" %>

第一次用户控制调用

<uc:SearchAffiliated runat="server" ID="ucSearchAffiliated" />

第二次用户控制调用

<uc:SearchAffiliated runat="server" ID="SearchAffiliated1" />

查看用户控件具有不同的 ID，适用于在一个 Web 表单中调用同一个 UC。

干杯。

Answer 2

使用你希望用户控件显示多少次的循环：

for(int i=0;i < n; i++) //Define the number of time that u want to display
{
   usercontrolname.id="UC"+i;//Assign the id for that usercontrol
   //add line of code,that controls in placeholder or panel
}

Answer 3

您可以在同一页面中使用相同的用户控件 N 次。无论是动态的还是静态的。唯一的问题是我们需要为用户控件提供不同的 ID

这需要在你的Reg中添加

<%@ Register Src="~/UserControls/Hello.ascx" TagPrefix="uc" TagName="Hello" %>

调用用户控件 1

<uc:Hello runat="server" ID="ucHello1" />

调用用户控件2

<uc:Hello runat="server" ID="ucHello2" />

Answer 4

我遇到了同样的问题，但问题与您喜欢在 asp.net 页面中使用的 ID 无关。因为我猜asp.net会自动为页面中的每个元素生成ID，如果它没有的话。

问题是我复制了 ascx 文件而忘记更改它们的类名。确保为每个用户控件使用不同的类名。

<%@ Control Language="C#" ClassName="ucSchema2" %>

Answer 5

我知道这游戏我迟到了，但也许有人可以使用这个答案。

对用户控件中的 html 元素使用静态客户端 ID，然后多次使用该用户控件将导致 html 无效。

您只能在 html 页面上使用一次 id，否则 getElementById（返回单个元素）将不知道要获取哪个元素，然后您可能不会得到任何元素。

您需要使用户控件中的那些客户端 ID 真正唯一，即 selectMonth、selectYear。

这可以通过将用户控件的 ClientID 附加到元素 id 来完成。像这样的东西（不确定这种方法是否真的有效，但你明白了）：

<select onchange="showCalenderBody(createCalender(document.getElementById('selectYear_<%=this.ClientID%>').value,
       this.selectedIndex, false));" id="selectMonth_<%=this.ClientID%>">

这样，客户端 id 应该是本地唯一 id 和页面唯一控件 id 的组合。