Build an ActionLink with an image inside (bootstrap)

Question

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>

score 1 · Answer 1 · answered Aug 04 '15 at 11:15

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

I want use my ***png image*** – Kiquenet Nov 21 '18 at 08:47 — Kiquenet, Nov 21 '18 at 08:47

score 0 · Accepted Answer · answered Aug 03 '15 at 20:04

0

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>

answered Aug 03 '15 at 20:04

Chris Pratt

232,153
36
385
444

I know.. But using an helper, I can build my page just using: @Html.NewButton() – Beetlejuice Aug 03 '15 at 20:06
So alter your helper to build a string, using `StringBuilder` and/or `TagBuilder`, and then just return it wrapped in `MvcHtmlString`: `return new MvcHtmlString(builder.ToString());` – Chris Pratt Aug 03 '15 at 20:10
It is possible to do this without passing the "Url" variable to my helper ? – Beetlejuice Aug 03 '15 at 20:34
Yes, you'll just need to use the `RequestContext` object from `HtmlHelper` to to instantiate an instance of `UrlHelper`. See: http://stackoverflow.com/questions/1443647/generate-url-in-html-helper – Chris Pratt Aug 04 '15 at 13:44
I want use my ***png image*** – Kiquenet Nov 21 '18 at 08:47

Build an ActionLink with an image inside (bootstrap)

2 Answers2