如何在同一网页上多次使用Web用户控件?

时间:2012-07-09 12:39:33

标签: jquery asp.net user-controls jquery-ui-datepicker

我创建了一个用户控件来从日历中选择日期。我使用jquery插件来创建它。我的问题是当我将用户控件放在aspx页面上时它无法正常工作。我的意思是说如果我放两次而不是只有一个控制器工作第二个给我一个错误..所以会有什么问题?

我编写的用于从文件后面的代码注册jquery的代码

 string jquery = string.Empty;
    jquery = "window.addEvent('domready', function () { new CalendarEightysix('exampleIII', { 'excludedWeekdays': [0, 6], 'toggler': 'imgClick', 'offsetY': -4 });});   ";


    Page.ClientScript.RegisterStartupScript(typeof(Page), "a key", "<script type=\"text/javascript\">" + jquery + "</script>");

用户控制代码。

<script src="JS/mootools-1.2.4-core.js" type="text/javascript"></script>
<script src="JS/mootools-1.2.4.4-more.js" type="text/javascript"></script>
<script src="JS/calendar.js" type="text/javascript"></script>
<link href="CSS/calendar.css" rel="stylesheet" type="text/css" />

<table cellpadding="0">
  <tr>
    <th>
      <asp:Label ID="lblHeading" runat="server" Text="Date"></asp:Label>
    </th>
    <td>
      <input id="exampleIII" name="dateIII" readonly="readonly" type="text" maxlength="10"
        style="padding-right: 15px;" />
      <img src="Images/calendar.gif" alt="" id="imgClick" />
    </td>
  </tr>
</table>

对此有任何想法,请帮助我。 提前谢谢。

3 个答案:

答案 0 :(得分:4)

您的问题是肯定的,因为您的控件中没有动态控件ID,或者动态javascript初始化。如果没有更改多个usercontrol加载的ID,那么当您尝试使用javascript时就会出现冲突。

要制作动态ID,您可以使用同一控件的ClientID属性。

在代码上,您需要进行动态更改的点,首先是您选择作为简单html控件的输入,在ID的末尾添加当前UserControl ID为:

<input id="exampleIII<%=ClientID%>" name="dateIII<%=ClientID%>" readonly="readonly"

<img src="Images/calendar.gif" alt="" id="imgClick<%=ClientID%>" />

然后将您的javascript更改为:

 string jquery = string.Empty;
    jquery = "window.addEvent('domready', function () { new CalendarEightysix('exampleIII"+ ClientID + "', { 'excludedWeekdays': [0, 6], 'toggler': 'imgClick"+ ClientID + "', 'offsetY': -4 });});   ";

    Page.ClientScript.RegisterStartupScript(typeof(Page), "akey"+ClientID, "<script type=\"text/javascript\">" + jquery + "</script>");

并加载您常用的javascript库,可能在母版页上,或使用Page.ClientScript.RegisterStartupScript

ps:使用id="exampleIII<%=ClientID%>"来渲染您的控件,因为他自己的ClientID已经准备就绪。因此,您将使用ClientID和exampleIII获得名称的最终名称。

另一种方法是使按钮asp.net控件,因为使用<%= %>你有UpdatePanels的问题。如果你让它们成为asp.net控件,那么你就可以在javascript init上使用ControlName.CliendID

答案 1 :(得分:0)

当页面中包含多个UserControl时,客户端问题的一个常见原因是使用带有固定ID的HTML标记。当您多次包含UserControl时,这会导致元素具有重复的ID。

没有看到代码,就不可能更精确。

答案 2 :(得分:0)

您不能在javascript代码中使用此ID exampleIII。使用文本框而不是输入标记。

你需要使用asp.net ClientID

按如下方式更改您的控件:

<asp:TextBox ID="exampleIII" runat="server"></asp:TextBox>
<asp:LinkButton ID="imgClick" runat="server"></asp:LinkButton>

这样的事情:

jquery = "window.addEvent('domready', function () { new CalendarEightysix('" + exampleIII.ClientID + "', { 'excludedWeekdays': [0, 6], 'toggler': '" + imgClick.ClientID + "', 'offsetY': -4 });});   ";


Page.ClientScript.RegisterStartupScript(typeof(Page), "a key", "<script type=\"text/javascript\">" + jquery + "</script>");

参考:ClientID

  

当Web服务器控件呈现为HTML元素时,id   HTML元素的属性设置为ClientID的值   属性。 ClientID值通常用于访问HTML元素   在客户端脚本中使用document.getElementById方法。