We Keep Coding

Passing selected item data to controller from Multilevel dropdown

I have created a multilevel dropdown which is dynamic. When I am clicking the third level item(new, in progress, resolved which are from the database)it should be selected and only when I am clicking the create button that selected item data should be passed to the controller.
multilevel dropdown code
<div class="dropdown drop">
<button class="btn dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-mdb-toggle="dropdown"
aria-expanded="false">
STATUS
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" href="#">
ProjectStatus »
</a>
<ul class="dropdown-menu dropdown-submenu">
#foreach (var i in ViewBag.ProjectStatus)
{
<li>
#*<a id="ProjectStatus" class="dropdown-item" href="#">#i.Text</a>*#
<select asp-for="ProjectStatus" class="form-control" value="#i.Text">#i.Text</select>
</li>
}
</ul>
</li>
<li>
<a class="dropdown-item" href="#">
DevelopmentStatus »
</a>
<ul class="dropdown-menu dropdown-submenu">
#foreach (var i in ViewBag.DevelopmentStatus)
{
<li>
<a class="dropdown-item" href="#">#i.Text</a>
</li>
}
</ul>
</li>
</ul>
</div>
HttpGet create method
public IActionResult Create()
{
ViewBag.ProjectStatus = new SelectList(_context.ProjectStatus, "ProjectStatusID", "Status");
ViewBag.DevelopmentStatus = new SelectList(_context.DevelopmentStatus, "DevelopmentStatusID", "Status");
return View();
}
Need to get the selected list item data to the post method
[HttpPost]
public async Task<IActionResult> Create(Projects ec) {}

You can try to put the selected item value to a hidden input,and then change the background of the <li></li>.Here is a demo:
<div class="dropdown drop">
<button class="btn dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-mdb-toggle="dropdown"
aria-expanded="false">
STATUS
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" href="#">
ProjectStatus »
</a>
<ul class="dropdown-menu dropdown-submenu">
#foreach (var i in ViewBag.ProjectStatus)
{
<li>
<a class="dropdown-item" href='#' onclick='return change("#i.Text",this,"ProjectStatus")'>#i.Text</a>
</li>
}
</ul>
</li>
<li>
<a class="dropdown-item" href="#">
DevelopmentStatus »
</a>
<ul class="dropdown-menu dropdown-submenu">
#foreach (var i in ViewBag.DevelopmentStatus)
{
<li>
<a class="dropdown-item" href='#' onclick='return change("#i.Text",this,"DevelopmentStatus")'>#i.Text</a>
</li>
}
</ul>
</li>
</ul>
</div>
<input id="ProjectStatus" name="ProjectStatus" hidden />
<input id="DevelopmentStatus" name="DevelopmentStatus" hidden />
<script>
function change(text, t, type) {
$("li").css("background", "transparent");
if (type == "ProjectStatus") {
$("#ProjectStatus").val(text);
$("#DevelopmentStatus").val("");
} else {
$("#DevelopmentStatus").val(text);
$("#ProjectStatus").val("");
}
$(t).parent().css("background", "#1266f1");
return false;
}
</script>
When select ProjectStatus,the selected value will be put to $("#ProjectStatus"),and the value of $("#DevelopmentStatus") will be "".When select DevelopmentStatus,the selected value will be put to $("#DevelopmentStatus"),and the value of $("#ProjectStatus") will be "".
result:

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>

Set a page Item Active or Disable with bootstrap 4 pagination, using ASP.NET

I used this code with bootstrap 3, and it worked correctly, when clicking on the page, it appeared as active, but when switching to bootstrap 4, it no longer calls the active class, when I pass the page number inside the "for"
Any ideias how to resolve that?
<ul class="pagination">
<li class="page-item ">
#{
if (ViewBag.pageNumber> 1)
{
<a class="page-link" href="#Url.Action("Index", "Barcos", new { search= ViewBag.Search, pageNumber= ViewBag.pageNumber- 1 })">before</a>
}
else
{
<a class="page-link" href="#">
before
</a>
}
}
</li>
#{
var page = ViewBag.pageNumber;
for (var i = 1; i <= ViewBag.Count; i++)
{
<li #(page== i ? "class=page-item active" : "")>
<a class="page-link" href="#Url.Action("Index", "Barcos", new {search= ViewBag.Search, pageNumber= i})">#i</a>
</li>
}
}
<li>
#if (ViewBag.pageNumber< ViewBag.count)
{
<a class="page-link" href="#Url.Action("Index", "Barcos", new { Search= ViewBag.Search, pageNumber= ViewBag.pageNumber+ 1 })">Next</a>
}
else
{
<a class="page-link disabled" href="#">
Before
</a>
}
</li>
</ul>

You need class="page-item" on all list items, not just for your current page
Corrected bode below.
#for (var i = 1; i <= ViewBag.Count; i++)
{
var page = ViewBag.pageNumber;
string classes = "page-item";
if (page == i)
{
classes += " active";
}
<li class="#classes">
#Html.ActionLink(i.ToString(), "Index", "Barcos", new { search = ViewBag.Search, pageNumber = i }, new { #class = "page-link" })
</li>
}
This generates the following HTML
<ul class="pagination">
<li class="page-item ">
<a class="page-link" href="/Barcos/Index?pageNumber=1">before</a>
</li>
<li class="page-item">
<a class="page-link" href="/Barcos/Index?pageNumber=1">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="/Barcos/Index?pageNumber=2">2</a>
</li>
<li class="page-item">
<a class="page-link" href="/Barcos/Index?pageNumber=3">3</a>
</li>
<li>
<a class="page-link" href="/Barcos/Index?pageNumber=4">Next</a>
</li>
</ul>

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

Bootstrap glyphicon not showing

I am new to the ASP environment and I am building an application using Visual Studio 2013 with Bootstrap V.3.0.0.
I have this for the Site.Master:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/"><span class="glyphicon glyphicon-home"></span>Home</a></li>
<li><a runat="server" href="~/ProducersList"><span class="glyphicon glyphicon-user"></span>Producers</a></li>
<li><a runat="server" href="~/BeatsList"><span class="glyphicon glyphicon-music"></span>Beats</a></li>
<li><a runat="server" href="~/License"><span class="glyphicon glyphicon-file"></span>License</a></li>
<li><a runat="server" href="~/About"><span class="glyphicon glyphicon-info-sign"></span>About</a></li>
<li><a runat="server" href="~/Contact"><span class="glyphicon glyphicon-pencil"></span>Contact</a></li>
<li><a runat="server" href="~/ShoppingCart" id="cartCount"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
</ul>
Code behind Site.Master for Cart::
protected void Page_PreRender(object sender, EventArgs e)
{
using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions())
{
string cartStr = string.Format("Cart ({0})", usersShoppingCart.GetCount());
cartCount.InnerText = cartStr;
}
}
All the glyphicons show except the last one, glyphicon-shopping-cart. What do I change to get it to show?

Your icon disappears because you are replacing the whole content of your cartCount hyperlink with the item count: MSDN tells that
Assigning a value to InnerText will destroy any child elements that
belong to the element.
So your <span class="glyphicon glyphicon-shopping-cart"></span> doesn't survive the InnerText assignation. What you could rather do is to place the cart count inside your wrapping hyperlink:
<li>
<a href="~/ShoppingCart">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span id="cartCount" runat="server" />
</a>
</li>
and change the code to assign the computed string to the Text property of the cartCount span, this should work.
If having a span inside your link is not desirable, you can use a LiteralControl to keep the result as raw text