带引导程序的语言切换器

Posted

技术标签:

【中文标题】带引导程序的语言切换器【英文标题】:Language switcher with bootstrap 【发布时间】:2015-03-22 00:42:09 【问题描述】:

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

我的代码如下(_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"  />
                <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"  /></a></li>
                <li role="presentation"><a href="#" class="language" rel="en-US"><img src="~/assets/images/i18n/en-US.png"  /></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

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

这有几个问题:

在导航上不显示图像,只显示文本(en-US) 下拉列表太大,我不喜欢它。有没有办法让它变小?

【问题讨论】:

【参考方案1】:

在导航上不显示图像,只显示文本(en-US)

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

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

此外,最好将硬编码的 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;

【讨论】:

感谢您的回答。好的CSS,你的建议奏效了。关于第 1 点,包含图像的 html 是正确的并且请求是好的。实际上,在下拉列表中还有同一张图片的另一个实例。 嗯...老实说,您的问题很奇怪,但是,请参阅我更新的答案并尝试删除波浪号...让我知道结果... 那么@Lorenzo,您是否尝试删除波浪号或使用剃须刀助手?有消息吗? 抱歉暂停。我参与了另一个优先级更高的任务。无论如何,您删除波浪号的建议也很有效。这对我来说听起来很奇怪,因为下拉列表中的相同代码可以完美运行。无论如何,非常感谢,现在这是一个已解决的问题,如果有机会会再次投票;) 有时我已经经历过这种奇怪的行为。浏览器有时会保留文件名或/和相对路径的引用,然后即使找不到源,它也会显示找到的最后一个文件。它发生在我的项目中的 Js 和 Css 文件中。更改了位置,浏览器仍然包含它们,即使收到 404 响应。无论如何,我很高兴能帮助你。不客气!

以上是关于带引导程序的语言切换器的主要内容,如果未能解决你的问题,请参考以下文章

Tutorial Master 2丨引导语言本地化

VS Code 切换文件语言 配置语言特定的设置

嵌入式 C语言上下文的快速切换

C# 多语言切换

微信小程序实现多国语言的切换-简单

在使用Qt5.8完成程序动态语言切换时遇到的问题