Can I call a code behind function from a div onclick event?

Question

I have a bunch of divs on my page that are added at run time dynamically. When any of the dynamically added divs are clicked - All need to call the same function in my code behind. Each of the divs must pass it's own ID to the function. I can't use web methods as the function needs to identify which div was clicked and then show/hide/populate other controls on the page.

Cheers guys

Header Controls and stuff go here

    <div id="div_Footer" class="HoverEdit" title="Click To Edit" runat="server" onclick="EditDiv(div_Footer)">
        Footer Controls and stuff go here
    </div>

and then in the code behind :

Sub EditDiv(ID_ofDiv As String)

    'Do some stuff to the controls on the page
    'Swapping tabs, showing /hiding controls etc.

End Sub

Sorry guys - I've edited my post to point out that these divs that need to call the function are dynamically created at runtime by the user. — wotney, May 15 '12 at 08:49

Rob Angelier · Accepted Answer · 2012-05-15T09:38:18.103

3

I'm not used to write VB code so my example is in C# but maybe it can help you get started. It's probably not the cleanest way to implement this, but i'll give it a try:

HTML

 <div id="div_Footer" class="HoverEdit" title="Click To Edit" runat="server" onclick="EditDiv(this)">
        Footer Controls and stuff go here
    </div>

Client

<script type="text/javascript">
function EditDiv(s,e){
var id = $(s).attr("id");
__doPostBack(id,id);
}
</script>

Server

private void Page_Load(object sender, EventArgs e)
{
   var arg = Request.Form["__EVENTTARGET"]; 'this will be empty on your first page request, but if the user click a div it will cause a postback to server, so this event will be fired again and will contain the div ID.

   if(arg != null)
   {
      string divID = (string)arg;
      'call your method with the argument.
   }
}

More information about this can be found here:

http://wiki.asp.net/page.aspx/1082/dopostback-function/

edited May 15 '12 at 09:38

answered May 15 '12 at 08:56

Rob Angelier

2,335
16
29

Cheers Rob, One of my problems is that the user can add these divs dynamically, so I can't predict on page load if there will be 1 control or a hundred ! – wotney May 15 '12 at 09:08
I have updated my answer again and adjusted it for your needs. – Rob Angelier May 15 '12 at 09:27
Thank you for this solution. I was able to do something similar to get the selected index of a row inside a ListView object. You rock! – MadHenchbot Nov 05 '12 at 19:54
Always glad to help people out! – Rob Angelier Nov 06 '12 at 12:39

TheVillageIdiot · Answer 2 · 2012-05-15T09:11:04.003

With the help from the link posted by @Tim Schmelter I tried following. This is wonderful:

Markup:

<div id="div1" runat="server" style="height:100px;width:100px;">click me</div>

Code:

public class MyPage  
      Inherits System.Web.UI.Page
      Implements IPostBackEventHandler

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    div1.Attributes("onclick") = 
         Me.Page.ClientScript.GetPostBackEventReference(Me, "div1_clicki")
End Sub

Protected Sub Div1_Click()
    'do your stuff
    div1.InnerHtml="div1 clicked"
End Sub


'Private Members As IPostBackEventHandler
Public Sub RaisePostBackEvent1(ByVal eventArgument As String) Implements 
                    IPostBackEventHandler.RaisePostBackEvent
    If eventArgument = "div1_click" Then
            div1_click()
        End If
    End If
End Sub

There seems to be an unfortunate bug when the user clicks on a child element inside the div that causes the event to go haywire - the page refreshes even though I'm using an UpdatePanel and the event never fires. — sparebytes, Apr 30 '13 at 22:37

score 0 · Answer 3 · edited May 23 '17 at 12:24

You can create a postback from javascript. One way is to make a button or linkbutton and add click event to it. Add Style="Display:none;" and force Div to postback on button click like.

<div id="div_Footer" class="HoverEdit" title="Click To Edit" runat="server" onclick="EditDiv(this)">
    Footer Controls and stuff go here
</div>
//Javascript
function EditDiv()
{
   // do your code
   __doPostBack('ButtonAID','')
}

A nice explanation can be found in below article. ASP.NET postback with JavaScript

Can I call a code behind function from a div onclick event?

3 Answers3

Linked

Related