Question

我现在有一个按钮，在我的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）。

Answer 1

尝试：

      <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)

Answer 2

根据引导程序文档（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的另一个参数。除非，有人可以表现出让它停止包装的技巧。

带有Twitter Bootstrap的ActionLink上的图像

2 个答案: