Hey fredo1094,

If you want make click event of menu inside repeater so please refer below code.

And also refer below link for database binding to repeater.

Database Driven N-Level (MultiLevel) Bootstrap(Responsive) Vertical Menu using C# and jQuery in ASP.Net

HTML

<div>
    <style type="text/css">
        .nav-side-menu
        {
            overflow: auto;
            font-family: verdana;
            font-size: 12px;
            font-weight: 200;
            background-color: #2e353d;
            position: fixed;
            top: 0px;
            width: 300px;
            height: 100%;
            color: #e1ffff;
        }
        .nav-side-menu .brand
        {
            background-color: #23282e;
            line-height: 50px;
            display: block;
            text-align: center;
            font-size: 14px;
        }
        .nav-side-menu .toggle-btn
        {
            display: none;
        }
        .nav-side-menu ul, .nav-side-menu li
        {
            list-style: none;
            padding: 0px;
            margin: 0px;
            line-height: 35px;
            cursor: pointer;
        }
        .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before
        {
            font-family: FontAwesome;
            content: "\f078";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
            float: right;
        }
        .nav-side-menu ul .active, .nav-side-menu li .active
        {
            border-left: 3px solid #d19b3d;
            background-color: #4f5b69;
        }
        .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active
        {
            color: #d19b3d;
        }
        .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a
        {
            color: #d19b3d;
        }
        .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li
        {
            background-color: #181c20;
            border: none;
            line-height: 28px;
            border-bottom: 1px solid #23282e;
            margin-left: 0px;
        }
        .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover
        {
            background-color: Orange;
        }
        .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before
        {
            font-family: FontAwesome;
            content: "\f105";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
        }
        .nav-side-menu li
        {
            padding-left: 0px;
            border-left: 3px solid #2e353d;
            border-bottom: 1px solid #23282e;
        }
        .nav-side-menu li a
        {
            text-decoration: none;
            color: #e1ffff;
        }
        .nav-side-menu li a i
        {
            padding-left: 10px;
            width: 20px;
            padding-right: 20px;
        }
        .nav-side-menu li:hover
        {
            border-left: 3px solid #d19b3d;
            background-color: #4f5b69;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
        }
        @media (max-width: 767px)
        {
            .nav-side-menu
            {
                position: relative;
                width: 100%;
                margin-bottom: 10px;
            }
            .nav-side-menu .toggle-btn
            {
                display: block;
                cursor: pointer;
                position: absolute;
                right: 10px;
                top: 10px;
                z-index: 10 !important;
                padding: 3px;
                background-color: #ffffff;
                color: #000;
                width: 40px;
                text-align: center;
            }
            .brand
            {
                text-align: left !important;
                font-size: 22px;
                padding-left: 20px;
                line-height: 50px !important;
            }
        }
        @media (min-width: 767px)
        {
            .nav-side-menu .menu-list .menu-content
            {
                display: block;
            }
        }
        body
        {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
        rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
        rel="stylesheet">
    <script type="text/javascript">
        $(function () {
            $('li[data-toggle="collapse"]').each(function () {
                if ($(this).next('ul').length == 0) {
                    $(this).removeAttr('data-toggle').removeAttr('data-target').removeClass('collapsed');
                    $(this).find('span.arrow').remove();
                }
            });
            $('ul#menu-content > ul').on('show.bs.collapse', function (e, obj) {
                $("ul#menu-content > ul").not(this).removeClass("in");
                var currentHead = $(this).prev("li");
                $("ul#menu-content > li").not(currentHead).removeClass("active");
                $(currentHead).addClass("active");
            })
            $("ul#menu-content > ul a").on("click", function () {
                var id = $(this).data("id");
                $.ajax({
                    type: "POST",
                    url: "Default4.aspx/Get",
                    data: '{MenuId: "' + id + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    }
                });
                function OnSuccess(response) {
                    alert(response.d);
                }
            });
        });
    </script>
    <div class="nav-side-menu">
        <div class="brand">
            AspSnippets</div>
        <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content">
        </i>
        <div class="menu-list">
            <ul id="menu-content" class="menu-content collapse out">
                <asp:Repeater ID="rptCategories" runat="server" OnItemDataBound="rptMenu_OnItemBound">
                    <ItemTemplate>
                        <li data-toggle="collapse" data-target='#<%#Eval("Title") %>' class="collapsed"><a
                            href='<%#Eval("Url") %>'><i class='<%#Eval("CssFont") %>'></i>
                            <%#Eval("Title") %><span class="arrow"></span> </a></li>
                        <asp:Literal ID="ltrlSubMenu" runat="server"></asp:Literal>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>
    </div>
