asp.net-mvc-4 - 在 webgrid 中添加链接按钮

Question

我想在 mvc webgrid 中添加一个链接按钮，它应该调用一个 javascript 方法。

我现在正在使用：

hiddenDiv.Column("",style: "col1",format: @<text>
<button class="edit-book display-mode" id="@item.FacilityID">
    Select</button>
</text>)

调用：

$('.edit-book').on('click', function () {
        $('#hiddendiv2').show();
        $('#facilitygrid').hide();
        var bookId = $(this).prop('id');
        alert(bookId);
    });

但不是 Button 我想放一个链接按钮。

Answer 1

由于我们在 mvc 中没有链接按钮，因此您可以@Html.ActionLink通过覆盖 Action Link 的默认行为来实现。

hiddenDiv.Column("",style: "col1",format: @<text>
    @Html.ActionLink("Home","Index",null, new { @class="ImgAddition", @onclick="SomeScript(this);"})
</text>)

为了显示图像而不是链接，您应该添加以下 css

.ImgAddition{
     background: url(../Images/image.gif) no-repeat top left;/* add image*/
     display: block;
     width: 100px;
     height: 100px;
     text-indent: -9999px; /* hides the link text */

}

最后是你的脚本：

$('.ImgAddition').on('click', function (e) {
        e.preventDefault();
        $('#hiddendiv2').show();
        $('#facilitygrid').hide();
        var bookId = $(this).prop('id');
        alert(bookId);
    });

希望能帮助到你。