Html template conversion to asp.net/razor

Question

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?

I am guessing you can't do this? <li><span class="iconfa-laptop"></span>@Html.ActionLink("Home", "Index", "Home")</li> — Mike Hewitt
– Mike Hewitt, Commented May 24, 2013 at 17:19
@MikeHewitt sadly I cannot, I tried it and it distorted the icon and placed it far to the left. So I'm guessing the css structure expects it in the above way. — James Wilson
– James Wilson, Commented May 24, 2013 at 17:21

PSL · Accepted Answer · 2013-05-24 17:21:57Z

3

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.

answered May 24, 2013 at 17:21

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

George Johnston · Accepted Answer · 2013-05-24 17:40:02Z

1

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

answered May 24, 2013 at 17:40

George Johnston

32.3k29 gold badges130 silver badges177 bronze badges

2 Comments

James Wilson Over a year ago

I'm sure this method would work, but the template CSS file is extremely confusing .iconfa-laptop:before{content:"\f109"} I'm not even sure how this works. There is no image called f109 but it does point to some font awesome thing.

James Wilson Over a year ago

Thanks George that will help me understand better how that portion of this template does what it does. I may even get brave enough to alter it so I can take full advantage of the Html helpers in razor. Thanks for the extra time. :)

Collectives™ on Stack Overflow

Html template conversion to asp.net/razor

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related