Question

我正在尝试将bootstrap ul html代码更改为asp：DropDownlist

问题在于bootstrap使用带嵌套类的嵌套div将ul作为下拉列表与html输入文本字段对齐。

我将输入文本转换为asp：TextBox控件，但没有成功将ul列表转换为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>

以下是我尝试的更改

成功将搜索输入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？

获得相同的bootstrap输出

Answer 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>之类的操作，以便可以重复使用它们，那么您需要将整个部分编写为自定义控件。这个啧啧可能有用asp.net_custom_controls.htm。希望这可以帮助。请告诉我们

Answer 2

最后我明白了。它完全是关于asp.net控件中的bootstrap类。

这是解决方案

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

转换bootstrap下拉html ul标签到asp：DropDownList

2 个答案: