Call C# code-behind method with a <li> onclick...

Question

Hey'all

I got a li - list, one with an onclick:

<ul class="tabs"> 
    <li><a href="#tab1">Foobar_1</a></li> 
    <li onclick="doMethod"><a href="#tab2">Foobar_2</a></li> 
    <li><a href="#tab3">Foobar_3</a></li> 
    <li><a href="#tab4">Foobar_4</a></li>
</ul>

Now, the method I want to call when clicked on a tab (the li's), updates an UpdatePanel, so a gridview is shown.

I know it must have something to do with AJAX, but I ain't got a clue how to move on now...

so basically: how to call a c# method using AJAX?

Answer 1

<li runat="server" OnClick="DoMyOnClickCall">....</li>

Then

public void DoMyOnClickCall(object sender, EventArgs e)
{
   // sender is the li dom element you'll need to cast it though.
}

To expand: (Update)

sender is an object that represents the <li>...</li> in HTML. It's called something like HtmlControl.

You'll need to cast sender to that type.

var myLI = (HtmlControl)sender;
// do stuff with `myLI`

Answer 2

Also, you can call the method from client side by:

1. declare your method as public static bool
2. put attribute [WebMethod] for this method
3. Call the method from js

Sample code:

<script language="javascript">  
    function MyClientFunction()  
    {    
    var liElement = $get("liElement").value;  
    PageMethods.doMethod(liElement,OnSuccess, OnFailure);  
    }  
    function OnSuccess(result) {  
     if(result)  
     {  
         alert("Some error message!");  
     }  
    }  
    function OnFailure(error) {  

    }
</script>