how have a server side click of a div?

Question

i have a div..inside the div i have an image and name..now when i will click on the div the div will have a server side click that means it will have a codebehind function..how to do it?? or how to make my div a button where i don't have to change my div...

my code

<div class="tutorial" style="margin-left:5px;">
         TUTORIAL<div class="firstico" style="margin-left:70px;margin-top:-17px;">
         </div>
     </div>

how can i have a server side onclick function of this div???

i have used like that but it didn't work for me..don't know why??

 <div class="tutorial" style="margin-left:5px;"
 runat="server" id="tutorial" onClick="tutorial_Click">

 TUTORIAL<div class="firstico" style="margin-left:70px;margin-top:-17px;">
 </div>
 </div>


private void tutorial_Click(object sender, System.EventArgs e){
 // do stuff
}

i have tried like that also but it also didn't work for me...

<div class="tutorial" style="margin-left:5px;"
  onclick="__doPostBack('tutorial', 'click');">

 TUTORIAL<div class="firstico" style="margin-left:70px;margin-top:-17px;">
 </div>
 </div>


private void PageLoad(object sender, System.EventArgs e){
 // sttufs
 [...]

 // my stuff for tutorial click
 if (Request["__EVENTTARGET"] == "tutorial" && Request["__EVENTARGUMENT"] == "click"){
     TutorialClicked();
 }
}

private void TutorialClicked(){
 iframestyle.Attributes["src"] = "userpage.aspx";
}

score 1 · Answer 1 · edited May 23 '17 at 12:20

You will have to handle the click in the div using the Jquery and call server-side methods through JQuery.

Try it.

Source Code :-

<div class="tutorial" style="margin-left:5px;"
 runat="server" id="tutorial" onClick="javascript:tutorial_Click('peram1')">click me
</div>

Javascript Code :-

<script type="text/javascript">
    function tutorial_Click(parameter)
    {
       __doPostBack('tutorial', parameter)
    }
</script>

Code :-

public void Page_Load(object sender, EventArgs e)
{
     string parameter = Request["__EVENTARGUMENT"]; // parameter
     // Request["__EVENTTARGET"]; // btnSave
     if (parameter == "peram1")
         TutorialClicked();
}

private void TutorialClicked(){
   //write your code.
}

For more information refer __doPostBack

One doesn't _have to_ handle a click with jQuery. That could be a big overload for a click event, where a simple line of javascript would do the trick. — Asons, Mar 01 '14 at 05:55

Robin Sandström · Answer 2 · 2014-03-01T05:45:44.647

You can't listen for a click event from the server side. After the server has sent you the required files, the server is no longer involved. You need a client side listener, jquery is very easy to use.

Index (or whatever html page u got):

<div id="clickme" class="tutorial" style="margin-left:5px;">
    <div class="firstico" style="margin-left:70px;margin-top:-17px;">
    TUTORIAL
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $('#clickme').on('click', function () {//can replace '#clickme' for '.tutorial' if you want to be able to click multiple divs
        //do stuff
        $.ajax({//with ajax you can send a request to the server, and make it do somthing.
            url: '/path/to/file',
            type: 'post',
            data: {variable: 'data'},
            success: function(data) {//data is what you echo on from php
            //do something on the site
                alert(data);//just alert what you echo
            }
        });

    });
</script>

And php (for example) a little but like this:

<?php
    function doMe() {
        //your function
    }
    if(isset($_POST['variable'])) {
        if($_POST['variable'] === 'data') {
            doMe();
        }
    }
?>

can u give me the way of using jquery??? i want to switch to other page by clicking the div... — , Mar 01 '14 at 05:14
Then why dont just surround your div in a anchor tag? `
tutorial
` — Robin Sandström, Mar 01 '14 at 05:39

score 0 · Answer 3 · answered Mar 01 '14 at 05:13

You can try this stuff-

Add a button to your html markup, and set it's style="display: none". so it won't be visible to anyone.
Now add a click event to this button.
When click on div call click event of the button

it may be like below

function tutorial_Click(){
  // call here the button click which will do a postback
  document.getElementById('<%= btn.ClientID %>').click();
}

4 . Do your code behind stuff at button click event at server side.

Hope this helps.

Asons · Accepted Answer · 2014-03-01T05:50:30.237

Lets say you want the page "tutorial.aspx" to be displayed.

Then make your div look like this:

<div class="tutorial" style="margin-left:5px;" onclick="location.href='tutorial.aspx';">
    TUTORIAL
</div>

Lets say you have an iframe on your main page; (referring to this part of your code above)

private void TutorialClicked(){ iframestyle.Attributes["src"] = "userpage.aspx"; }

Wrap an anchor around a text like this

<a href="userpage.aspx" target="your_frame_name">User Page</a>

how have a server side click of a div?

4 Answers4