将引导下拉 html ul 标记转换为 asp:DropDownList答案

【问题标题】：convert bootstrap drop down html ul tag to asp:DropDownList将引导下拉 html ul 标记转换为 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 获得相同的引导输出？

【问题讨论】：

不要对产生 html select 的 asp:DropDownList 与此要求混淆。对于这种类型的东西，它可能需要自定义控件来产生所需的输出，具体取决于您的html 从哪里开始以及它应该采用什么输入......你是如何解决asp:TextBox 的？
@Searching 上面的代码是在 html 中运行的我正在尝试将 html 标签更改为具有相同输出的 asp 控件，因此将 html 更改为输入文本很简单，因为它是一个类的一个标签，但是替换ul html标签比较困难，因为嵌套了多个标签，那么如何用asp控件得到上面的布局呢？

标签： c# css asp.net twitter-bootstrap-3

【解决方案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://stackoverflow.com", Text = "Stackoverflow" });
        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>

【讨论】：