在Webforms和C#中使用帶有asp:ListItem的影像或復選框包含文本

我得到了一些 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 來同時處理影像和文本。我有其他人使用 CheckBoxes 和文本也有同樣的問題。下面的代碼顯示了我是如何通過文本取得成功的。

<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 的方法，或者讓我知道一種可以在文本中包含影像或復選框的方法。我嘗試在運行時添加屬性并更改類，但沒有成功。

uj5u.com熱心網友回復：

好吧，這取決于您想要什么建議使用什么控制元件？

如果您不尋找下拉串列（并且內置的 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>

這給了你這個：

所以，這給了我們復選框，還有一些文本。真的很簡單，使用內置的編輯器來創建上述內容。

你可以忽略我添加的樣式部分。它使復選框變得更大（我發現復選框太小）。并且該樣式還會將文本從復選框中移出一點（默認設定是卷起并關閉）。

Now, maybe we want a image with each check box? ok, we can do this:

<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>

And now we get this:

So, you have to make up your mind what you want here. I mean, I want a drop down, oh wait, no, I want some check boxes with picture. oh wait, I want somthing else?

Now, it possible that you want a drop down - no problem.

However, if you want a drop down with check boxes - we have to grab a plug-in, since the drop down box DOES allow multiple selects, but not with a check box.

And maybe on top of above, we ALSO want a drop down with check boxes, and on top of that we want a drop down with check boxes and a image?

So, yo have to break down what you want here.

標籤：html asp.net 视觉工作室 网络表格 落下

上一篇：C 專案在VisualStudio2019中觸發了斷點

下一篇：如何解決“拋出未處理的例外：讀取訪問沖突”。對于反向鏈表？