将引导下拉 html ul 标记转换为 asp:DropDownList
Posted
技术标签:
【中文标题】将引导下拉 html ul 标记转换为 asp:DropDownList【英文标题】：convert bootstrap drop down html ul tag to asp:DropDownList 【发布时间】：2017-03-26 04:58:42 【问题描述】：我正在尝试将 bootstrap ul html 代码更改为 asp:DropDownlist
问题是引导程序使用嵌套 div 和嵌套类将 ul 与 html 输入文本字段一起对齐为下拉列表。
我将输入文本转换为 asp:TextBox 控件，但将 ul list 转换为 asp:DropDownList 控件不成功
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container ">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<div class="input-group-btn">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
以下是我尝试的更改
成功将seach输入html按钮改成asp.Button。
html输入文本改成asp.TextBox控件成功
但是将ul改成asp.dropDownList没有成功
<div class="col-lg-12">
<div class="input-group">
<div class="input-group-btn">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose Model
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<%--<input type="text" class="form-control" placeholder="Search for...">--%>
<asp:TextBox ID="TextBox1" class="form-control" placeholder="Search for..." runat="server"></asp:TextBox>
<span class="input-group-btn">
<%--<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>--%>
<asp:LinkButton ID="SubmitBtn"
runat="server"
CssClass="btn btn-default">
<span aria-hidden="true" class="glyphicon glyphicon-search"></span>
</asp:LinkButton>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
不想要的输出应该如下所示
如何使用 asp:DropDownList 获得相同的引导输出？
【问题讨论】：
不要对产生 htmlselect 的 asp:DropDownList 与此要求混淆。对于这种类型的东西，它可能需要自定义控件来产生所需的输出，具体取决于您的html 从哪里开始以及它应该采用什么输入......你是如何解决asp:TextBox 的？
@Searching 上面的代码是在 html 中运行的我正在尝试将 html 标签更改为具有相同输出的 asp 控件，因此将 html 更改为输入文本很简单，因为它是一个类的一个标签，但是替换ul html标签比较困难，因为嵌套了多个标签，那么如何用asp控件得到上面的布局呢？
【参考方案1】：
好吧，没有 OOB 可以进行这种渲染，但您可以使用这个快速/脏选项
鉴于您想从input-group 元素开始，表单将是这样的
<div class="col-lg-12">
<asp:Panel ID="inputgroup" class="input-group" runat="server">
<asp:Panel ID="inputgroupbtn" class="input-group-btn" runat="server">
<asp:Panel ID="dropdown" class="dropdown" runat="server">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose Model
<span class="caret"></span>
</button>
<asp:ListView ID="ListView1" runat="server" class="dropdown-menu">
<LayoutTemplate>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="_hyperlink_"
NavigateUrl='<%#Eval("Url") %>'
Text='<%#Eval("Text") %>'
runat="server" />
</li>
</ItemTemplate>
<EmptyDataTemplate>
<li></li>
</EmptyDataTemplate>
</asp:ListView>
</asp:Panel>
</asp:Panel>
<asp:TextBox ID="TextBox1" class="form-control" placeholder="Search for..." runat="server"></asp:TextBox>
<span class="input-group-btn">
<asp:LinkButton ID="SubmitBtn"
runat="server"
CssClass="btn btn-default">
<span aria-hidden="true" class="glyphicon glyphicon-search"></span>
</asp:LinkButton>
</span>
</asp:Panel>
</div>
在链接后面的代码中（仅作为示例）
protected void Page_Load(object sender, EventArgs e)
List<UrlLink> list = new List<UrlLink>();
list.Add(new UrlLink() Url = "http://www.google.com", Text = "Google" );
list.Add(new UrlLink() Url = "http://***.com", Text = "***" );
ListView1.DataSource = list;
ListView1.DataBind();
//UrlLink类
public class UrlLink
public string Url get; set;
public string Text get; set;
ul 元素由asp:ListView 生成。如果您想做<MyControls:DropDownControl> 之类的操作，以便可以重用它们，那么您需要将整个部分编写为自定义控件。这个 tut 可能很有用 asp.net_custom_controls.htm 。希望这可以帮助。让我们知道
【讨论】：
谢谢您的回复，您的回答很好，但是没有asp.DropdownList，试了半天终于搞定了。【参考方案2】：我终于弄明白了。 这都是关于 asp.net 控件中的引导类。
解决办法
<div class="container ">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div class="input-group">
<span class="input-group-btn">
<asp:DropDownList ID="DropDownList1" CssClass="btn btn-default" runat="server">
<asp:ListItem Value="1">Action</asp:ListItem>
<asp:ListItem Value="2">Another Action</asp:ListItem>
<asp:ListItem Value="3">Something else here</asp:ListItem>
</asp:DropDownList>
</span>
<div class="add-clear-span has-feedback " />
<%--<input type="text" name="Search" required="required" class="" autocomplete="off">--%>
<asp:TextBox ID="SearchText" CssClass="form-control suggestIngredient ui-autocomplete-input" placeholder="Search for ..." runat="server"></asp:TextBox>
<span class="add-clear-x form-control-feedback glyphicon glyphicon-remove-circle" style="color: rgb(204, 204, 204); cursor: pointer; text-decoration: none; overflow: hidden; position: absolute; pointer-events: auto; right: 0px; top: 0px; display: none;"></span>
</div>
<span class="input-group-btn">
<%--<button class="btn btn-default" type="button"></button>--%>
<asp:LinkButton ID="SearchBtn" CssClass="btn btn-primary" runat="server"><span class="glyphicon glyphicon-search"></span></asp:LinkButton>
</span>
</div>
</div>
<div class="col-lg-1"></div>
</div>
【讨论】：
以上是关于将引导下拉 html ul 标记转换为 asp:DropDownList的主要内容，如果未能解决你的问题，请参考以下文章