css 和 razor - 使整个网格 block ActionLink

Question

我在 CSS 方面经验不足，但我对将样式与一些 Razor 注入(inject)的链接结合使用感到困惑，这与我所了解的a href=""

我有一堆这种格式的重复网格部分:

<div class="grid-item bkg-smokey service1">
    @Html.ActionLink(@asp_net_mvc_site.Resources.Common.LinkHome, "x", "CLICK-HERE", null, null)
    <div class="my-circle">
        <div class="fas fa-code my-circle-inner"></div>
    </div>
    <p>Some text here</p>
</div>

它们在父级中使用网格符号排列，包含 div 类，例如

index-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "service1 service2 service3 service4 service5"
}

我想让整个网格框 service1 成为链接，这样当用户将鼠标悬停在 service1 div 上时，他们可以点击它的任何地方，而不仅仅是当前文本行“CLICK这里”

现在我倾向于将 div 更改为 a href="" 但我想使用 razor 以便我可以为路由参数添加属性。

如何在 @Html.ActionLink 之上创建整个 div 容器？

Answer 1

我认为 Html.ActionLink 不能满足您的需求。

听起来您需要定制 Html Helper这将有助于可重用性。

using System;
namespace Application.Helpers
{
    public class BlockHelper
    {
        public static string Block(string target, string someText)
        {
            return String.Format("<a href='{0}'><div class='my-circle'><div class='fas fa-code my-circle-inner'></div></div><p>{1}</p></a>", target, someText);
        }
    }
}

这将有助于重用