CODEWITHSUNDEEP
asp.net-mvc
Beetlejuice
Beetlejuice

Reputation: 4425

Build an ActionLink with an image inside (bootstrap)

After some research, I could not find a good answer form my question.

I have a helper method to create an action link with a "+" sign and a label:

    public static HtmlString NewButton(this IHtmlHelper htmlHelper)
    {
        var htmlAttributes = new { @class = "btn btn-small btn-primary" };
        return htmlHelper.ActionLink("Insert", "Create", null, new RouteValueDictionary(), htmlAttributes);
    }

How can I include the "+" sign in a way that my final html looks like this?

<a href="/posts/new" class="btn btn-small btn-primary">
    <i class="ace-icon fa fa-plus"></i>
    Insert
</a>

In my page, I use my helper like this:

<div class="form-actions">
    @Html.NewButton()
</div>

Upvotes: 1

Views: 601

Answers (2)

Beetlejuice
Beetlejuice

Reputation: 4425

The only way I found was passing the "Url" object to my method, like this:

public static HtmlString NewButton(this IHtmlHelper htmlHelper, IUrlHelper url)
{
    var link = url.Action("Create");
    var el = string.Format("<a href = \"{0}\" class='btn btn-small btn-primary'><i class='ace-icon fa fa-plus'></i>Insert</a>", link);
    return new HtmlString(el);
}

In my view, I use it this way:

@Html.NewButton(Url)

I´m not using ActionLink at all

Upvotes: 1

Chris Pratt
Chris Pratt

Reputation: 239380

You can't, per se. However, nothing says you have to use Html.ActionLink. Simply, use Url.Action, instead, and then build your tag manually:

<a href="@Url.Action("Insert", "Create")" class="btn btn-small btn-primary">
    <i class="ace-icon fa fa-plus"></i>
    Insert
</a>

Upvotes: 0

Related Questions