Develop Reference

Is there a way for Blazor to stop auto closing html tags?

I'm trying to create some dynamic html with Blazor. Essentially I want a bootstrap(5.1) nav tab with a number of generated nav tabs created via a for loop
Code Below:
#:<ul class="nav nav-tabs" id="myTab" role="tablist">
#foreach(var tab in navTabs)
{
<li class="nav-item" role="presentation">
<button class="nav-link" id="example" data-bs-toggle="tab" data-bs-target="#example" type="button" role="tab" aria-controls="Example" aria-selected="true">Tab</button>
</li>
}
#:</ul>
The ul tag on the first line seems to be auto closed so the li tags never get added to the nav tab.. I've also tried MarkupString.

If you want to add <ul></ul> to html,and use tab as content of buttons.You can try this:
<ul class="nav nav-tabs" id="myTab" role="tablist">
#foreach(var tab in navTabs)
{
<li class="nav-item" role="presentation">
<button class="nav-link" id="example" data-bs-toggle="tab" data-bs-target="#example" type="button" role="tab" aria-controls="Example" aria-selected="true">#tab</button>
</li>
}
</ul>

You have 3 separate lines which break to HTML so the compiler will close the element.
#:#{
<ul class="nav nav-tabs" id="myTab" role="tablist">
#foreach(var tab in navTabs)
{
<li class="nav-item" role="presentation">
<button class="nav-link" id="example" data-bs-toggle="tab" data-bs-target="#example" type="button" role="tab" aria-controls="Example" aria-selected="true">Tab</button>
</li>
}
</ul>
};
If your generating render fragments in the #code section why not just make them separate components you can conditionally use.

Error : Failed to execute 'querySelector' on 'Document' when attempting to click menu options when in a tab

