I am trying to set the visibility of a "ul" element in c# code behind but getting a null exception
Function behind Page (Master page in this instance)
protected void profileDropDown(Object sender, ImageClickEventArgs e)
{
HtmlGenericControl dropDownList = (HtmlGenericControl)Master.FindControl("profileList");
if (dropDownOpen == false)
{
dropDownList.Visible = true;
}
else
{
dropDownList.Visible = false;
}
}
Html behind Page (Master page in this instance)
<body>
<form id="form" runat="server">
<div runat="server" id="navBarContainer">
<img runat="server" id="imgLogo" src="Images/logo_netflix.png"/>
<ul id="navBarLeft">
<li id="liLobbies" class="navItem">Lobbies</li>
</ul>
<ul id="navBarRight">
<li id="liProfile" class="navItem">
<div id="profileHeader">
<img id="imgProfilePic" src="Images/img_user.png"/>
<span><asp:Label Text="Profile" runat="server" CssClass="lblProfile"></asp:Label></span>
<asp:ImageButton runat="server" id="imgDropDown" src="Images/icon_down_arrow.png" OnClick="profileDropDown"/>
</div>
<ul id="profileList">
<li id="liAccount" class="navItemProfile"><a class="navItemProfile" href="/Account/Login.aspx">Account</a></li>
<li id="liMessages" class="navItemProfile"><a class="navItemProfile" href="/Account/Login.aspx">Messages</a></li>
</ul>
</li>
<li id="liLogin" class="navItem">Login</li>
<li id="liRegister" class="navItem">Register</li>
</ul>
</div>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</form>
You must make the ul runat=server
<ul id="profileList" runat="server">
<li id="liAccount" class="navItemProfile"><a class="navItemProfile" href="/Account/Login.aspx">Account</a></li>
<li id="liMessages" class="navItemProfile"><a class="navItemProfile" href="/Account/Login.aspx">Messages</a></li>
</ul>
And the you change you method, accessing the element directly
protected void profileDropDown(Object sender, ImageClickEventArgs e)
{
profileList.Visible = !dropDownOpen;
}
Related
I have this HTML header with <nav><ul><li> sections , the problem is that I'm trying to hide the LI section with id recfAct when in my CodeBehind brpt gets false
HTML
<header class="header" id="header1">
<h2>LISTADO tabla [TParUsuPerfil]</h2>
<nav class="menu">
<ul>
<li id="refAct">Actualizar </li>
<li id="refSalir">Salir </li>
</ul>
</nav>
</header>
C#
Boolean bRpt;
bRpt = wsObj.ValidarExiste(Session["LoginUsername"].ToString()); //gets false or true in brpt
Update :
Just need to add the tag runat ="server" and then i can call it in code behind
Html:
<li id="refAct" runat="server">Actualizar </li>
<li id="refSalir">Salir </li>
CodeBehind:
refAct.Visible = true;
I'm trying to hide menu options from navbar in master page based on user roles
but when I tried to call the element it gives me an error.
This is what I did :
MasterPage
<div class="navbar-collapse collapse">
<ul id="MasterMenu" class="nav navbar-nav">
<li id="liDashboard">
<a runat="server" href="~/_Dashboard">Dashboard</a>
</li>
<li id="liTicket">
<a runat="server" href="~/Forms/Tickets/_Ticket">Ticket+</a>
</li>
<li id="liReports">
<a runat="server" href="-">Reports</a>
</li>
</ul>
</div>
And in another page
if (User.IsInRole("User"))
{
System.Web.UI.HtmlControls.HtmlGenericControl liDashboard = (System.Web.UI.HtmlControls.HtmlGenericControl)Master.FindControl("liDashboard");
liDashboard.Visible = false;
}
Also I tried to add runat="server" but it still not working.
Use Null-Conditional operator (?.) and check for null before assignment:
System.Web.UI.HtmlControls.HtmlGenericControl liDashboard =
(System.Web.UI.HtmlControls.HtmlGenericControl)Master?.FindControl("liDashboard");
if (liDashboard != null) liDashboard.Visible = false;
Also you have missed runat="server" in the following line:
<li id="liDashboard" runat="server">
For example
if your place holder something like that.
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
Try to use something like that
Master.FindControl("MainContent").FindControl("liDashboard")
Then find your value hierarchically
And of course values need to be with runat="server"
Edit
Give your PlaceHolder an ID
<asp:PlaceHolder ID="Something" runat="server"/> and get your value with:
Master.FindControl("Something").FindControl("liDashboard")
I put by navigation code in update panel using timer but after one minute the active menu disappears and show no active menu on the page but the selected page is still present....
let me share my code..
code for update panel counters
Aspx code:
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<nav class="navbar-default navbar-side" role="navigation" style="background-color: #333333; height:100%;">
<div class="sidebar-collapse" style="background-color: #333333; height:100%;">
<ul class="nav" id="main-menu">
<li class="text-center">
<img src="../assets/img/Logo.jpg" class="user-image img-responsive"/> </li>
<li>
<a class="active-menu" id="MDB" href="ManagerDashBoard.aspx"><i class="fa fa-dashboard fa-3x"></i>Manager DashBoard </a>
</li>
<li>
<i class="fa fa-sitemap fa-3x"></i>Messages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a id="MNMF" href="ManagerNewMessageForm.aspx">Create New Message</a>
</li>
<li>
<a id="MI" href="ManagerInbox.aspx?Status=11">Inbox<span class="in-badge"><asp:Label ID="mgInLabel1" runat="server" Text=""></asp:Label></span> </a>
</li>
<li>
<a id="MS" href="ManagerInbox.aspx?Status=22">Send<span ></span> </a>
</li>
</ul>
</li>
<li>
<i class="fa fa-sitemap fa-3x"></i>Suggestion Follow Up<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a id="MP" href="ManagerNewSuggestion.aspx?Status=7">Pending <span class="mr-badge"><asp:Label ID="SMRPLabel1" runat="server" Text=""></asp:Label></span> </a>
</li>
<li>
<a id="MPP" href="ManagerNewSuggestion.aspx?Status=3">Postpone<span class="pp-badge"><asp:Label ID="PPLabel1" runat="server" Text=""></asp:Label></span> </a>
</li>
<li>
<a id="MAR" href="ManagerNewSuggestion.aspx?Status=6">Archived<span class="ar-badge"><asp:Label ID="SARLabel4" runat="server" Text=""></asp:Label></span></a>
</li>
</ul>
</li>
<li>
<i class="fa fa-sitemap fa-3x"></i>Account Setting<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a id="MAC" href="ManagerAccount.aspx">Account Control</a>
</li>
<li>
<a id="MUP" href="ManagerPassword.aspx">Update Password</a>
</li>
</ul>
</li>
</ul>
</div>
<div style="background-color: #333333; height: 400px;">
</div>
</nav>
</ContentTemplate>
C# Code :
public void msgcounter()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["FBMNGTConnectionString"].ConnectionString);
con.Open();
int msgstatusid = 0;
while (msgstatusid < 22)
{
string strquery2 = string.Empty;
strquery2 = "select count(Status) as msgcntstatus from MessageApprovalTable where Status = " + msgstatusid + " and ToEmployee_ID =" + Session["Employee_Id"];
SqlCommand cmd2 = new SqlCommand(strquery2, con);
SqlDataAdapter sda = new SqlDataAdapter(cmd2);
DataSet ds = new DataSet();
sda.Fill(ds);
string mgcount = Convert.ToString(ds.Tables[0].Rows[0]["msgcntstatus"]);
switch (msgstatusid)
{
case 11:
mgInLabel1.Text = Convert.ToString(mgcount);
break;
//case 22:
// mngsndLabel1.Text = Convert.ToString(mgcount);
// break;
//case "2":
// strquery += " where Suggestion_Status = 2";
// break;
default:
break;
}
msgstatusid++;
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
counter();
msgcounter();
}
Kindly add below line to Timer_Tick,
Put ,Menu id : MDB ; Runat="Server"
MDB.attributes.add("class","active-menu");
for all pages You can take href value or Page name For Applying Active class on Menu item
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>
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>
Can someone help me out. Really desperate to make it work. Here is my full master page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>IslandGas</title>
<link href="/css/bootstrap.css" rel="stylesheet" />
<link href="/css/font-awesome.min.css" rel="stylesheet" />
<script src ="/js/bootstrap.js" type = "text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" class="form-horizontal">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="AdminUpdatePanel" runat="server">
<ContentTemplate>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a id="home" href="~/Admin/dash.aspx" runat="server" class="navbar-brand">Island Gas Admin</a>
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="products" href="#"><i class="fa fa-fw fa-wrench"></i>Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A1" href="ViewProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Products</a></li>
<li><a id="A2" href="AddNewProduct.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add a Product</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="suppliers" href="#"><i class="fa fa-fw fa-wrench"></i>Category <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A29" href="ViewCategory.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Product Categories</a></li>
<li><a id="A6" href="AddCategory.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add Product Category</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="orders" href="#"><i class="fa fa-fw fa-table"></i>Customer Orders <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A10" href="CustomerOrder.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Orders</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="reports" href="#"><i class="fa fa-fw fa-table"></i>Income Reports <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A17" href="IncomeReports.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Report</a></li>
<li><a id="A3" href="ReportCustomerTrack.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Customer Track Report</a></li>
<li><a id="A7" href="ReportProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Products Report</a></li>
<li><a id="A9" href="ReportRegisteredCustomers.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Registered Customer</a></li>
<li><a id="A4" href="ReportsGR.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Return Goods Requests</a></li>
</ul>
</li><li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="A5" href="#"><i class="fa fa-fw fa-table"></i>Audit Trail <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A8" href="AuditTrail.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Audit Trail</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li id="user" runat="server" class="dropdown" visible="true">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<asp:Literal ID="ltUser" runat="server" Text="Administrator" /> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="divider"></li>
<asp:linkbutton ID="linkLogout" runat="server" onclick="link_Logout_Click" CausesValidation="False" >[Log Out]</asp:linkbutton>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="clearfix">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<h1><asp:ContentPlaceHolder ID="title" runat="server" /></h1>
</div>
</div>
</div>
<div class="row">
<asp:ContentPlaceHolder ID="content" runat="server" />
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Made by Duhaylungsod, Paolo</p>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.11.3.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/bootstrap.min.js") %>'></script>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
i am trying to make datepicker work. i have found a good code and it works perfectly fine in pages w/o a master page, update panel, script manager etc.
head code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
content:
$(document).ready(function () {
$('[id$=txtExpiry]').datepicker({ showAnim: 'slideDown' });
});
textbox:
<div class ="form-group">
<label class ="control-label col-lg-4"> Expiry Date</label>
<div class = "col-lg-8">
<asp:TextBox ID="txtExpiry" runat="server" class="form-control"></asp:TextBox>
</div>
really really desperate to make this work. help me out please
<asp:TextBox ID="datepicker" runat="server" class="form-control">
When server control with ID datepicker will be rendered in html the result html element will automatically generated id which contains prefixes based on parent server controls from master page, i.e
id="ctl100_main_datepicker"
$( "#datepicker" ).datepicker();
The jquery selector searches html element with ID equals to "datepicker".
You can use element css class as a selector:
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
<asp:TextBox ID="datepicker" runat="server" class="datepicker form-control"></asp:TextBox>
Try changing this line
<asp:TextBox ID="datepicker" runat="server" class="form-control"></asp:TextBox>
to this
<asp:TextBox ID="datepicker" runat="server" class="datepicker, form-control"></asp:TextBox>
Note the extra class called "Datepicker" in addition to 'form-control'. This should allow jquery to find the form element and apply a datepicker to it
Try this :
If you don't want to use a css selector and keep selecting by id, try this :
$('#<%= datepicker.ClientID %>').datepicker();
This way you will have the id generated by ASP.NET.
MasterPage gives another id for controls. See this reference http://www.asp.net/web-forms/overview/older-versions-getting-started/master-pages/control-id-naming-in-content-pages-cs
When you are using a master page, to avoid same id in a page, asp.net itself change the textbox id, actually it adds the name of placeholder to the id of your control.
For Example:
TextBox with "txtExpiry" id, in a placeholder with "content" id, become: "content_txtExpiry" when it rendered.
so may javascripts and jquery codes can not find the input!
and the solution is defining the datepicker not using the class or old id, using the final rendered names as "content_txtExpiry" so change your code as:
$('[id$=content_txtExpiry]').datepicker({ showAnim: 'slideDown' });