带引导程序的语言切换器

Question

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

我的代码如下（_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 value是en-us

但是，此代码会产生以下结果

这有几个问题：

• 在导航中，图像未显示，只显示文字（en-US）
• 下拉列表太大而且我不喜欢它。有没有办法让它变小？

Answer 1

  

在导航中，图像未显示，只显示文字（en-US）

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

<强>更新
好吧，我不知道为什么我之前没有看到它，但是你的图像在路径的开头使用了波浪号。虽然你需要为Asp.net指定路径是绝对的，但在普通的Html路径中，它只是一个普通的角色，所以它正在寻找＆＃34; { {3}} ......＆＃34;而不是在你的域的根目录。 （有些浏览器/ Web服务器可以识别它，但它不是URL中的标准。请查看最受欢迎的答案：http://example.com/~/assets/images/以及此处：what is the use of "~" tilde in url?）。

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

  

下拉列表太大，我不喜欢它。有没有办法让它变小？

课程有一个规则＆＃34;下拉菜单＆＃34; （。dropdown-menu），其属性min-width设置为160px（min-width：160px;）。
因此，它只是使用新规则覆盖此属性，如：

HTML：

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

在CSS布局文件中：

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