在WebGrid中顯示多個圖像鏈接而不是文本？

我使用Html.ActionLink在一個列中有一個WebGrid定義和三個鏈接。但是，當我不使用「LinkText」屬性時，申請人Id屬性作爲null值傳遞給Controller。在WebGrid中顯示多個圖像鏈接而不是文本？

另一方面，當使用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>

來源

2013-11-03 Clint Eastwood

您是否使用了顯示相同的編輯操作，編輯和刪除功能，或者你忘記在你的'Html.ActionLink'中更改操作名稱？ – ataravati

另外，它似乎沒有正確解釋問題。當您不使用鏈接文本或使用鏈接文本時，id爲空？ – ataravati

當我不使用linktext時，applicantId屬性返回空值。我只是想在上面的一個coulumn中使用三個圖像鏈接（不帶文本）而不是HtmlString（）內的文本鏈接。謝謝。 –

你可以以輕鬆地使用它使用自定義的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）重建項目，然後這行添加到您的Razor視圖：

@using <YourProjectName>.WebUI.HtmlHelpers

3）然後在您查看使用HTML輔助方法像這樣：

@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() 

) 
) 
...

希望這有助於。問候...

來源

2013-11-03 20:32:03

非常感謝你爲這個美好的解釋。我可以很容易地將我的圖像鏈接放入我的WebGrid的一列中。問候。 –

您的操作鏈接沒有被正確調用。您正在將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?

來源

2013-11-05 19:12:07 ataravati

在WebGrid中顯示多個圖像鏈接而不是文本？

回答

相關問題