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
Related
this is my first question, so hopefully I won't screw it.
This is .net framework 3.5
The MasterMenu.ascx has a navbar list and each item redirects to a specific url. And each item from the list has an ID.
What I'm (unsuccessfully) trying to do is, given the URL, get the ID of the item who send it there.
I.E. (MasterMenu.ascx):
<div id="navbar" class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown" id="DropDownPF” runat="server" visible="false"><a id="A2" role="button" data-toggle="dropdown">PF<span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li visible="false" id="DropDepositSSN" runat="server">Deposit </li>
<li visible="false" id="DropPFSSN" runat="server">Check</li>
<li visible="false" id="DropInterfaceSSN" runat="server">Interface</li>
</ul>
</li>
When I get the current path, lets say
~/Check.aspx
I want a method that returns the id of the item:
DropPFSSN
Thanks in advance!
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.
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.
I have a Main View and Two Partial Views.Main Views Consist of Navigation Links.
PartialViews1 Consist a Button and I need when button click it need to shows the PartialView2
PartialView1 has a Button and when i click the button i need to PartialView2(Shoe PartialView2)
Main View
<div class="container my-3">
<div class="card">
<div class="card-header bg-white border-bottom flex-center p-0">
<ul class="nav nav-pills card-header-pills main-nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#">CART</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)"><i data-feather="arrow-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DELIVERY</a>
</li>
</ul>
</div>
<div class="card-body px-1 px-md-5 pt-5">
#Html.Partial("_PartialView1")
#*#Html.Partial("_PartialView2)*#
</div>
</div>
</div>
PartialView1
//Some code here
Delivery<i data-feather="arrow-right"></i>
Jquery
$("#iddelivery").click(function(){
});
Write an action and return PartialView2, write a function to ajax call to that action
As mentioned there are many ways to do it.
If you don't want to reload/refresh the page with new content the easiest way is to create an ActionResult in your controller and return a partial view.
in your jQuery function the first thing you need to do is to call the preventDefault function to prevent any default action on your button. the next thing is to make a ajax call and receive the view-content from your controller. then you can replace the content of your div with the result you got from controller.
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