个人中心
gpt4 book ai didi

c# - 将 bootstrap 下拉 html ul 标签转换为 asp :DropDownList

转载 作者：太空宇宙 更新时间：2023-11-04 09:33:47 25 4
gpt4 key购买 nike

我正在尝试将 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 输出？

enter image description here

最佳答案

好吧，没有 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 .希望这可以帮助。让我们知道

关于c# - 将 bootstrap 下拉 html ul 标签转换为 asp :DropDownList，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40556846/

25 4 0
文章推荐： linux - 获取由 stdin write 打印的 bash 自动补全
文章推荐： linux - 添加整数直到小于给定值并仅显示那些行
文章推荐： linux - Linux Kernel OOPS 可以由用户进程引起吗？
文章推荐： python - 类型错误 ('module' 对象不可调用)使用 dateutil relativedelta
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com