размещение div в якоре в asp.net MVC 3

Question

Работа с блочным элементом внутри встроенного элемента неприемлема для HTML, но у меня есть сценарий, в котором я должен сделать div кликабельным,

<div class="category-item" style="background-image:url('/Themes/DarkOrange/Content/images/@String.Format("{0}.png", item.Id)');">

                        <h2 class="title">
                            <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                                @item.Name</a>
                        </h2>
                        <div class="picture">
                            <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                                <img style="border-width: 0px;" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl"
                                    title="@item.PictureModel.Title" /></a>
                        </div>
                    </div>

Я хочу поместить вышеуказанный элемент категории div в тег якоря, по которому можно кликать:

<a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title"></a>

Исходное фоновое изображение div изменяется при передаче ему item.id, поэтому фоновое изображение отличается для каждого элемента категории. Основная цель состоит в том, чтобы сделать div интерактивным, чтобы перейти к предоставленному routeurl. Можно ли достичь чего-то подобного или есть какой-то другой способ достичь этого,

Любое предложение или помощь будут полезны.

Answer 1

Вы можете добавить обработчик кликов к вашим элементам.

Установить URL в атрибуте data:

<div class="category-item" 
     data-url="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })">
</div>

Затем укажите это в вашем обработчике кликов:

$(".category-item").click(function() 
{ 
    window.location = $(this).data("url");
    return false;
});

Обновление

Как уже упоминалось в комментариях, кликабельный div недоступен, поэтому вам также следует включить обычный якорь.

<div class="category-item">
    @Html.ActionLink("Category", new { categoryId = item.Id, SeName = item.SeName })
</div>

Затем можно изменить обработчик щелчка, чтобы использовать href привязки вместо атрибута data.

$(".category-item").click(function() 
{ 
    window.location = $(this).find("a").attr("href");
    return false;
});

Answer 2

Ответы на на этот вопрос показывают, как создать ActionLink вокруг изображения.Вы можете использовать аналогичный подход ...