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")
Related
I am trying to make a simple dropdown menu in my Blazor app. It is declared in my Header.razor as shown below:
<div class="header-sign">
<div class="dropdown" id="toggleDropdown">
<button class="button-md" type="button">
<i data-feather="user"></i>
<span>Personal cab</span>
</button>
<ul class="dropdown-list">
<li class="dropdown-item">
<a class="dropdown-link" href="">
<p class="text-md">Cabinet</p>
</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="">
<p class="text-md">Sign out</p>
</a>
</li>
</ul>
</div>
</div>
The dropdown can be triggered via JS script like this:
$("#toggleDropdown").on("mouseenter", () => {
$(this).find(".dropdown-list").addClass("is-active");
});
I have my header declared in MainLayout.razor like shown below:
#inherits LayoutComponentBase
<Header></Header>
<main class="main">
#Body
</main>
<Footer></Footer>
And this approach doesn't work.
Everything changes if I replace the above-mentioned Header.razor with razor page Header.cshtml with exactly the same markup and render it in _Layout.cshtml in such a way:
#await Html.PartialAsync("Header")
Looks like the above markup can only work in *.cshtml files but cannot in *.razor and I don't quiet understand the reason. Why does it behave this way?
Huge thanks to Mohammed Alwedaei, I figured out how to solve my question. His remark that the dropdown should be activated on a click and not on a hover really solved it to me.
We should just keep state of a dropdown list and toggle classes of it in a bit tricky way (with a ternary operator #(isActive ? "is-active" : "")). To make the dropdown work as intended, we should define #onclick attribute and also #onblur to disable it when user clicks somewhere else.
The code below works just fine:
<div class="header-sign">
<div class="dropdown" id="toggleDropdown">
<button #onclick="Show" #onblur="Hide" class="button-md" type="button">
<i data-feather="user"></i>
<span>Personal cab</span>
</button>
<ul class="dropdown-list #(isActive ? "is-active" : "")">
<li class="dropdown-item">
<a class="dropdown-link" href="/cabinet">
<p class="text-md">Cabinet</p>
</a>
</li>
<li class="dropdown-item">
<a #onclick="LogOutAsync" class="dropdown-link" href="">
<p class="text-md">LogOut</p>
</a>
</li>
</ul>
</div>
</div>
#code {
private bool isActive = false;
private void Show()
{
isActive = true;
}
private void Hide()
{
isActive = false;
}
private async Task LogOutAsync()
{
}
}
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 am trying to select an element from a list that will update fields upon a clicking outside of the list. The below code works if I only have one event (see picture)
Actions action = new Actions(driver);
EventGrid.FindElement(By.XPath("//div[contains(.,'" + nameToBeClicked + "')]")).Click();
// Forces a click outside element to fire the triggers
EventGrid.FindElement(By.XPath("//html")).Click();
But will not work when I have two events (notice there are two events in the picture now, one new event and the other called buffet breakfast). I pass in the event name to the method which does click the buffet breakfast from the drop down however the click to html only works with the above picture but not the below. Any ideas how to get around this?
Html of the list:
<div id="boundlist-1193" class="x-boundlist x-boundlist-floating x-layer x-boundlist-default x-border-box" tabindex="-1" style="right: auto; left: 100px; top: 97px; height: auto; width: 150px; z-index: 29001;" data-selenium-id="EventGrid-EventClassificationName-list">
<div id="boundlist-1193-listEl" class="x-boundlist-list-ct x-unselectable" style="overflow: auto; height: auto;" role="presentation">
<ul class="x-list-plain">
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Buffet Breakfast</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>NotMarkedAsPosted</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Package Afternoon Break</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Package Dinner</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Package Lunch</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Package Morning Break</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Party Hard</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Unassigned</div>
</li>
</ul>
</div>
</div>
You can try to perform click by coordinates after you have selected your option.
action.MoveByOffset(x, y).Click().Perform();
I have achieved the click by using the following code. It seems when there are multiple events the html tag falls off and becomes remote. Please review the code below. I also removed the string parameter as when I type the name it only one member of the list returns.
EventGrid.FindElement(By.XPath("//li/div")).Click();
RemoteWebElement element = (RemoteWebElement)driver.FindElement(By.XPath("//html"));
var scrollIt = element.LocationOnScreenOnceScrolledIntoView;
element.Click();
From what I understand, Your objective is to get onfocusout event triggered. I had this issue and this solves my problem
driver.find_element_by_tag_name('body').send_keys(Keys.TAB)
what it does is sends tab key event to body,(you can use html as tag if you wish). I use this soution as it's the most prefered behaviour of the actual user.
I found the easiest way is just to click something that has no interaction i.e. body attribute...this will always be there.
If you were wanting to mimic user behaviour for your test then you would click or tab to the next fields or user actionable element - but for the sake of just validating a field the below method would suffice.
Class PageElements {
public static By body = By.XPath("//body");
}
driver method:
driver.FindElement(PageElements.body).Click();
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;
}
I am new to the ASP environment and I am building an application using Visual Studio 2013 with Bootstrap V.3.0.0.
I have this for the Site.Master:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/"><span class="glyphicon glyphicon-home"></span>Home</a></li>
<li><a runat="server" href="~/ProducersList"><span class="glyphicon glyphicon-user"></span>Producers</a></li>
<li><a runat="server" href="~/BeatsList"><span class="glyphicon glyphicon-music"></span>Beats</a></li>
<li><a runat="server" href="~/License"><span class="glyphicon glyphicon-file"></span>License</a></li>
<li><a runat="server" href="~/About"><span class="glyphicon glyphicon-info-sign"></span>About</a></li>
<li><a runat="server" href="~/Contact"><span class="glyphicon glyphicon-pencil"></span>Contact</a></li>
<li><a runat="server" href="~/ShoppingCart" id="cartCount"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
</ul>
Code behind Site.Master for Cart::
protected void Page_PreRender(object sender, EventArgs e)
{
using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions())
{
string cartStr = string.Format("Cart ({0})", usersShoppingCart.GetCount());
cartCount.InnerText = cartStr;
}
}
All the glyphicons show except the last one, glyphicon-shopping-cart. What do I change to get it to show?
Your icon disappears because you are replacing the whole content of your cartCount hyperlink with the item count: MSDN tells that
Assigning a value to InnerText will destroy any child elements that
belong to the element.
So your <span class="glyphicon glyphicon-shopping-cart"></span> doesn't survive the InnerText assignation. What you could rather do is to place the cart count inside your wrapping hyperlink:
<li>
<a href="~/ShoppingCart">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span id="cartCount" runat="server" />
</a>
</li>
and change the code to assign the computed string to the Text property of the cartCount span, this should work.
If having a span inside your link is not desirable, you can use a LiteralControl to keep the result as raw text