MVC3 动作链接 - 触发 Jquery 的图像按钮答案

【问题标题】：MVC3 Action link - Image buttons that trigger JqueryMVC3 动作链接 - 触发 Jquery 的图像按钮
【发布时间】：2011-10-11 07:04:44
【问题描述】：

@Html.ActionLink("Apple", "ActionName", new { id = item.id }, new { @class = 

"cssClassandModalPopup" })

这给了我一个名为 Apple 的链接，onclick 会弹出一个 Jquery 模态对话框。我想将此链接文本更改为按钮（我拥有的 .png 文件）。我尝试了 url.action 并尝试在 css 中分配背景图像，但结果并不是 100% 令人满意。如果我使用 url.action，我将无法使用最后一个参数来弹出 Jquery 对话框。如果我使用操作链接并在 css 中分配背景图像，则“文本名称”字符串（上面的第一个参数）被覆盖，图像不会产生良好的结果。并且它不会将空值作为参数.. 有什么想法吗？

【问题讨论】：

标签： jquery css asp.net-mvc asp.net-mvc-3

【解决方案1】：

我可能会使用任意 CSS image replacement technique 和 URL.Action 的组合。

所以你的操作链接看起来像：

<a href="@Url.Action("ActionName", "ControllerName", new ( id = item.id }" id="appleImageLink" class="cssClassandModalPopup">
    <em></em>
    Apple
</a>

然后你的 css 类似于

a#appleImageLink {
    width: 350px; height: 75px;
    position: relative;
}

a#appleImageLink span {
    background: url("images/fruit/apple.jpg");
    position: absolute;
    width: 100%;
    height: 100%;
}

【讨论】：