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

Question

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 ac# 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>