在 Webforms 和 C# 中使用图像或复选框包含带有 asp:ListItem 的文本

Question

我收到了一些 Html 页面，这些页面需要使用 WebForms 网站中的代码隐藏代码进行链接。该代码似乎没有使用任何控件，而是使用了很多 Css 类。我已经尝试了多种方法来从下拉列表中获取选定的值，但有些方法没有成功，我怀疑我是否能够做到。我在下面显示了其中一个下拉列表，然后是我成功使用的代码，因为它们只是纯文本。我遇到问题的是带有文本的图像或复选框。

<div class="dropdown">
   <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <img class="lazyload" data-src="./images/icons/usa.png">USA
   </button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <h6 class="dropdown-header" href="#">Country</h6>
      <a class="dropdown-item" href="#"><img class="lazyload" data-src="./images/icons/usa.png">USA</a>
      <a class="dropdown-item" href="#"><img class="lazyload" data-src="./images/icons/great-britain.png">UK</a>
      <a class="dropdown-item" href="#"><img class="lazyload" data-src="./images/icons/france.png">France</a>
      <a class="dropdown-item" href="#"><img class="lazyload" data-src="./images/icons/spain.png">Spain</a>
      <a class="dropdown-item" href="#"><img class="lazyload" data-src="./images/icons/germany.png">Germany</a>
   </div>
</div>

我无法从此代码中获取任何值或创建一个 Asp:DropDown 来同时处理图像和文本。我有其他人在使用复选框和文本时遇到同样的问题。下面的代码显示了我是如何仅使用文本就成功的。

<div class="selection-container"> 
   <asp:DropDownList CssClass="dropdown-toggle" id="ddDelivery" runat="server" AutoPostback="False">
       <asp:ListItem Text="Parcel Post"/>
       <asp:ListItem Text="Courier"/>
   </asp:DropDownList>
</div>

如果有人能想出以某种方式使用原始 Html 的方法，或者让我知道可以在文本中包含图像或复选框的方法。我试过在运行时添加属性并更改类但没有成功。

Answer 1

嗯，这取决于你想要什么，它会建议使用什么控件？

如果您不需要下拉菜单（内置 asp.net 下拉菜单不支持复选框）。

所以，如果您想要一个复选框列表，那么您可以删除一个复选框列表（这听起来是个不错的控件名称，对吧？）

所以，拖入复选框列表，然后您可以选择编辑项目。

例如：

上面只是省去了你手工做的事情。

我们得到这个：

        <style>
            .bigcheck input {
                width: 20px;
                height: 20px;
                vertical-align: middle;
                cursor: pointer;
                margin-right: 12px;                
        }
        </style>

        <br />

        <asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="bigcheck">
            <asp:ListItem Value="1">Dog</asp:ListItem>
            <asp:ListItem Value="2">Horse</asp:ListItem>
            <asp:ListItem Value="3">Garrffe</asp:ListItem>
        </asp:CheckBoxList>

这给了你这个：

所以，这给了我们复选框，还有一些文本。很简单，使用内置编辑器创建上面的内容。

你可以忽略我添加的样式部分。它使复选框更大（我发现复选框太小）。而且这种样式还会将文本从复选框中推开一点（默认是揉成一团并关闭）。

现在，也许我们想要每个复选框都有一个图像？好的，我们可以这样做：

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="bigcheck">
    <asp:ListItem Value="1" Text="Dog <img src='../Content/Animals/dogs.png' height='48' />"></asp:ListItem>
    <asp:ListItem Value="2" Text="Horse <img src='../Content/Animals/horses.png' height='48' />"  ></asp:ListItem>
    <asp:ListItem Value="3"  Text="Giraffe <img src='../Content/Animals/garaffe.png' height='48' />" ></asp:ListItem>
</asp:CheckBoxList>

现在我们明白了：

所以，你必须在这里决定你想要什么。我的意思是，我想要一个下拉菜单，哦等等，不，我想要一些带有图片的复选框。哦等等，我还想要别的东西？

现在，您可能想要下拉列表 - 没问题。

但是，如果您想要带有复选框的下拉菜单 - 我们必须获取插件，因为下拉框允许多项选择，但不允许带有复选框。

也许除此之外，我们还想要一个带复选框的下拉菜单，最重要的是我们想要一个带复选框和图像的下拉菜单？

所以，你必须在这里分解你想要的东西。

在 Webforms 和 C# 中使用图像或复选框包含带有 asp:ListItem 的文本

Use image or checkbox to include with text with asp:ListItem in Webforms and C#

html

asp.net

visual-studio

webforms

dropdown