Question

我尝试将css用于我的actionlinks，目的是让它们看起来像一个简单的按钮。

@Html.ActionLink("Ajouter une thématique", "AddThematic", new { ParentId = "var1", ParentName = "var2", IsAdult = "var3" }, new { @id = "AddThematic", @style="color:black" })

如果我不使用按钮标签添加css，它的效果非常好。

   <button type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-plus"></span>
      @Html.ActionLink("Ajouter une thématique", "AddThematic", new { ParentId = "var1", ParentName = "var2", IsAdult = "var3" }, new { @id = "AddThematic", @style="color:black" })
   </button>

在这种情况下，您可以单击按钮，但页面不会重新加载，您也不会转到“删除”页面

在不明白为什么它不起作用。

我还使用JQuery将数据更改为ActionLink：

        $('#AddThematic').click(function () {
            var ParentId = $('#ParentThematic').val();
            var ParentName = $('#ParentThematic option:selected').text();
            var IsAdult = $('#ChkIsAdult').is(':checked').toString();
            this.href = this.href.replace("var1", ParentId);
            this.href = this.href.replace("var2", ParentName);
            this.href = this.href.replace("var3", IsAdult);
        });

有你的想法吗？

<span class="glyphicon glyphicon-plus"></span>
@Html.ActionLink("Ajouter une thématique", "AddThematic", new { ParentId = "var1", ParentName = "var2", IsAdult = "var3" }, new { @id = "AddThematic", @Class="btn btn-default btn-xs" })

这很好但是如何将glyphicon放入按钮？

finnaly我用这个：

 @Html.ActionLink("Ajouter une thématique", "AddThematic", new { ParentId = "var1", ParentName = "var2", IsAdult = "var3" }, new { @id = "AddThematic", @Class="glyphicon glyphicon-plus btn btn-default btn-xs" })

How to apply two CSS classes to a single div/span

此链接和您的回答非常感谢！

Answer 1

glyphicon glyphicon-plus@Html.ActionLink为您创建按钮标记，因此您在此处执行的操作是在按钮中包含链接。如果你想让actionlink看起来像一个按钮，只需添加一个样式。

对于图标，请执行以下操作：

<a class="btn" href="@Url.Action("AddThematic", new {id = Model.CodeTemplateId})" id="A3" title="Help"><i class="glyphicon glyphicon-plus"></i></a>

Answer 2

请使用以下代码而不是使用按钮。

如果您需要设置图标，则必须使用查看代码如下所示

  <button id="btn" type="button" class="btn btn-default btn-xs" location="@Url.Action("AddThematic", new { ParentId = "var1", ParentName = "var2", IsAdult = "var3" })">
  <span class="glyphicon glyphicon-plus"></span>
  Ajouter une thématique
  </button>

<强>的javascript

 $('#btn').click(function () {
          var loc = $(this).attr('location');
    if (loc != null) {
        window.location = loc;
    }
    });

如果您不需要图标，则只需使用以下代码

我已将该类添加为＆＃34; btn btn-default btn-xs＆＃34;在htmlattribute中。请试试这个。

@Html.ActionLink("Ajouter une thématique", "AddThematic", new { ParentId = "var1", ParentName = "var2", IsAdult = "var3" }, new { @id = "AddThematic", @style="color:black", @class="btn btn-default btn-xs" })

这有助于您在视图中将操作链接显示为按钮

Answer 3

HTML禁止按钮包含交互式内容（即其他按钮和链接）。

浏览器正在禁用该按钮以尝试从您的错误中恢复。

编写有效的HTML和test it with a validator。

为什么按钮标签禁用我的actionlink？

3 个答案: