execute serverside code on div click

ASPX CODE

<div id="c" runat="server" onclick="loadContentFamily" onmousedown="loadContentFamily" rel="divUpdatePanel" >Family</div>

ServerSide Code

Public Sub loadContentFamily(ByVal PageName As String)
        MsgBox("")
        PageName = "Family"
        Dim _con As New SqlConnection(ConfigurationManager.ConnectionStrings("LeaveDBConnectionString").ConnectionString)
        Dim _da As New SqlDataAdapter("SELECT PageHeader,PageContent FROM PageKeeper WHERE PageName='" & PageName & "'", _con)
        Dim _table As New DataTable

        Try
            _con.Open()
            _da.Fill(_table)
            _con.Close()
            _con.Dispose()
            With _table.Rows(0)
                h4header.InnerText = .Item(0)
                divUpdatePanel.InnerHtml = .Item(1)
                Me.Title = .Item(0)
            End With

        Catch ex As Exception
            MsgBox(ex.Message)
            divUpdatePanel.InnerText = "No Data Found"
        Finally
            _con.Close()
            _con.Dispose()
        End Try
    End Sub

PROBLEM:

When i click on the div it does not execute the ServerSide Code …why??Any help appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You need to raise a server event, not client event (and it looks like you want to do that asynchronously).

A quick and dirty way of accomplishing this is to use a hidden server button. The button can be located wherever desired (such as inside an UpdatePanel) and it allows proper usage of the ASP page lifecycle.

<asp:Button runat="server" id="btnPostback" style="display:none" onclick="serverEventHandler" />

<div onclick="document.getElementById('<%= btnPostback.ClientID %>').click()">Clickable DIV</div>

Method 2

Check out this post raise postback event from div tag

Yours would look something like

<div id="c" onclick="__doPostBack('loadContentFamily','')">
Family
</div>

Edit:

Try something like

<Triggers>
        <asp:AsyncPostBackTrigger ControlID="c" EventName="Click" />
    </Triggers>

It’s explained better here Partial postback with Javascript

Method 3

wrap your div inside a LinkButton control and call your loadContentFamily method on OnClick event of LinkButton. This worked for me

Method 4

I would recommend not using the UpdatePanel control, but jQuery. You can find an example here

Method 5

Other alternative is to call a Javascript function and then make a page method call . return data in form of xml & render in the div .

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0