WebGrid에서 텍스트 대신 여러 이미지 링크 표시?

Question

Html.ActionLink을 사용하여 단일 열에 WebGrid 정의와 세 개의 링크가 있습니다. 그러나 "LinkText"속성을 사용하지 않으면 신청자의 속성이 null 값으로 컨트롤러에 전달됩니다.

한편, ""대신 LinkTexts를 사용하면 id 매개 변수를 성공적으로 전달할 수 있습니다 (아래 "내 링크 텍스트"로 유형). 그러나 링크에 텍스트를 표시하고 싶지 않고 Image 만 표시하려고했습니다.

타이핑 실수가 있거나 MVC4 면도날에 적합한 다른 방법이 @ Url.Action 등일 것입니다. 다음은 면도기 뷰에서의 코드입니다.

제발 도와 주실 수 있나요?

미리 감사드립니다.

보기 :

//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> 

Answer 1

쉽게 사용하기 위해 사용자 정의 HTML 도우미 메서드를 사용할 수 있습니다. 이렇게하려면 다음을 수행하십시오.

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) 프로젝트를 다시 빌드 한 다음 면도기보기에이 줄을 추가 :

@using <YourProjectName>.WebUI.HtmlHelpers 

3) 그런 다음보기에서이 HTML 도우미 메서드를 사용하여 like :

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

마찬가지로, mult 같은 열에서 나는 이미지 링크 당신이 그와 같은 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() 

) 
) 
... 

희망. 감사합니다 ...

Answer 2

귀하의 작업 링크가 올바르게 호출되지 않습니다. 경로 값에 Html 속성을 추가하고 있습니다. 액션 링크는 다음과 같이한다 :

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

확인이 링크는 링크 텍스트를 숨길 수있는 방법을보고, CSS를 사용하는 대신 이미지를 표시하려면 : CSS Hide Text But Show Image?