placing div in an anchor in asp.net mvc 3

Question

Working with block element inside a inline element is not acceptable by Html, but i have a scenario , in which i have to make div clickable,

<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>

I want to place the above div class category-item inside an anchor tag which is clickable:

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

The parent div background image changes with the item.id passed to it , therefore the background image is different for each category item, The main aim is to make the div clickable which navigates to the provided routeurl. Is it possible to acheive something like this or is there any other way to acheive this ,

Any suggestion or assistance will be helpful.

It's perfectly valid to have an `a` tag [wrap block elements in HTML5](http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element). Putting a navigation click handler on a div is very unkind to users who navigate via the keyboard. — steveax, Mar 21 '12 at 17:42

jrummell · Answer 1 · 2012-03-21T17:43:40.530

You can add a click handler to your divs.

Set the url in a data attribute:

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

Then reference it in your click handler:

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

Update

As mentioned in the comments, the clickable div is not accessible, so you should also include a normal anchor.

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

You could then change the click handler to use the anchor's href instead of a data attribute.

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

Please don't do this. It's highly inaccessible for those who navigate with the keyboard. — steveax, Mar 21 '12 at 17:37
Good point. If you do something like this, make sure to include a regular anchor inside the div. I added another example. — jrummell, Mar 21 '12 at 17:40

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

The answers to this question show how to create an ActionLink around an image. You could use a similar aproach...

edited May 23 '17 at 12:27

Community

1
1

answered Mar 21 '12 at 17:34

Arjan Einbu

13,543
2
56
59

placing div in an anchor in asp.net mvc 3

2 Answers2