Добавление изображений в Html.ActionLink

Я пытался создать опцию переключения между представлением списка и видом виджета в ASP.net MVC (с движком просмотра бритвы).

Однако у меня есть некоторые проблемы с попыткой как добавить изображение, так и масштабировать его до "правильной высоты" (той же высоты, что и рядом с ним).

Я искал создать что-то вроде:

Желаемый результат:

----------------------------------------------- ----------------------------------

[≡] List View | [+] Widget View

----------------------------------------------- ----------------------------------

где [≡] и [+] были фактически маленькими изображениями значков.

Попытки до сих пор включают:

Ссылка на действие была примерно такой:

@Html.ActionLink("List View", "listView",  
    new { @style = "background-image:url('~/Content/Images/listIcon.png')" },null)

который отображает только текст.

Я также попытался создать actionlink как:

<img src="~/Content/Images/listIcon.png" />@Html.ActionLink("List View", "Index")

но это разрешено в

a) изображение не было частью ссылки; и

b) изображение было почти в два раза больше размера текста (как показано на рисунке ниже)

 _    _               _    _
|      |             |      |
| icon |             | icon |
|_    _| List View | |_    _| Widget View

Я бы даже не возражал, пытаясь создать его, как:

Альтернативный вариант:

----------------------------------------------- ----------------------------------

 _    _               _    _
|      |             |      |
| icon | List View | | icon | Widget View
|_    _|             |_    _|

если бы мне пришлось.

Кто-нибудь знает/подскажет, как решить/создать это?

Ответ 1

Вы можете использовать Url.Action для гиперссылки и Url.Content для источника изображения.

Затем вы можете создать внешний вид с помощью CSS.

<ul class="links">
    <li>
       <a href="@Url.Action("ListView", "Home")" title="List View" class="links">
            <img alt="List View" src="@Url.Content("~/Images/ListView.png")"> 
            List View
       </a>
    </li>
    <li>
       <a href="@Url.Action("WidgetView", "Home")" title="Widget View" class="links">
            <img alt="Widget View" src="@Url.Content("~/Images/WidgetView.png")"> 
            Widget View
       </a>
    </li>
</ul>
<style type="text/css">
    ul.links {
        list-style-type: none;
    }    
        ul.links li {
            display: inline-block;
            border-left: 1px solid black;
            padding-left: 10px;
            margin-left: 10px;
        }    
            ul.links li:first-child {
                border-left: 0;
                padding-left: 0;
                margin-left: 0;
            }
</style>

Ответ 2

Вам нужно создать привязку вручную и установить с помощью помощника @Html.ActinLink... вы можете использовать @Url.Action помощник

<a href="@Url.Action("YourAction", "YourController", null)">
     <img src="yourImageSource"  style="vertical-align: middle; width: 30px;"> List View
<a/> |
<a href="@Url.Action("YourAction", "YourController", null)">
     <img src="yourImageSource" style="vertical-align: middle; width: 30px;"> Grid View
<a/>

Размер изображения можно изменить с помощью CSS.

Url.Action предоставляет вам ссылку на ваше действие. ActionLink создает привязку со ссылкой на действие.

Ответ 3

Причина, по которой этот код не работал:

@Html.ActionLink("List View", "listView", new { @style = "background-image:url('~/Content/Images/listIcon.png')" },null)

объясняется тем, что третий параметр @Html.ActionLink должен добавить дополнительные значения маршрута. Если вы хотите добавить дополнительные атрибуты HTML, вам необходимо использовать:

@Html.ActionLink("List View", "listView", null, new { @style = "background-image:url('~/Content/Images/listIcon.png')" })

Кроме того, как и другие, вы не можете использовать ~.

Обратите внимание, что встроенные стили обычно не одобряются, так как наилучшей практикой было бы создать класс CSS, содержащий фоновое изображение, и вместо этого добавить класс как атрибут HTML, но также будет работать здесь и @style. Подробнее о том, почему встроенные стили являются плохими, можно найти здесь: Что плохого в встроенном CSS?

Ответ 4

Попробуйте следующее:

Html.ActionLink(" ", "Edit", new {id = c.ID}, new { @style = "background:url('../../Images/Menu/edit.png') no-repeat center right; display:block; height: 30px; width: 50px" }