MVC3: Make div as ajax.actionlink

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.

Answers


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)
             }
       })
    })
});

Need Your Help

Inline text box labels with WPF

wpf user-interface textbox richtextbox

I'm trying to reproduce the layout of some paper forms in a WPF application. Labels for text boxes are to be "inline" with the content of the text boxes, rather than "outside" like normal Windows f...

php pdo success but dont enter the data to the database

php sql oop pdo

I have this weird issue with my PDO/SQL. I use namespaces and classes to control things.