Làm cách nào để chèn hình ảnh bằng HTML.ActionLink?

Question

cách chèn hình ảnh vào html.actionlink - asp.net mvc?

tôi đã làm như vậy, nhưng nó không hoạt động.

<a href="<%= Html.ActionLink("search", "Search", new { searchText = "txtSearch" }, null); %>"> 
     <img alt="searchPage" style="vertical-align: middle;" height="17px" 
      src="../../Stylesheets/search.PNG" title="search" /> 

Answer 1

Bạn đang hoàn toàn lợi dụng ActionLink helper. Người trợ giúp thực sự tạo ra toàn bộ thẻ <a href=".." ></a>.

gì bạn thực sự muốn sử dụng trong trường hợp này (ngoài helper riêng bằng văn bản của bạn) là thế này:

<a href="<%= Url.Action("Search", new { searchText = "txtSearch" }) %>"> 
    <img alt="searchPage" style="vertical-align: middle;" height="17px" 
     src="../../Stylesheets/search.PNG" title="search" /> 
</a> 

Answer 2

tôi đã tạo ra một helper cho giải pháp này. Vì vậy, bạn không thể đưa hình ảnh vào actionLink. Nhưng với lớp helper này bạn có thể chỉ cần thêm anchor với hình ảnh để xem.

sử dụng Hệ thống; bằng System.Text; bằng System.Web.Mvc; bằng System.Web.Mvc.Html; sử dụng System.Web.Routing; sử dụng System.Web; bằng System.Security.Policy;

namespace Helpers 
{ 
    public static class ActionWithImageHelper 
    { 
     public static string AnchorIm(this HtmlHelper helper) 
     { 

      var builder = new TagBuilder("img"); 
      var link = helper.ActionLink("[replaceInnerHTML]", "replaceAction").ToHtmlString(); 


       builder.MergeAttribute("src", "<imagePath>"); 
       builder.MergeAttribute("alt", "<altText>"); 

       var renderedLink = link.Replace("replaceAction", "<>"); 
       link = renderedLink; 


      return link.Replace("[replaceInnerHTML]",builder.ToString(TagRenderMode.SelfClosing)); 
     } 

    } 
} 

may mắn

Answer 3

@Trimack là chính xác 100% w/MVC2. Nếu mọi người đang tìm kiếm các MVC3 tương đương, ở đây nó là ...

<a href="@Url.Action("Search", new { searchText = "txtSearch" })"> 
    <img alt="searchPage" style="vertical-align: middle;" height="17px" src="../../Stylesheets/search.PNG" title="search" /> 
</a> 

Answer 4

Nếu bạn muốn hiển thị hình ảnh đa bạn có thể sử dụng bất động sản trong Html.ActionLinkView của bạn như hình dưới đây. Trong ví dụ này, tôi sử dụng Detail/Edit/Delete images dưới dạng nút Action.

Lưu ý: Loại Title, Controller và Action tên trong Html.ActionLink theo dự án của bạn. Nếu bạn muốn sử dụng tiêu đề trống, chỉ cần nhập "" cho chúng.

.... 
//for using multiple Html.ActionLink in a column using Webgrid 
grid.Column("Action", format: (item) => 
new HtmlString(
     Html.ActionLink("Show Details", "Edit", "Admin", new 
     { 
      applicantId = item.ApplicantID,    
      title = "Detail", 
      @class = "icon-link", 
      style = "background-image: url('../../Content/icons/detail.png')" 
     }, null).ToString() + 
     Html.ActionLink("Edit Record", "Edit", "Admin", new 
     { 
      applicantId = item.ApplicantID, 
      title = "Edit", 
      @class = "icon-link", 
      style = "background-image: url('../../Content/icons/edit.png')" 
     }, null).ToString() + 
     Html.ActionLink("Delete Record", "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> 

Ví dụ đầy đủ, bạn có thể nhìn vào đây: How to use WebGrid in a cshtml view?

trọng.

Answer 5

Thay vì sử dụng @ Html.ActionLink ("linkname", "hành động", "điều khiển"), bạn có thể sử dụng như sau:

<a href='@Url.Action("action", "controller")'> 

"hình ảnh" là thư mục của tôi để lưu trữ các hình ảnh. @Url.Content() là biết đường dẫn. Bạn có thể vượt qua hành động của bạn và bộ điều khiển cho hành động đó đến @Url.Action(). @Url.Action() hoạt động tương tự như @Html.ActionLink(). Bây giờ liên kết của bạn sẽ được thay thế bằng hình ảnh.