0

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

我的代码如下（在_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）
  • 下拉菜单太大，我不喜欢它。有没有办法让它变小？
4

1 回答 1

2

在导航上，不显示图像，仅显示文本（en-US）

我真的不明白为什么图像没有显示在导航上，但我建议您首先检查它是否包含在解决方案中，然后使用您首选的开发人员工具检查生成的 Html 是什么，如果它是正确的生成，检查关于该图像的请求。如果请求成功，那么您的问题出在 CSS 中。

更新：
好的，我不知道为什么我以前没有看到它，但是您的图像在其路径的开头使用了波浪号。虽然这正是您需要为 Asp.net 指定的绝对路径，但在普通 Html 路径中，它只是一个普通字符，因此它正在寻找“ http://example.com/~/assets/images/ .. ." 而不是在您的域的根目录中。（有一些浏览器/WebServers 可以识别它，但它不是 URL 中的标准。在此处查看最受好评的答案：在 url 中使用 "~" 波浪号是什么意思？ 以及在这里：使用波浪号 ( 〜）在asp.net路径）。

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


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

类“下拉菜单”(.dropdown-menu) 有一个规则，它的属性 min-width 设置为 160px (min-width: 160px;)。
所以，它只是用一个新规则覆盖这个属性，比如：

html:

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

在您的 CSS 布局文件中：

ul.dropdown-menu.UlLanguageMenu{
    min-width: auto;
}
于 2015-01-23T02:55:56.513 回答