Thêm hình ảnh trong Html.ActionLink

Question

Tôi đã cố gắng để tạo ra một tùy chọn để chuyển đổi giữa một cái nhìn danh sách và xem phụ tùng trong ASP.net MVC (với công cụ xem dao cạo).

Tuy nhiên, tôi đang gặp một số rắc rối cố gắng để cả hai thêm hình ảnh, cũng như quy mô nó vào 'đúng chiều cao' (chiều cao giống như tiếp theo bên cạnh).

tôi đang tìm kiếm để tạo ra một cái gì đó như: Kết quả

mong muốn:

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

[≡­] List View | [+] Widget View 

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

nơi [≡] và [+] đã thực sự hình ảnh biểu tượng nhỏ.

Những nỗ lực cho đến nay bao gồm:

Các liên kết hành động là một cái gì đó như:

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

mà chỉ hiển thị văn bản.

Tôi cũng đã cố gắng tạo ra ActionLink như:

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

nhưng điều này giải quyết trong

a) hình ảnh không phải là một phần của liên kết; và

b) hình ảnh là gần gấp đôi kích thước của văn bản (tương tự như sơ đồ dưới đây)

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

tôi sẽ không còn phiền cố gắng để tạo ra nó thích:

Alternative:

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

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

nếu tôi có.

Có ai biết/tư vấn cách giải quyết/tạo điều này không?

Answer 1

Bạn có thể sử dụng Url.Action cho siêu liên kết và Url.Content cho nguồn hình ảnh.

Sau đó, bạn có thể tạo kiểu cho giao diện bằng 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> 

Answer 2

Lý do mã này đã không làm việc:

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

là vì tham số thứ 3 của @ Html.ActionLink là để thêm giá trị tuyến đường bổ sung. Nếu bạn muốn thêm các thuộc tính HTML khác, bạn cần phải sử dụng:

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

Ngoài ra, như những người khác đã nói, bạn không thể sử dụng ~.

Lưu ý rằng kiểu nội tuyến thường không được chấp nhận, vì cách tốt nhất là tạo lớp CSS chứa hình nền của bạn và thêm lớp làm thuộc tính HTML thay vào đó, nhưng @style cũng sẽ hoạt động ở đây. Thông tin thêm về việc tại sao phong cách nội tuyến là xấu có thể được tìm thấy ở đây: What's so bad about in-line CSS?

Answer 3

Bạn cần phải tạo neo bằng tay, và insted của việc sử dụng các @Html.ActinLink helper ... bạn có thể sử dụng @Url.Action helper

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

Kích thước của hình ảnh có thể được sửa đổi thông qua CSS.

Url.Action cung cấp cho bạn "liên kết đến hành động của bạn". ActionLink, tạo một liên kết có liên kết đến hành động.

Answer 4

Hãy thử điều này:

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" }