CSS и бритва - сделать всю сетку блокировать ActionLink

Question

Я не очень разбираюсь в 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 на a href="", но я хочу использовать бритву, чтобы я мог приписать параметры маршрутизации.

Как я могу сделать целый контейнер div выше @ Html.ActionLink?

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);
        }
    }
}

Это поможет с возможностью повторного использования