vimal mishra vimal mishra - 4 months ago 41
ASP.NET (C#) Question

How to add onClick function on unordered list element?

can someone please help me with how to add onclick event in below code.
I want to fire onclick event on each li element.

<ul id="tree1">
<li OnClick="Button3_Click" runat="server">
<i class='fa fa-institution' style='color: #fff;'></i>
Add Institute
<ul></ul>
</li>
<li OnClick="Button4_Click" runat="server">
<i class='fa fa-puzzle-piece' style='color: #fff;'></i>
Test
<ul></ul>
</li>
<li OnClick="Button5_Click" runat="server">
<i class='fa fa-area-chart' style='color: #fff;'></i>
Analysis
<ul></ul>
</li>
<li OnClick="Button6_Click" runat="server">
<i class='fa fa-book' style='color: #fff;'></i>
Library
<ul></ul>
</li>
<li OnClick="Button7_Click" runat="server">
<i class='fa fa-bookmark' style='color: #fff;'></i>
Bookmark
<ul></ul>
</li>
</ul>

Answer

This can be easily achieved by implementing a client side click event using jQuery everytime a user clicks on an <li> element.

Inside the click event for the <li> you can check which item was clicked and make a server side call by using $.ajax and a [WebMethod].

Code behind:

[System.Web.Services.WebMethod]
public static string LiClick(string item)
{
    System.Diagnostics.Debugger.Break();
    return String.Format("You clicked on - {0}", item);
}

.ASPX:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".li").click(function () {

                var text = $(this).text().trim();

                $.ajax({
                    type: "POST",
                    url: "UnorderedListExample.aspx/LiClick",
                    contentType: "application/json;charset=utf-8",
                    data: '{item:"' + text + '"}',
                    success: function (data) {
                        var data = data.d;
                        alert(data)
                    },
                    error: function (errordata) {
                        console.log(errordata);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ul id="tree1">
            <li class="li">
                <i class='fa fa-institution' style='color: #fff;'></i>
                Add Institute                                    
        <ul></ul>
            </li>
            <li class="li">
                <i class='fa fa-puzzle-piece' style='color: #fff;'></i>
                Test
        <ul></ul>
            </li>
            <li class="li">
                <i class='fa fa-area-chart' style='color: #fff;'></i>
                Analysis
         <ul></ul>
            </li>
            <li class="li">
                <i class='fa fa-book' style='color: #fff;'></i>
                Library
        <ul></ul>
            </li>
            <li class="li">
                <i class='fa fa-bookmark' style='color: #fff;'></i>
                Bookmark
        <ul></ul>
            </li>
        </ul>
    </form>
</body>