javascript - 如何在 asp mvc 2 中使用 css 添加图像？

Question

我想使用 css 类将可点击的图像添加到 asp mvc 2 应用程序中的锚标记，并将 url 部分留空（因为我有 JavaScript 代码来加载基于给定锚标记的 id 的弹出窗口）。

目前我的代码是：

<%= Html.ImageActionLink(null, null, "~/UI/Forms/Css/Images/get-reservation.png", null, new { @Id = "getReservation" }, new { @Class = "image" })%>

信息：我添加了 ID，因为我使用 javascript 在单击 getReservation id 时加载弹出窗口。图像类只是添加了填充。

当前的CSS代码：

.image
{
   padding-left: 10px;  
}

我想要的是：

从我的 ImageActionLink 助手中删除以下路径

“~/UI/Forms/Css/Images/get-reservation.png”

并定义一个 CSS 类：

.get-reservation
{
background: url('images/get-reservation.png') no-repeat center;
height: 20px;
width:20px;
}

并做这样的事情：

<%= Html.ActionLink("#", null, new { @Class = "get-reservation image" }, new { @Id = "getReservation" })%>

但是我在浏览器中得到的是这样的：（并且图像无法出现。）

在此处输入图像描述

预期结果：

在此处输入图像描述

任何帮助表示赞赏。

谢谢

score 1 · Accepted Answer

在这种情况下使用 ActionLink 是不必要的，只需使用常规图像或 div

<div class="get-reservation image" id="getReservation"></div>

您可以将其添加到样式中，使其更像链接：

border: none;
cursor: pointer; /* hand cursor */

最后，当您选择它以添加点击处理程序时，如果您使用$('a.get-reservation')更改为$('div.get-reservation')或只是$('.get-reservation')

score 1 · Accepted Answer

我认为你应该这样做：

<%= Html.ActionLink("", "#", null, new { @Id = "getReservation", @Class = "get-reservation image" })%>

请注意，第一个参数是要显示的文本，这就是您之前在屏幕上显示“#”的原因。第三个参数是一个空的RouteValues，第四个是附加的html属性。

希望对你有所帮助。干杯

2 回答 2