how have a server side click of a div? - html

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

Answer 1

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

Answer 2

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
User Page

Answer 3

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.

Answer 4

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