I have a table with list of items on a "List Page". Then when you select "View Detail" link on a row it should show the detail of that row item in a child "Detail Page".
Home
ListPage (I want to keep this Active)
DetailPage (This is not on the Menu since it's child page of ListPage)
List Page
Id
Title
Action
1
My Item 1
View Detail
2
My Item 2
View Detail
Currently my Blazor Menu looks like this:
Menu
Home
List Page
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> #Loc["Home"]
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="ListPage">
<span class="oi oi-list-rich" aria-hidden="true"></span> #Loc["ListPage"]
</NavLink>
</div>
How do I keep the highlight of "List Page" on the menu when we go to the "View Detail" sub page in the table of List Page?
The default for <NavLink... does the this. It is the point of the Match parameter wich defaults to NavLinkMatch.Prefix if omitted. If your route is #page "/ListPage" then your child pages should use the route #page "/ListPage/{SomeParameter}" or similar. NavLink will then work as the route starts with "/ListPage".
NavLink Source Code
Related
i have a blazor page where i load table data depending on the data passed from the other page through the link.
the page route is defined as this #Page/approvals{tablename}
from the other page i have the links
<li class="nav-item">
<a href="approvals/customer_visitation" class="nav-link" >
<i class="far fa-circle nav-icon"></i>
<p>Customer Visitation</p>
</a>
</li>
<li class="nav-item">
<a href="approvals/mapping" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Mapping</p>
</a>
</li>
when i run the app and click anyone first it works well. but Navigating to the second one from the first on does not work. it shows an empty page.
my question is how do i use one page and have multiple links to that page with passed parameter?
I'm trying to select a HTML drop-down option through c# however Im not sure where to start. Could someone give a basic example.
Thanks in advance
Edited: This drop down I'm selecting is on someone's web page off the internet.
Edited: Below is the html on the webpage:
The drop down menu that contain "Ratings Data Upload" is what I am after to select.
<li class="dropdown ">
<a class="dropdown-toggle" role="button" aria-expanded="false" aria-haspopup="true" href="#" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="">
Ratings Data Upload
</li>
There is a great browser automation framework called Selenium. Your next step should be using tutorials or online training content to learn Selenium (or another tool).
Selecting a drop down value with Selnium is as easy as:
Select objSelect =new Select(driver.findElement(By.id("search-box-id")));
objSelect.selectByVisibleText("Name of option shown to user");
I create a nested layout in blazer.
blazor route to one of the navigation menus, and there is another menu in it.
When I click the navigation menu, it is routed to a specific page,
There is another menu on the routed page.
Clicking that menu loads the newly routed page in the nested layout.
However, clicking the topmost menu again loads the top route into the innermost layout.
Here is my code.
MainLayout.razor:
#inherits LayoutComponentBase
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
About
</div>
<div class="content px-4">
#Body
</div>
</div>
NavMenu.razor:
<li class="nav-item px-3">
<NavLink class="nav-link" href="sub">
<span class="oi oi-list-rich" aria-hidden="true"></span> Sub
</NavLink>
</li>
SubMenu.razor:
#page "/sub"
#layout MainLayout
#inherits LayoutComponentBase
<h3>SubLayout</h3>
<div style="width:20%">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
<span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
</NavLink>
</li>
</ul>
</div>
<div style="width: 40%; height:40%; border:solid red">
#Body
</div>
Mypage.razor:
#page "/sub/mypage"
#layout SubLayout
<div >
<h3>This is Mypage</h3>
</div>
This is the execution result:
Why is the page in the top navigation menu loaded into the sublayout?
Is there any way to prevent this?
Without seeing your SubLayout you are specifying in Mypage.razor I think the issue is that your trying to use a routable component as a layout. I basically just separated these.
SubMenu.razor
#page "/sub"
<SubLayout />
SubLayout.razor
Note the nesting by specifying #layout MainLayout
#layout MainLayout
#inherits LayoutComponentBase
<h3>SubLayout</h3>
<div style="width:20%">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
<span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
</NavLink>
</li>
</ul>
</div>
<div style="width: 40%; height:40%; border:solid red">
#Body
</div>
Docs are here
Friends,
I need help changing the default icons in Blazor.
Inside your project go to: Pages-> Shared -> NavMenu.razor and look for the following code:
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
Change the span class value to replace the icons.
I have 3 tabs in my Page and I used JQuery UI for tabs.
<div id="tabs" style="text-align:right;">
<ul>
<li class="myTab">
Main Information</li>
<li class="myTab"><a href=<%= Url.Action("GetPartialView","Contractors") %> >Contractors</a></li>
<li class="myTab"> Consultants </li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
There is a "Save" button in each tab.The problem is that when for example button "Save" of contractors tab was clicked the page redirect to http://localhost:1347/xxxxx/GetPartialView and didn't fire any method.I want to save data and show user a message that shows data was saved completely.How can I do it?
Do you have the [HttpPost] attribute on top of whatever action is being called to load that page?