CODEWITHSUNDEEP
jqueryhtmlcssasp.net-mvc-4
Julien698
Julien698

Reputation: 716

Why button tags disable my actionlink?

I try to use css for my actionlinks, in the aim to they look like a simple button.

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

it works perfectly if i don't add css with the button tags.

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

In this case you can click on the button, but the page doesn't reload and you don't go to the page "Delete"

In don't understand why it doesn't work.

I also use JQuery to change data into the 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);
        });

Have you an idea ?

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

this works good but how to put the glyphicon into the button ?

finnaly i use this :

 @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

this link and your answers help me a lot thanks !

Upvotes: 0

Views: 462

Answers (3)

Aravindan
Aravindan

Reputation: 855

Please use the below code instead of using button.

If you need to set the Icon then you have to use the View code as like below

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

If you don't need icon means just use the below code

I have added the class as "btn btn-default btn-xs" in the htmlattribute. Please try this one.

@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" })

This will helps you to show the action link as button in your view

Upvotes: 2

RickJames
RickJames

Reputation: 1755

glyphicon [email protected] creates the button markup for you, so what you are doing there is wrapping a link in a button. If you want the actionlink to look like a button just add a style to it.

For an icon do this:

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

Upvotes: 2

Quentin
Quentin

Reputation: 943185

HTML forbids buttons from containing interactive content (i.e. other buttons and links).

The button is being disabled by the browser in an attempt to recover from your error.

Write valid HTML and test it with a validator.

Upvotes: 0

Related Questions