bootstrap 的语言切换器

Language switcher with bootstrap

我正在尝试在导航栏中构建一个语言切换器。

我的代码如下(在_LoginPartial.cshtml

using ( Html.BeginForm( "SetCulture", "Home", FormMethod.Post ) ) {
    @Html.AntiForgeryToken()
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                <img src="@selectedImgSrc" alt="@culture" />
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#" class="language" rel="it-IT"><img src="~/assets/images/i18n/it-IT.png" alt="Italiano" /></a></li>
                <li role="presentation"><a href="#" class="language" rel="en-US"><img src="~/assets/images/i18n/en-US.png" alt="English" /></a></li>
            </ul>
        </li>
    </ul>
}
<ul class="nav navbar-nav navbar-right">
    <li>@Html.ActionLink( "Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" } )</li>
    <li>@Html.ActionLink( "Sign in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" } )</li>
</ul>

@selectedImgSrc 值为 ~/assets/images/i18n/en-US.png

@culture valueen-us

但是这段代码会产生以下结果

其中有几个问题:

On the nav the image is not showed but only the text (en-US)

我真的不明白为什么图像没有显示在导航中,但我建议你先检查它是否包含在解决方案中,然后,用你喜欢的开发工具检查什么是 Html 生成,如果生成正确,请检查有关该图像的请求。如果请求成功,那么你的问题在 CSS.

更新:
好的,我不知道为什么我以前没有看到它,但是您的图像在其路径的开头使用波浪号。虽然这正是您需要为 Asp.net 指定的绝对路径,但在普通的 Html 路径中,它只是一个普通字符,因此它正在寻找“http://example.com/~/assets/images/ ..." and not in the root of your domain. (There are some browsers/WebServers that can recognize it, but it's not a standard in URLs. Take a look in the most upvoted answer here: what is the use of "~" tilde in url? and also here: use of tilde (~) in asp.net path).

此外,最好的做法是将硬编码的 url 替换为像 @Url.Content("~/assets/images/i18n/en-US.png") 这样的 Razor Helper。请注意,现在我使用波浪号,因为 ASP.Net 将转换为正确的绝对路径。
*(我假设您使用剃须刀是因为 @Html.ActionLink


The dropdown is too large and I dont like it. Is there any way to make it smaller?

class "dropdown-menu" (.dropdown-menu) 有一条规则,其中 属性 min-width 设置为 160px (min-width: 160px;)。
所以,它只是用一个新规则覆盖这个 属性:

Html:

<ul class="dropdown-menu UlLanguageMenu" role="menu">

在您的 CSS 布局文件中:

ul.dropdown-menu.UlLanguageMenu{
    min-width: auto;
}