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/ .. ." であり、ドメインのルートではありません。(それを認識できるブラウザ/Webサーバーがいくつかありますが、URLの標準ではありません。ここで最も支持された回答を見てください: URLでの "~" チルダの使用は何ですか? また、ここ:チルダの使用 ( ~) asp.net パス内)。

また、ハードコードされた URL を のような Razor Helper に置き換えることをお勧めし@Url.Content("~/assets/images/i18n/en-US.png")ます。ASP.Net は正しい絶対パスに変換されるため、チルダを使用したことに注意してください。
*(私はあなたがかみそりを使っていると仮定しました@Html.ActionLink)


ドロップダウンが大きすぎて気に入らない。小さくする方法はありますか？

プロパティ min-width が 160px (min-width: 160px;) に設定されているクラス「dropdown-menu」(.dropdown-menu) のルールがあります。
したがって、次のような新しいルールでこのプロパティをオーバーライドするだけです。

HTML:

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

CSS レイアウト ファイルで:

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