Отображение нескольких ссылок на изображения вместо текста в WebGrid?

У меня есть определение WebGrid и три ссылки в одном столбце с помощью Html.ActionLink. Но когда я не использую свойство «LinkText», свойство applicantId передается контроллеру как значение null.

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

Я думаю, что может быть опечатка или есть другие способы, подходящие для MVC4 Razor, такие как @Url.Action и т. д. Вот мой код в Razor View.

Не могли бы вы мне помочь, пожалуйста?

Заранее спасибо.

Просмотр:

//for using multiple Html.ActionLink in a column using Webgrid
grid.Column("Operations", format: (item) =>
 new HtmlString(
       Html.ActionLink("My Link Text", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,               
           title = "Detail",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/detail.png')"
       }, null).ToString() +
       Html.ActionLink(" ", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID, 
           title = "Edit",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/edit.png')"
       }, null).ToString() +
       Html.ActionLink(" ", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,
           title = "Delete",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/delete.png')"
       }, null).ToString()
 )
)



<style type="text/css">
    a.icon-link {
        background-color: transparent; 
        background-repeat: no-repeat; 
        background-position: 0px 0px;
        border: none;
        cursor: pointer; 
        width: 16px;
        height: 16px;
        margin-right: 8px; 
        vertical-align: middle;
    }
</style>

person Jack    schedule 03.11.2013    source источник
comment
Используете ли вы одно и то же действие редактирования для функций отображения, редактирования и удаления или вы просто забыли изменить имя действия в своих Html.ActionLinks?   -  person ataravati    schedule 03.11.2013
comment
Кроме того, похоже, вы не правильно объяснили проблему. Идентификатор равен нулю, когда вы не используете текст ссылки или когда вы его используете?   -  person ataravati    schedule 03.11.2013
comment
Когда я не использую текст ссылки, свойство заявителя Id возвращает нулевое значение. Я просто хочу использовать три ссылки на изображения (без текста) вместо текстовой ссылки внутри HtmlString() в одной колонке выше. Спасибо.   -  person Jack    schedule 03.11.2013
comment
Ответ, представленный ниже, хорош, но вам не нужно этого делать. Вы можете просто назначить классы css своим ссылкам и добавить к ним фоновые изображения в своей таблице стилей.   -  person ataravati    schedule 04.11.2013
comment
Подобный метод уже был в вопросе, но, похоже, он не работает (по крайней мере, без свойства title здесь). Итак, насколько я вижу, для нескольких элементов в один столбец в WebGrid этот подход может понадобиться. Однако, если вы могли бы привести пример, как вы описали, и изменить приведенный выше код в соответствии с вашим примером, возможно, @H.Johnson применит его и сообщите нам, работает ли он правильно.   -  person Murat Yıldız    schedule 05.11.2013
comment
@MuratYILDIZ, проверь мой ответ.   -  person ataravati    schedule 05.11.2013
comment
Спасибо за ответ. Я попробовал ваш ответ и увидел, что он не имеет никакого смысла в отношении результата. С другой стороны, что касается метода Delete, если [HttpPost] удален, он должен работать. @H.Johnson: Не могли бы вы также проверить ответ и этот выбор?   -  person Murat Yıldız    schedule 06.11.2013
comment
@MuratYILDIZ: Да, удалив [HttpPost], поле id можно передать без проблем, и я думаю, что могу использовать такой метод Delete. Спасибо.   -  person Jack    schedule 06.11.2013


Ответы (2)


Вы можете использовать пользовательский метод HTML Helper, чтобы легко его использовать. Сделать это:

1) Создайте папку с именем HtmlHelpers и создайте класс с именем MyHelpers в этой папке. Затем определите свой класс, как показано ниже (вы можете улучшить его, добавив некоторые дополнительные свойства).

MyHelpers.cs:

using System;
using System.Web.Mvc;

namespace <YourProjectName>.WebUI.HtmlHelpers
{
    public static class MyHelpers
    {            
        public static MvcHtmlString ImageLink(this HtmlHelper html, string imagePath, string alt, string cssClass,
           string action, string controllerName)
        {
            return ActionImage(html, imagePath, alt, cssClass, action, controllerName, null);
        }

        public static MvcHtmlString ImageLink(this HtmlHelper html, string imagePath, string alt, string cssClass,
           string action, string controllerName, object routeValues)
        {
            var currentUrl = new UrlHelper(html.ViewContext.RequestContext);
            var imgTagBuilder = new TagBuilder("img"); // build the <img> tag
            imgTagBuilder.MergeAttribute("src", currentUrl.Content(imagePath));
            imgTagBuilder.MergeAttribute("title", alt);
            imgTagBuilder.MergeAttribute("class", cssClass);
            string imgHtml = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
            var anchorTagBuilder = new TagBuilder("a"); // build the <a> tag
            anchorTagBuilder.MergeAttribute("href", currentUrl.Action(action, controllerName, routeValues));
            anchorTagBuilder.InnerHtml = imgHtml; // include the <img> tag inside
            string anchorHtml = anchorTagBuilder.ToString(TagRenderMode.Normal);
            return MvcHtmlString.Create(anchorHtml);
        }
    }
}

2) Перестройте свой проект, а затем добавьте эту строку в Razor View:

@using <YourProjectName>.WebUI.HtmlHelpers

3) Затем используйте этот метод Html Helper в своем представлении следующим образом:

@Html.ImageLink("../../Content/icons/delete.png", "Delete", "your-class", "Delete", "Admin", new { item.ApplicantID })

Точно так же, если вы хотите использовать ссылку с несколькими изображениями в одном столбце, вы можете объединить строки html следующим образом:

Просмотр:

....
grid.Column("Operations", style: "your-class", format: (item) =>
 new HtmlString(
      @Html.ActionImage("../../Content/icons/detail.png", "Detail", "your-class", "Detail", "Admin", new { item.ApplicantID }).ToString() +
      @Html.ActionImage("../../Content/icons/edit.png", "Edit", "your-class", "Edit", "Admin", new { item.ApplicantID }).ToString() +
      @Html.ActionImage("../../Content/icons/delete.png", "Delete", "your-class", "Delete", "Admin", new { item.ApplicantID }).ToString()

 )
)
...

Надеюсь это поможет. С Уважением...

person Murat Yıldız    schedule 03.11.2013
comment
Большое спасибо за это прекрасное объяснение. Я мог бы легко поместить ссылку на изображение в один столбец в своей WebGrid. С Уважением. - person Jack; 04.11.2013

Ваши ссылки действий вызываются неправильно. Вы добавляете атрибуты Html к своим значениям маршрута. Ваши ссылки действий должны выглядеть так:

   Html.ActionLink("My Link Text", "Detail", "Admin", new
   {
       applicantId = item.ApplicantID              
   }, new 
   {            
       title = "Detail",
       @class = "icon-link"
   })

Проверьте эту ссылку, чтобы увидеть, как вы можете скрыть текст ссылки и вместо этого отобразить изображение с помощью css: CSS скрыть текст, но показать изображение?

person ataravati    schedule 05.11.2013