I am working on a application which uses a UI that i purchased (One UI).
Everything is fine except that when I enter different tabs of my project clicking items on the tab will generate the following errors.
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/ALLDetails' is not a valid selector.
at Object.getSelectorFromElement (http://localhost:57386/Content/assets/js/oneui.core.min.js:6:87640)
Now various searches on stackoverflow suggest this can occur depending on how the page is called and can be fixed by adding data-toggle="#". However this did not solve my problem.
<li class="nav-main-item">
<a class="nav-main-link nav-main-link-submenu" data-toggle="submenu" aria-haspopup="true" aria-expanded="false" href="#">
<i class="nav-main-link-icon si si-wrench"></i>
<span class="nav-main-link-name">Projects</span>
</a>
<ul class="nav-main-submenu">
<li class="nav-main-item">
<a class="nav-main-link" href=#Url.Action("Edit","AllDetails")>
<span class="nav-main-link-name">Add New Project</span>
</a>
</li>
<li class="nav-main-item">
<a class="nav-main-link" href=#Url.Action("Index","AllDetails")>
<span class="nav-main-link-name">My Projects</span>
</a>
</li>
<li class="nav-main-item">
<a class="nav-main-link" data-target="#" href=#Url.Action("SubmittedProp","AllDetails")>
<span class="nav-main-link-name">Submitted Projects</span>
</a>
</li>
</ul>
</li>
Above is the code for one of my menus, it is saved as a partial view and added to my main layout shown below.
<div class="content-side content-side-full">
<ul class="nav-main">
<li class="nav-main-item">
<a class="nav-main-link" href=#Url.Action("Index","Home")>
<span class="nav-main-link-name">Dashboard</span>
</a>
</li>
<li class="nav-main-heading">All Details</li>
<li>
#Html.Partial("_disMenu")
</li>
<li class="nav-main-heading">Parameters</li>
<li>
#Html.Partial("_disPara")
</li>
<li class="nav-main-heading">Logout</li>
<li>
#using (Html.BeginForm("Logoff", "Account", FormMethod.Post, new { id = "logoutForm", #class = "nav navbar-nav navbar-right" }))
{
#Html.AntiForgeryToken()
}
<li>
Logoff
</li>
</ul>
</div>
I must again stress that the menu works fine on the home or any other pages but only fails and thows the error when I have entered tabs.
Any assistance will be greatful and please inform me If there is code i have not posted that should be.
Regards.

<li> dropdown not properly formatted

I'm going to insert a language to my MVC 5 project.In UI part i need to add languge dropdowns sections,In my Original theme HTML code shows like this,
<div id="lang_sel">
<ul>
<li>
<a class="lang_sel_sel icl-en" href="#">EN</a>
<ul>
<li class="icl-fr">
FR
</li>
<li class="icl-de">
DE
</li>
<li class="icl-nl">
NL
</li>
</ul>
</li>
</ul>
</div>
Then for my requirement i change it to the following code,
<div id="lang_sel">
<ul>
<li>
<a class="lang_sel_sel icl-en" href="#Url.LangSwitcher("English", ViewContext.RouteData, "en")">EN</a>
<ul>
<li class="icl-fr">
Italy
</li>
</ul>
</li>
</ul>
</div>
In here my dropdown not correctly created.

i think that you should escape some quotes as this line:
Italy
will make the link url as #Url.LangSwitcher(
and sorry, this should be a comment, but formatting this in the comment is a chore

transfer value from master page to another master page

i want to know if it is possible to transfer a value from a master page to anotehr master page? i want to transfer my "Name" value to the next masterpage. images shown below
the name "Jedi Ablaza" will be transffered into the next master page
and my code for my first master page
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/" style="color: white">Home</a></li>
<li id="forHR" runat="server" class="dropdown">
<a id="hr" class="dropdown-toggle" runat="server" data-toggle="dropdown" href="#" style="color: white">HR</a>
<ul class="dropdown-menu">
<li>Core Values</li>
<li>Rater & Employee Relation</li>
</ul>
</li>
<li>
<a id="toMosef" runat="server" href="MOSEF/WebForm1.aspx" style="color: white">MOSEF</a>
</li>
to the highlighted portion of the new masterpage.
how can I do that? thanks!

Use Sessions.
Assign to the session:
Session["username"] = txtusername.text;
retrieve from the session:
string username = Session["username"].toString();

Treeview (nested dropdown) menu is not expanded on page reload bootstrap mvc4

I'm trying to implement a treeview menu in my application and everything works fine except that once I click on an item in the expanded list, the reloaded page loads with the contracted list, which makes navigation difficult for users.
What could be causing this? Is it the Html.Actionlink in my code? My code from the menu is below.
Please explain what can be done here. Thanks in advance.
<li class="treeview">
<a href="#">
<span>Leave Management</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="#Html.IsActive("Leave", "Index")">#Html.ActionLink("My leave Information", "Index", "Leave")</li>
<li class="#Html.IsActive("Leave", "NewLeaveRequest")">#Html.ActionLink("New Leave Request", "NewLeaveRequest", "Leave")</li>
<li class="#Html.IsActive("Leave", "Approve")">#Html.ActionLink("Approvals", "Approve", "Leave")</li>
<li class="#Html.IsActive("Leave", "EmpLeaveInfo")">#Html.ActionLink("Employee Leave Information", "EmpLeaveInfo", "Leave")</li>
</ul>
</li>

<div class="container">
<div class="row">
<div class="col-sm-3">
<nav>
<ul class="nav">
<li>Home</li>
<li>
Leave Management
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>#Html.ActionLink("My leave Information", "Index", "Leave")</li>
<li>#Html.ActionLink("New Leave Request", "NewLeaveRequest", "Leave")</li>
<li>#Html.ActionLink("Approvals", "Approve", "Leave")</li>
<li>#Html.ActionLink("Employee Leave Information", "EmpLeaveInfo", "Leave")</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
http://www.bootply.com/uBoT3zP1P2

Here is a working example with data source BootStrap TreeView
http://bootply.com/60761
A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View)
https://github.com/jonmiles/bootstrap-treeview