How to place and style a span tag within an ActionLink styled as a button?

Question

Currently, I have the following code for a button with some text and a model variable inside a <span> tag:

   <button class="cart-icon fr btn btn-info" type="button">
           Cart <span class="badge cart-count">@Model.CartCount</span>
    </button>

I want to be able to link this button to the Index action of the ShoppingCart controller.

It should look like something like this, but I'm not completely sure on how to access the span tag with the html helper:

@Html.ActionLink("Cart", "Index", "ShoppingCart", new { @Model.CartCount}, new { @class = "cart-icon fr btn btn-info"})

I want to ensure I have the inside the button which holds the Model attribute of CartCount.

You cannot, at least using `@Html.ActionLink()` - which only generates a `` tag with text content. You can however use `@Url.Action()` to generate the url part. e.g. `Cart....` — , Mar 03 '17 at 11:35
or write custom helper if it is needed at multiple places in project — Ehsan Sajjad, Mar 03 '17 at 11:44
have a look here for example image link : https://stackoverflow.com/questions/23535704/image-button-in-actionlink-mvc/23537462#23537462 — Ehsan Sajjad, Mar 03 '17 at 11:44

score 1 · Answer 1 · answered Mar 03 '17 at 11:41

1

    <button class="cart-icon fr btn btn-info" type="button"        
onclick="location.href='<%: Url.Action("Action", "Controller") %>'">
       Cart <span class="badge cart-count">@Model.CartCount</span>
       </button>

answered Mar 03 '17 at 11:41

maximelian1986

2,308
1
18
32

score 0 · Accepted Answer · answered Mar 03 '17 at 13:10

0

This solve it:

    <a href="@Url.Action("Index", "ShoppingCart", "")" class="cart-icon fr btn btn-info" type="button">
          Cart <span class="badge cart-count">@Model.CartCount</span>
    </a>

answered Mar 03 '17 at 13:10

naz786

485
1
5
22

How to place and style a span tag within an ActionLink styled as a button?

2 Answers2