Question

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

<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，适用于呼叫同一个UC在一个Web表单中。

干杯。

Answer 2

使用您希望usercontrol显示多少次的循环：

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次。无论是动态还是静态。唯一的问题是我们需要为usercontrol提供不同的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元素使用静态clientide 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的组合。

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

5 个答案: