Нелогично работают теги в Razor?

Question

[Dymok]

Cразу извиняюсь, если вопрос задан неверно или ошибка очень проста, с шаблонами asp.net сталкиваюсь впервые.
Нужно поправить шаблон для вывода карточек, заменив div.catalog-item на a.catalog-item, т.е. просто поменять самый верхний divна a. Меняю, но после этого на странице выводится html, в котором тег a закрывается сразу после открывающего тега.

Отрендеренный html

Код шаблона

<a class="catalog-item" style="background: url(@N.Quest.Image.Split('|')[0]) no-repeat;background-size: cover;    background-position: center center;" id="@Html.Raw("Q" + N.Quest.Id)">
                <div class="item-content">1
                    <h4><a href="/Quest/@N.Quest.Url"><span>@N.Quest.Title</span></a></h4>
                    <div class="raiting-quest">
                        @if (N.Rait == "0")
                        { @Html.Raw("?") }
                        else
                        { @Html.Raw(N.Rait) }
                    </div>
                    <div class="intricacy middle">
                        <span>
                            @switch (N.Quest.Difficult)
                            {
                                case 0:
                                    @Html.Raw("Легкий")
                                    break;
                                case 1:
                                    @Html.Raw("Средний")
                                    break;
                                case 2:
                                    @Html.Raw("Сложный")
                                    break;
                            }
                        </span>
                    </div>
                    <div class="bottom-text">
                        <p>@N.Quest.Summary</p>
                        <ul>
                            <li><span class="price">от @(N.Quest.ValueMin)</span></li>
                            <li><span class="metro" alt="@N.Quest.City, @N.Quest.Adress"><a class="abl" href="/search/[e-mail](x => x.Value == N.Quest.City)[e-mail](x => x.Value == N.Quest.Region).Key">@N.Quest.Region</a></span></li>
                        </ul>
                    </div>
                </div>
            </a>

В чем проблема, что не так?
Заранее спасибо

Answer 1

[Толстый Лорри]

Дело не в razor, а в том, что вы заведомо пишите невалидную разметку. Как должен браузер обрабатывать клик по внутренней ссылке? Игнорировать ее или внешнюю? Он, вероятно, что-то все же сделает, но не факт то, что вы ожидаете. А парсер разметки в Razor считает, что лучше вот так интерпретировать.

Судя по тому, что на внешней ссылке (catalog-item) нет аттрибута "href" (он обязателен), вам она нужна лишь для руки-указателя. Того же эффекта можно добиться с div:
.catalog-item:hover { cursor: pointer; }

Comments

[Dymok]

мне нужно, чтобы при клике по пустому месту карточки открывалась ссылка(пытался с JS, получается так себе, хотел попытаться таким способом), указанная в самом верхнем контейнере, а при нажатии на любую другую ссылку в карточке - ссылка, на которой был произведен клик. С указанным href также не работает.

[Толстый Лорри]

Dymok, это поведение неочевидно для пользователя: активные области по вашему замыслу должны соприкасаться буквально без разрывов.
Это конечно можно постараться сделать с помощью JS или уловками верстки (чтобы ссылки были рядом, без перекрытия), но, кмк, тут нужно еще раз обдумать UX.

Answer 2

[Александр Александрович]

Теги <a> не могут быть вложенными, а чуть ниже объявляется

a href="/Quest/@N.Quest.Url"

Comments

[Dymok]

То есть совсем никак это не сделать в razor?