使用jQuery单击div时重定向到Html.ActionLink

Question

i want to do clickable div and when clicked redirect to Html.ActionLink lockated inside said div.

this is the clickable div jquery

<script language="javascript">
    $(".linkdiv").click(function () {
        if ($(this).find("a").length) {
            window.location.href = $(this).find(".top-menu-link").attr("href");
        }
    });
</script>

and this is how i have written the div:

<div id="top-menu-element" class="linkdiv">
     @Html.ActionLink("Home", "Index", "Home", new { @class = "top-menu-link" })
</div>

i think that the .attr("href") should be something diffrent but i didn't manage to find out what it should be

Answer 1

If the script is in the Razor view, just use:

window.location.href = '@Url.Action("Index", "Home")';

Which Url.Action does the same thing.

Answer 2

<script language="javascript">
    $(".linkdiv").click(function () {
        var anchor = $(this).find("a");
        if (anchor.length) {
            anchor.trigger("click"); 
        }
    });
</script>

Just call the click event for the anchor and use the normal flow of the anchor tag. If this doesn't work try to put this bind click event to the anchor:

$(".linkdiv").find("a").click( function (e) {
  window.location.href = this.href;
});

Or more simple replace:

anchor.trigger("click"); 

With:

anchor.get(0).click();