Question

我正在尝试使用this control并能够从代码后端（cs文件）访问它。我从下面的代码开始工作：

   $(document).ready(function () {
       $("#foundImages").imagepicker({
           hide_select: true,
           show_label: true
       });
   });

<select id="foundImages" class="image-picker show-labels show-html">
    <option data-img-label="Awww" data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
    <option data-img-label="Yeah" data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
    <option data-img-label="Ohai" data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
    <option data-img-label="Plop" data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>

但是当我向它添加runat="server"时，我可以从.cs文件中访问它，drop控件看起来就像一个标准的组合框。知道为什么在我添加runat="server"时删除了样式 - 还是有其他方法可以从我的cs文件中访问<select>控件？

谢谢！

Answer 1

如果您将runat="server"添加到选择中，则将其转换为服务器端控件。在这种情况下，生成的HTML选择的ID将为foundImages.ClientID（您可以使用View Source进行检查）。这意味着您必须更改此行：

$("#foundImages").imagepicker({

这一行：

$("#<%=foundImages.ClientID%>").imagepicker({

Answer 2

除'runat="server"'外，请尝试添加'clientidmode="Static"'。

有时，ASP.NET会更改ID，因此您的CSS和JavaScript可能会被破坏。但是，通过将客户端ID模式设置为'Static'，您迫使ASP.NET单独留下您的ID。

Answer 3

根据其他答案，正确地说明ID可能会更改（除非设置了ClientIDMode），围绕您遇到的问题的最简单方法是使用元素的CSS类。

您已将课程image-picker分配到您的下拉列表中，因此没有理由不执行以下操作：

$(document).ready(function () {
   $(".image-picker").imagepicker({
       hide_select: true,
       show_label: true
   });
});

Answer 4

首先将此用于控制

'clientidmode="Static"'

然后从像这样的脚本获得控制

$("#<%=img.ClientID%>").imagepicker({...});

添加runat = Server会从select控件中删除样式

4 个答案: