Develop Reference

How to send data from a bootstrap menu item to an ASP.NET MVC controller

I have a bootstrap menu in a c# web application. The menu looks like this:
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">realestate</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Newquestion" asp-action="Index">Add New Questions</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Chapter
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Question" asp-action="Index">Salesperson questions - Chapter 1</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
I have a controller called QuestionController.cs which gets control when the user clicks on dropdown and selects the menu option for "Salesperson questions - Chapter 1". This all works perfectly fine.
If I want to add another menu option, say "Salesperson questions - Chapter 2", can I use the same controller? I would want to pass a piece of data to the controller so the controller knows which menu option was selected. I am looking to do something like this:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Question" asp-action="Index(0)">Salesperson questions - Chapter 1</a>
<a class="dropdown-item" asp-controller="Question" asp-action="Index(1)">Salesperson questions - Chapter 2</a>
</div>
So in the above code, if the user selected the Chapter 1 option, a value of 0 would be passed to the controller. If the user selected the Chapter 2 option, a value of 1 would be passed to the controller.
Is this possible?

try like this:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Question" asp-action="Index" asp-route-id="0">Salesperson questions - Chapter 1</a>
<a class="dropdown-item" asp-controller="Question" asp-action="Index" asp-route-id="1">Salesperson questions - Chapter 2</a>
</div>
Catch the id in your action like this:
public IActionResult MyAction(int? id)
{
//do something with that id
}
You can put whatever instead of id. but you have to catch with that variable name in that action. Suppose you can use asp-route-name="john". than you have to catch name in that action.
if you have matching route for name than the url would be like this
controller/action/john
but if it does not match the route defined in the startup then it would wrapped into query parameter like this
controller/action?name=john
In case of query param you have to catch your variable like this
public IActionResult YourAction([FromQuery(Name = "name")] string name)
{
// do whatever with that name
}
for more details https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/anchor-tag-helper?view=aspnetcore-6.0#asp-route-value

try this
<a class="dropdown-item" asp-controller="Question" asp-action="Index" asp-route-id="1"> Salesperson questions - Chapter 1 </a>
<a class="dropdown-item" asp-controller="Question" asp-action="Index" asp-route-id="2"> Salesperson questions - Chapter 2 </a>

I believe this is what you are looking for, passing route value
<a asp-controller="Employee"
asp-action="Index"
asp-route-id="#Model.Id">EmployeeId: #Model.Id</a>
Or passing static value to action
<a asp-controller="Question"
asp-action="Index"
asp-route-id="1">Menu Item 1</a>

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.

Bootstrap layout change in angular5/MVC

I had written as part of my app a basic Menu which went horizontal across the top of the page and was in my _Layout.cshtml file. This was originally in .Net Core 1.1 with Angular 2. I'm also using a theme from Bootswatch.
I upgraded my app to .Net Core 2 and Angular 5 and also moved to Webpack. I upgraded bootstrap to version 4. Now when I run the same piece of code the menu is to the left and goes vertically. Here's my original code, what do I need to do to make this top and horizontal again.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">My Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact t</a></li>
</ul>
#await Html.PartialAsync("_LoginPartial")
</div>
</div>
</div>

Ok,the issue is that webpack does not recognise bootswatch v4. In my Packages.json file I needed to ensure that both bootstrap and bootswatch were at version 3.3.7. Then in the non-shakable tree values in the webpacks config file I just needed to make a reference to bootwswatch/{theme that I want}/bootstrap.css there is no need to download the theme from the bootswatch site.

C# ASP.NET Need some idea on how to turn this hardcoded HTML Item boxes into Item info that I can took from the DB

I am creating a website that looks like eBay and I got some HTML template which I think I can use to integrate into the ASPX
However, I needed some help with this part,
If you look at the picture, you can see there are four boxes that include item
This is the html code
<div class="ltabs-item product-layout">
<div class="product-item-container">
<div class="left-block">
<div class="product-image-container second_img ">
<img src="image/demo/shop/resize/J5-270x270.jpg" alt="Apple Cinema 30"" class="img-responsive" />
<img src="image/demo/shop/resize/J9-270x270.jpg" alt="Apple Cinema 30"" class="img_0 img-responsive" />
</div>
<!--Sale Label-->
<span class="label label-sale">-15%</span>
<!--full quick view block-->
<a class="quickview iframe-link visible-lg" data-fancybox-type="iframe" href="quickview.html">Quickview</a>
<!--end full quick view block-->
</div>
<div class="right-block">
<div class="caption">
<h4>Cupim Bris</h4>
<div class="ratings">
<div class="rating-box">
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
</div>
</div>
<div class="price">
<span class="price-new">$50.00</span>
<span class="price-old">$62.00</span>
</div>
</div>
<div class="button-group">
<button class="addToCart" type="button" data-toggle="tooltip" title="Add to Cart" onclick="cart.add('42', '1');"><i class="fa fa-shopping-cart"></i><span class="">Add to Cart</span></button>
<button class="wishlist" type="button" data-toggle="tooltip" title="Add to Wish List" onclick="wishlist.add('42');"><i class="fa fa-heart"></i></button>
<button class="compare" type="button" data-toggle="tooltip" title="Compare this Product" onclick="compare.add('42');"><i class="fa fa-exchange"></i></button>
</div>
</div>
<!-- right block -->
</div>
</div>
Basically when you look at the code, everything is hard coded, what I wanted to do is that every time the page loads, the item info will be taken from the DB and code-behind will supply the information then parse into that field.
How should I do that?

Take a look into this tutorial. https://www.tutorialspoint.com/asp.net/

To show your c# page with dynamic content,you should update your static HTML page with scripting language to get data from database and update UI
AngularJS is one of the Java script framework to create page with dynamic content

I assume you are developing with ASP.NET Web Forms as you mention ASPX files. If that is the case then you can use the runat = "server' attribute for the desired HTML elements. This way you can interact with them from your backend code. More on ASP.NET Web Forms and on HTML Server Controls and runat = "server" attribute

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