Html.Actionlink as Button effect

Question

I am trying to make look @Html.Actionlink as button.

Working Html.Actionlink:

 <li class="btn btn-sm"> @Html.ActionLink("Redeem Reward", "GetReward",
 "Home", new { id = price.PriceId }, new { @class = "lnkGetReward"})</li>

Currently when I click it looks like as if a link is clicked, apart from the text if we click the button border it doesn't work.

I am also using font awesome classes.

Can I use @Url.Action instead with same id and @class?

Answer 1

Instead of having your button classes on the li apply them directly to the link.

As you are using bootstrap you might want to add btn-default to get the full style of the button.

<li>
    @Html.ActionLink("Redeem Reward", "GetReward", "Home", 
    new { id = price.PriceId }, 
    new { @class = "lnkGetReward btn btn-default btn-sm"})
</li>

However if you are 100% sure you want to use Url.Action your code would look like the following.

<li class="btn btn-sm">
    <a href="@Url.Action("GetReward", "Home", new { id = price.PriceId })" class="lnkGetReward">Redeem Reward</a>
</li>

Again I would suggest that you apply the btn btn-sm directly to the link. Possibly with a btn-default.

Edit based on comment:

<li>
    <a href="@Url.Action("GetReward", "Home", new { id = price.PriceId })" class="lnkGetReward btn btn-default btn-sm">
        <i class="fa fa-mobile"></i> Redeem Reward
    </a>
</li>