添加 runat=Server 会从选择控件中删除样式答案

【问题标题】：Adding runat=Server removes style from select control添加 runat=Server 会从选择控件中删除样式
【发布时间】：2014-11-17 22:15:58
【问题描述】：

我正在尝试使用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 文件中访问它，下拉控件看起来就像一个标准的组合框。知道为什么当我添加 runat="server" 时样式会被删除 - 还是有其他方法可以从我的 cs 文件中访问 <select> 控件？

谢谢！

【问题讨论】：

runat 服务端组件在服务端预渲染

标签： c# jquery asp.net twitter-bootstrap

【解决方案1】：

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

$("#foundImages").imagepicker({

用这一行：

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

【讨论】：

【解决方案2】：

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

有时，ASP.NET 会更改您身上的ID，因此您的CSS 和JavaScript 可能看起来已损坏。但是，通过将客户端 ID 模式设置为 'Static'，您将强制 ASP.NET 保留您的 ID。

【讨论】：

请注意，如果您在母版页和 aspx 页面中的控件上具有相同的 ID，则当 ClientIdMode 设置为静态时，您的页面将中断

【解决方案3】：

从其他答案开始，正确地指出 ID 可能会更改（除非设置了 ClientIDMode），解决您看到的问题的最简单方法是改用元素的 CSS 类。

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

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

【讨论】：

【解决方案4】：

首先用这个来控制

'clientidmode="Static"'

那么从这样的脚本中获取控制权

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

【讨论】：