We Keep Coding

How to make a dropdown menu in Blazor

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()
{
}
}

integrating bootstrap classes to have a dropdown list using the Html.ActionLink

trying to make a drop once click on the html action, works with anchor tag
As per below it works with
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<p>Testing<span class="dropdown-toggle"></span> </p>
</a>
<div class="collapse" id="auth">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/login.html"> Home 1 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/login-2.html"> Home 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/register.html"> Home 3 </a></li>
</ul>
</div>
</li>
working with tag
as per below does not work.\
<li class="nav-item dropdown" id="User">
<i class="fas fa-user-edit " style="margin-left: 30px;margin-top: 6px;"> </i>
#Html.ActionLink("User Management", "Index", "Users", null, new { #class = "nav-link dropdown-toggle", data_toggle = "dropdown", aria_expanded = "false" })
<div class="collapse">
<ul class="nav flex-column sub-menu">
<li>
<a class="nav-link">Home 1</a>
</li>
<li>
<a class="nav-link">Home 2</a>
</li>
<li>
<a class="nav-link">Home 3</a>
</li>
</ul>
</div>
</li>

Selenium webdriver C# hyperlink selection with css selector

<div id="welcome-menu" class="panelContainer" style="display: block;">
<ul>
<li>
About
<div class="modal hide" id="displayAbout">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>About</h3>
</div>
<form name="frmSelectEmployees" id="frmSelectEmployees" method="post" action="/index.php/communication/beaconAboutAjax" enctype="multipart/form-data">
<div class="modal-body">
<div id="companyInfo">
<ul>
<li>
<p>Company Name: OrangeHRM (Pvt) Ltd</p>
</li>
<li>
<p>Version: Orangehrm OS 3.3.1</p>
</li>
<li>
<p>Active Employees: 9</p>
</li>
<li>
<p>Employees Terminated: 0</p>
</li>
</ul>
</div>
</div></form>
</div></li>
<!-- <li></li> -->
<li>Logout</li>
</ul>
</div>
Any one knows how to select element with :
<li> Logout </li>.
I have tried following option :
[FindsBy(How = How.CssSelector, Using = "a[href*='/index.php/auth/logout']")]
Also tried link text and tag name. nothing is working. Anyone can help please? thanks

As per the HTML you have shared to identify the element you can use either of the following line of code :
linkText :
[FindsBy(How = How.LinkText, Using = "Logout")]
CssSelector :
[FindsBy(How = How.CssSelector, Using = "li > a[href='/index.php/auth/logout']")]

Change <li> class to active when page is loaded

I'm having a hard time to make <li> class to active when page is loaded. Here's my scenario I copied a sample Dropdown in a certain website to integrate it in my website. I'm using C# Asp.Net
_Layout.cshtml
<body>
<div id="header">
#Html.Partial("_HeaderPartial")
</div>
<!--SIDEBAR Navigation-->
<aside id="menu">
// The Dropdown
#Html.Partial("_SidebarPartial")
</aside>
<div id="wrapper">
#RenderBody()
<footer class="footer">
#Html.Partial("_FooterPartial")
</footer>
</div>
<div id="right-sidebar" class="animated fadeInRight">
#Html.Partial("_RightSidebarPartial")
</div>
</body>
_SidebarPartial
<ul class="nav" id="side-menu">
<li>
<span class="nav-label">Dashboard</span>
</li>
<li>
<span class="nav-label">Analytics</span>
</li>
<li>
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
<li>
<span class="nav-label">App views</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Contacts</li>
<li>Projects</li>
<li>Project detail</li>
<li>App plans</li>
<li>Social board</li>
</ul>
</li>
<li>
<span class="nav-label">Charts</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>ChartJs</li>
<li>Flot charts</li>
<li>Inline graphs</li>
</ul>
</li>
<li>
<span class="nav-label">Box transitions</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li><span class="label label-success pull-right">Start</span> Overview </li>
<li>Columns from up</li>
</ul>
</li>
</ul>

As I commented, here is a small example with an id attribute on the list:
<ul class="nav" id="side-menu">
<li id="interfaces">
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
</ul>
And then you could add the following line to the document.ready function:
$("#interfaces").attr("class", "active");

Check this out. This will also help you
just write the following code inside document.ready function
$('#interfaces').addClass('active');
Cheers

how to get the element a if its href has no contents, in selenium C#

HTML:
<li class="dropdown current-user" dropdown="" on-toggle="toggled(open)">
<a aria-expanded="false" aria-haspopup="true" href="" class="dropdown-toggle" dropdown-toggle="">
<img src="assets/images/avatar-1.jpg"alt="{{user.FirstName}}">
<span class="username">
{{user.FirstName}} <i class="ti-angle-down"> </i> </i>
</span>
</a>
</li>
<ul>
<li>
<a href="Account/LogOff" ng-href="Account/LogOff">
Log Out
</a>
</li>
</ul>
Now in my site, i need to click on link which has another sub links like profile, log out etc. how to find that super link and than click on sublink.

Try this
IJavaScriptExecutor js = driver as IJavaScriptExecutor;
//Scroll the element into view
string title = (string)js.ExecuteScript("return document.getElementsByTagName('a')[1].scrollIntoViewIfNeeded()");
//Now, execute findElement
driver.FindElement(By.XPath("//a[#href='']/following::a"));