Языковой коммутатор с загрузкой

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.

Update:
Хорошо, я не знаю точно, почему я не видел его раньше, но ваши изображения с помощью тильды в начале своего пути. Хотя именно вам нужно указать для 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).

Также рекомендуется заменить жесткий код с помощью Помощника Razor, например @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; 
}