带有Twitter Bootstrap的ActionLink上的图像

时间:2014-01-26 03:48:18

标签: css asp.net-mvc twitter-bootstrap

我现在有一个按钮,在我的MVC应用程序中呈现为:

@Html.ActionLink("Delete", "DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, new { @class = "btn btn-danger", @onclick = "return confirm('Are you sure you want to delete this Transfer?')" })

我想使用Twitter Bootstrap类添加图标。但是,为此,代码看起来像这样:

<button class="btn btn-danger"><i class="icon-white icon-trash"></i> Delete</button>

如何在ActionLink中应用此功能?它有一个嵌入按钮的图像(i)。

2 个答案:

答案 0 :(得分:0)

尝试:

      <a class="btn btn-danger" 
           href="@Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) })"   
           onclick = "return confirm('Are you sure you want to delete this Transfer?');"
           >
          <i class="icon-white icon-trash">Delete</i>
      </a>

根据您的路线,您可能需要:

@Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, null)

答案 1 :(得分:-1)

根据引导程序文档(http://getbootstrap.com/components/#glyphicons-examples),可能需要使用glyphicons。以下是在按钮上放置图标的示例:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

由于ActionLink()是一个返回“a”元素的htmlHelper扩展名,即<a>...</a>,我认为需要覆盖扩展名。

我尝试了以下操作,但结果是glyphicon位于“a”元素之上:

<span class="glyphicon glyphicon-star"></span>@Html.ActionLink("Delete", "DeleteTransfer")

我还尝试将ActionLink()放在<span></span>内,但结果相同。我尝试使用text-wrap: none;white-space: nowrap;的css,但这也不起作用。

所以我认为答案是需要覆盖扩展以接受glyphicon的另一个参数。除非,有人可以表现出让它停止包装的技巧。