</div>

Namespaces

C#

using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Text;

Code

C#

DataTable Menus = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindMenu();
    }
}

[System.Web.Services.WebMethod]
public static string Get(string MenuId)
{
    // write database code
    return "Id is " + MenuId + Environment.NewLine;
}

protected void rptMenu_OnItemBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            if (Menus != null)
            {
                DataRowView drv = e.Item.DataItem as DataRowView;
                string ID = drv["MenuId"].ToString();
                string Title = drv["Title"].ToString();
                DataRow[] rows = Menus.Select("ParentMenuId=" + ID);
                if (rows.Length > 0)
                {
                    StringBuilder sb = new StringBuilder();
                    sb.Append("<ul id='" + Title + "' class='sub-menu collapse'>");
                    foreach (var item in rows)
                    {
                        string parentId = item["MenuId"].ToString();
                        string parentTitle = item["Title"].ToString();

                        DataRow[] parentRow = Menus.Select("ParentMenuId=" + parentId);

                        if (parentRow.Count() > 0)
                        {
                            sb.Append("<li data-toggle='collapse' data-target='#" + parentTitle + "' class='collapsed'><a data-id='#" + parentId + "' href='" + item["Url"] + "'>" + item["Title"] + "<span class='arrow'></span></a>");

                            sb.Append("</li>");
                        }
                        else
                        {
                            sb.Append("<li><a data-id='" + parentId + "' href='" + item["Url"] + "'>" + item["Title"] + "</a>");
                            sb.Append("</li>");
                        }
                        sb = CreateChild(sb, parentId, parentTitle, parentRow);
                    }
                    sb.Append("</ul>");
                    (e.Item.FindControl("ltrlSubMenu") as Literal).Text = sb.ToString();
                }
            }
        }
    }
}

private StringBuilder CreateChild(StringBuilder sb, string parentId, string parentTitle, DataRow[] parentRows)
{
    if (parentRows.Length > 0)
    {
        sb.Append("<ul id='" + parentTitle + "' class='sub-menu collapse'>");
        foreach (var item in parentRows)
        {
            string childId = item["MenuId"].ToString();
            string childTitle = item["Title"].ToString();
            DataRow[] childRow = Menus.Select("ParentMenuId=" + childId);

            if (childRow.Count() > 0)
            {
                sb.Append("<li data-toggle='collapse' data-target='#" + childTitle + "' class='collapsed'><a href='" + item["Url"] + "'>" + item["Title"] + "<span class='arrow'></span></a>");
                sb.Append("</li>");
            }
            else
            {
                sb.Append("<li><a href='" + item["Url"] + "'>" + item["Title"] + "</a>");
                sb.Append("</li>");
            }
            CreateChild(sb, childId, childTitle, childRow);
        }
        sb.Append("</ul>");

    }
    return sb;
}

private void BindMenu()
{
    Menus = GetData("SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url],[CssFont] FROM [Menus]");
    DataView view = new DataView(Menus);
    view.RowFilter = "ParentMenuId=0";
    this.rptCategories.DataSource = view;
    this.rptCategories.DataBind();
}

private DataTable GetData(string query)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        return dt;
    }
}

Screebshot