拥有一个没有文本的Ajax.ActionLink（显示为只有一个图标的jQuery按钮）

Question

我使用以下ajax ActionLink方法。

@Ajax.ActionLink(" ", "RemovePerson", "General", new { PersonId = item.PersonId }, new AjaxOptions { Confirm = "Are you sure?", HttpMethod = "Delete", OnSuccess = "JsonDelete_OnSuccess" }, new { @class = "PersonRemove" }) 

$().ready(function () {
    $(".PersonRemove").button({ icons: { primary: "ui-icon-trash"} });
})

结果显示如下：

如您所见，linkText参数为“”。我不希望我的按钮中有任何文字。只有一个图标。我没有找到任何其他没有文本的ajax ActionLink的解决方案，但我对它不是很满意。我需要一些建议。

是否有更好的解决方案而不是将此ActionLink与第一个参数设为“”？

我更喜欢这样的东西：

@Ajax.ActionLink(null, ....

但它不起作用。我收到错误“值不能为空或空”

感谢。

Answer 1

确实，那令人讨厌。您可以编写自定义MyActionLink帮助程序：

public static IHtmlString MyActionLink(
    this AjaxHelper ajaxHelper, 
    string actionName, 
    string controllerName, 
    object routeValues, 
    AjaxOptions ajaxOptions, 
    object htmlAttributes
)
{
    return ajaxHelper.ActionLink(
        " ", 
        actionName, 
        controllerName, 
        routeValues, 
        ajaxOptions, 
        htmlAttributes
    );
}

然后：

@Ajax.MyActionLink(
    "RemovePerson", 
    "General", 
    new { 
        PersonId = item.PersonId 
    }, 
    new AjaxOptions { 
        Confirm = "Are you sure?", 
        HttpMethod = "Delete", 
        OnSuccess = "JsonDelete_OnSuccess" 
    }, 
    new { @class = "PersonRemove" }
)

Answer 2

动作链接确实不允许空字符串作为文本参数。

快速修复，非常讨厌的imho，可能是在.button（）调用之后添加以下javascript：

$(".PersonRemove .ui-button-text").remove();

Answer 3

我更喜欢定义text-indent等于-9999px的样式。这隐藏了文字。例如：

a.settingsButton 
{
    position:absolute;
    width:95px;
    height:95px;
    background:url(images/settingsButton.png) 0 0 no-repeat;
    text-decoration: none; 
    top:20px;
    left:125px;
    text-indent: -9999px; /* hides the link text */
}