时间戳

首页 > 解决方案 > css 和 razor - 使整个网格阻止 ActionLink

css - css 和 razor - 使整个网格阻止 ActionLink

问题描述

我在 CSS 方面不是很有经验，但我对将样式与一些剃刀注入的链接结合使用感到困惑，而不是我所知道的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 HERE”

现在我倾向于将 更改div为 ana href=""但我想使用 razor 以便我可以归因于路由参数。

如何使整个div容器位于@Html.ActionLink 之上？

标签： cssasp.net-mvcrazorcss-grid

解决方案

我不认为 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);
        }
    }
}

这将有助于可重用性

推荐阅读