C# Html模板转换为asp.net/razor

我们正在使用的模板的结构设置如下

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

Razor允许我们使用@Html助手

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

@Html.ActionLink（“主页”、“索引”、“主页”）

上面在链接文本的左侧添加了一个图标。有没有办法使用Html助手复制此结构

---

还是手动键入html的唯一方法？

尝试使用

Url.Action

而不是

Actionlink

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

---

您只需要生成路径，这样就可以了。否则，您必须为

ActionLink

创建一个帮助程序扩展以获取innerHTML内容。

尝试使用

Url.Action

而不是

ActionLink

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

---

您只需要生成路径，这样就可以了。否则，您将不得不为

ActionLink

创建一个助手扩展来获取innerHTML内容。

作为替代解决方案，您还可以通过CSS轻松完成您想要的内容，而无需担心扩展HtmlHelper的功能。此外，它还减少了您的标记，例如

.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>

.iconfa笔记本电脑{
显示：内联块；
左侧填充：18px；
线高：18px；
背景：url（'your-image'）中间偏左不重复；
}

然后，您可以简单地执行以下操作：

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

@Html.ActionLink（“Home”、“Index”、“Home”、null，新的{@class=“iconfa laptop”}）

---

作为替代解决方案，您还可以通过CSS轻松完成您想要的内容，而无需担心扩展HtmlHelper的功能。此外，它还减少了您的标记，例如

.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>

.iconfa笔记本电脑{
显示：内联块；
左侧填充：18px；
线高：18px；
背景：url（'your-image'）中间偏左不重复；
}

然后，您可以简单地执行以下操作：

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

@Html.ActionLink（“Home”、“Index”、“Home”、null，新的{@class=“iconfa laptop”}）

---

我猜你不能这么做

@Html.ActionLink（“Home”、“Index”、“Home”）

@MikeHewitt很遗憾我不能，我试过了，它扭曲了图标并将其放在了最左边。所以我猜css结构期望它以上述方式出现。@MikeHewitt

必须在

中，我猜你不能这样做

@Html.ActionLink（“Home”、“Index”、“Home”）

@MikeHewitt很遗憾我不能，我试过了，它扭曲了图标并将其放在了最左边。所以我猜css结构应该是这样的。@MikeHewitt

必须在

中，我确信这个方法会起作用，但是模板css文件非常混乱

。iconfa笔记本电脑：在{content:'\f109“}

之前，我甚至不确定它是如何工作的。没有名为

f109

的图像，但它确实指向一些字体很棒的东西。感谢George，这将帮助我更好地理解此模板的这一部分是如何工作的。我甚至可以勇敢地修改它，这样我就可以充分利用razor中的Html助手。谢谢你给我额外的时间。：）我确信这个方法会起作用，但是模板CSS文件非常混乱。

。iconfa laptop:before{content:“\f109”}

我甚至不确定它是如何工作的。没有名为

f109

的图像，但它确实指向一些字体很棒的东西。感谢George，这将帮助我更好地理解此模板的这一部分是如何工作的。我甚至可以勇敢地修改它，这样我就可以充分利用razor中的Html助手。谢谢你给我额外的时间。：）