MVC3: Make div as ajax.actionlink

Question

So i have this actionlink which will trigger action "gotoContent" which will return a partialVIew into some div in current page

<div id="itemColumn">
   @Ajax.ActionLink("Go to content", "GotoContent", null, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "content" }, new { id = "item" })
</div>

So the problem is, this only triggered when we clicked right in the "Go to content" words, but what i need is, we can click everywhere on the whole div. It would be nice if anyone can help me with this.

Try my posted solution and let me know if that fixes your problem. — Jason Roell, Jan 30 '14 at 07:48
I decided I did not like the first answer I posted. Check out the newest answer that I have just posted. — Jason Roell, Jan 30 '14 at 15:38
Possible duplicate of [Make div containing ajax actionLink clickable](http://stackoverflow.com/questions/24314116/make-div-containing-ajax-actionlink-clickable) — Owen Pauling, Feb 08 '17 at 15:45

score 1 · Answer 1 · answered Jan 30 '14 at 15:37

To achieve what you are asking I think the right and easiest way to do it would be something like this:

HTML:

 <div id="itemColumn">
  // put whatever text you want the Div to Contain but don't make it an action link. We will handle this in Jquery by essentially making your div an action link.
</div>

Javascript:

$(function(){
   $('#itemColumn').click(function(){
          $.ajax({
             url: '@Url.Action("GotoContent", "ControllerName")',
             type: "GET",
             success: function(result) {
                $('#content').html(result);   // this will update your target div with the result (your partial view)
             }
       })
    })
});

MVC3: Make div as ajax.actionlink

1 Answers1