Reputation:

How to add a onClick event to li tag in unordered list in ASP.Net

Masterpage.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="Database_Project.MasterPage" %>

<!DOCTYPE html>

    <html>
    <head runat="server">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  

<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

 <!-- Site Metas -->
<title>Pharma Health Services</title>  
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">

 <!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Colorlib Templates">
<meta name="author" content="Colorlib">
<meta name="keywords" content="Colorlib Templates">


<!-- Icons font CSS-->
<link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<!-- Font special for pages-->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

<!-- Vendor CSS-->
<link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
<link href="vendor/datepicker/daterangepicker.css" rel="stylesheet" media="all">

<!-- Main CSS-->
<link href="css/main.css" rel="stylesheet" media="all">



<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">

<!-- CSS here -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/flaticon.css">
<link rel="stylesheet" href="assets/css/slicknav.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/css/themify-icons.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/nice-select.css">
<link rel="stylesheet" href="assets/css/style.css">






<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Rubik:400,700|Crimson+Text:400,400i" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Rubik:400,700|Crimson+Text:400,400i" rel="stylesheet">



<!-- Site Icons -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Pogo Slider CSS -->
<link rel="stylesheet" href="css/pogo-slider.min.css">
<!-- Site CSS -->
<link rel="stylesheet" href="css/style.css">    
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">



<style>
    .row {
      display: flex;
    }

    .column {
      flex: 50%;
    }
</style>


<style>
ul{
    padding: 0;
    list-style: none;
}
ul li{
    display: inline-block;
    position: relative;
    line-height: 21px;
    text-align: left;
}
ul li a{
    display: block;
    padding: 8px 25px;
    text-decoration: none;
}
ul li a:hover{
}
ul li ul.dropdown{
    min-width: 150%; /* Set width of the dropdown */
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
}
ul li:hover ul.dropdown{
    display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
    display: block;
}

</style>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

<%--<!-- LOADER -->
  <div id="preloader">
    <div class="loader">
        <img src="images/preloader.gif" alt="" />
    </div>
</div>
<!-- END LOADER -->--%>

<form id="form1" runat="server">

    <header class="top-header">
    <nav class="navbar header-nav navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="index.aspx"><img src="images/logo.png" alt="image"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-wd" aria-controls="navbar-wd" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbar-wd">
                <ul id="bar" runat="server" class="navbar-nav">
                    <li><a class="nav-link">Home</a></li>
                    <li><a class="nav-link" href="index.aspx#about">About Us</a></li>
                    <li id="servicesTab" runat="server">
                        <a class="nav-link" href="index.aspx#services">Services</a>
                        <ul class="dropdown nav-link">
                            <li><a href="medicine.aspx">Medicine </a></li>
                            <li><a>Lab Testing</a></li>
                            <li><a >Radiology</a></li>
                            <li><a >Need a Doc?</a></li>
                        </ul>
                    </li>
                     <li><a class="nav-link" href="index.aspx#gallery">Gallery</a></li>
                    <li><a class="nav-link" href="index.aspx#blog">Customer Reviews</a></li>
                    <li><a class="nav-link" href="index.aspx#contact">Contact</a></li>
                    <li id="loginTab" runat="server"><a class="nav-link" href="Login.aspx">Login</a></li>
                    <li id="customerTab" runat="server"><a class="nav-link" onserverclick="callCustomerTab" runat="server" href="customerAccount.aspx">MyAccount</a></li>
                    <li id="pharmacyTab" runat="server"><a class="nav-link" href="pharmacyAccount.aspx">MyAccount</a></li>
                    <li id="doctorTab" runat="server"><a class="nav-link" href="doctorAccount.aspx">MyAccount</a></li>
                </ul>
                <div class="icons" id="test_cart" runat="server">
                    <a href="cart.aspx" class="icons-btn d-inline-block bag">
                        <span class="icon-shopping-bag"></span>
                        <span class="number"></span>
                    </a>
                    <a href="#" class="site-menu-toggle js-menu-toggle ml-3 d-inline-block d-lg-none"><span
                        class="icon-menu"></span></a>
                </div>
            </div>
        </div>
    </nav>
</header>

<!-- End header -->

    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</form>

<br /><br />
<!-- Start Subscribe -->
<div class="subscribe-box">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="subscribe-inner text-center clearfix">
                    <h2>Subscribe</h2>
                    <p>PHS don't spam. We only reach out to you when a promotion tailored to your interest comes up!</p>
                    <form action="#" method="post">
                        <div class="form-group">
                            <input class="form-control-1" id="email-1" name="email" placeholder="Email Address" required="" type="text">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="new-btn-d br-2">
                                Subscribe
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Subscribe -->

<!-- Start Footer -->
<footer class="footer-box">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <p class="footer-company-name">All Rights Reserved. &copy; 2020 <a href="#">Pharma Health Services</a> Project By : Raffay Sajjad</p>
            </div>
        </div>
    </div>
</footer>
<!-- End Footer -->

I am trying to attach on click event to the higlighted tab. This is what I achieved after help from Gabriel I added onserverclick and runat to anchor tag:

<li id="customerTab" runat="server"><a class="nav-link" onserverclick="callCustomerTab" runat="server" href="customerAccount.aspx">MyAccount</a></li>

The callToCustomer function is defined inside Masterpage.Master.cs:

protected void callCustomerTab(object sender, EventArgs e)
{
    Response.Redirect("index.aspx");

}

But no matter what I do. Nothing happens on clicking MyAccount tab. There is no redirection taking place. Any ideas please?

Upvotes: 1

Answers (1)

Gabriel Luci

Reputation: 41018

Some elements allow for using OnServerClick, but I don't think that will work on a list item tag. But it will definitly work on an anchor tag:

<li><a class="nav-link" onserverclick="callFunction" runat="server">Home</a></li>

Upvotes: 2

How to add a onClick event to li tag in unordered list in ASP.Net

Answers (1)

Related Questions