CODEWITHSUNDEEP
c#asp.netasp.net-mvcrazorhtml-helper
James Wilson
James Wilson

Reputation: 5150

Html template conversion to asp.net/razor

The template we are using has the structure set up like this.

<li><a href="dashboard.html"><span class="iconfa-laptop"></span>Dashboard</a></li>

Razor lets us use @Html helpers.

<li>@Html.ActionLink("Home", "Index", "Home")</li>

The above adds an icon to the left of the link text. Is there a way to duplicate this structure using Html helpers?

Or is the only way to type out the html manually?

Upvotes: 0

Views: 599

Answers (2)

George Johnston
George Johnston

Reputation: 32278

As an alternative solution, you could also accomplish what you want easily via CSS without needing to worry about extending functionality of the HtmlHelper. Plus, it cuts down on your markup as well, e.g.

.iconfa-laptop {
   display:inline-block;
   padding-left: 18px;
   line-height:18px;
   background: url('your-image')  center left no-repeat;
}

<a class="iconfa-laptop" href="dashboard.html">Test Link</a>

Then, you can simply do the following:

<li>@Html.ActionLink("Home", "Index", "Home", null, new {@class = "iconfa-laptop"})</li>

CSSPad Example

Upvotes: 1

PSL
PSL

Reputation: 123739

Try this way using Url.Action instead of Actionlink

<li><a href="@Url.Action("Index", "Home")"><span class="iconfa-laptop"></span>Dashboard</a></li>

All you need is to generate the path, so this will do it. Otherwise you will have to create a helper extension for ActionLink to take an innerHTML content.

Upvotes: 3

Related Questions