如何在下拉菜单中创建<ul>?

时间:2016-07-09 12:41:33

标签: css asp.net-mvc twitter-bootstrap

Visual Studio附带的ASP.NET MVC 5模板在_LoginPartial局部视图中创建此HTML。

看起来像这样:

function in_array (array, key){
    var check = false;
    for(var i = 0; i < array.length; i++){
        if(key == array[i]){
            check = true;
            break;
        }
    }
    return check;
}

var allowedchars=["0","1","3","4","5","6","7","8","9"];

function checkIsStringNaN (str){
    var b = true;
    for(var i = 0, i < str.length; i++){
        if(!in_array(allowedchars, str.charAt(i))){
            b = false;
            break;
        }
    }
    if(!b) {
        return NaN;
    } else {
        return parseInt(str);
    }
}

它产生了这个:

enter image description here

我想改变它:

1)导航栏中会显示一个项目,例如 First Item

2)其余项目,即您当前在导航栏中看到的项目,即<ul class="nav navbar-nav navbar-right"> <li> <a href="#">@string.Format("Hello " + User.Identity.GetUserName() + "!")</a> </li> <li> @Html.ActionLink("Change password", "ChangePassword", "Account", routeValues: null, htmlAttributes: new { title = "Change Password" }) </li> @{ var o = Session["CurrentUserIsAdmin"]; if (o != null) { var currentUserIsAdmin = (bool)o; if (currentUserIsAdmin) { <li> @Html.ActionLink("Create New Admin User", "Register", "Account", routeValues: null, htmlAttributes: new { title = "Create New Admin User" }) </li> } } } <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li> </ul> 中的所有项目都应成为同样位于导航栏上的下拉菜单就在第一项之后。

我不知道足够的CSS和bootstrap来自己做。你能帮我吗?

2 个答案:

答案 0 :(得分:1)

尝试将<ul>代码更改为<select>代码,将<li>代码更改为<option>代码

答案 1 :(得分:1)

试试这个:

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">First item</a>
        <ul class="dropdown-menu">
            <li>
                @string.Format("Hello " + User.Identity.GetUserName() + "!")
            </li>
            <li>
                @Html.ActionLink("Change password", "ChangePassword", "Account", routeValues: null, htmlAttributes: new { title = "Change Password" })
            </li>
            @{
                var o = Session["CurrentUserIsAdmin"];
                if (o != null)
                {
                    var currentUserIsAdmin = (bool)o;

                    if (currentUserIsAdmin)
                    {
                        <li>
                            @Html.ActionLink("Create New Admin User", "Register", "Account",
                            routeValues: null, htmlAttributes: new { title = "Create New Admin User" })
                        </li>
                    }
                }
            }
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
        </ul>
    </li>
</ul>