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.
Related
Hi I've a comment section, where I've defined some angular scope like ng-show and ng-hide, now everytime when I post a new comment, I need to show in that comment section div, so I'm refreshing the div using the following code -
$("#comment-section").load(window.location.href + " #comment-section");
but by doing this all the defined angularjs scope is not working.
Here's my screenshot -
after posting comment,
My code -
//other code
<div id="comment-section">
<div ng-show="(commentMenu=='show_#item.Id')" class="more float-right align-items-end dropdown">
<button type="button" id="more-comment-btn_#item.Id" class="more-vertical-btn dropdown-custom-toggle" data-toggle="dropdown">
<span class="more-vertical-dot"></span>
<span class="more-vertical-dot"></span>
<span class="more-vertical-dot"></span>
</button>
<ul class="dropdown-menu-left dropdown-menu" style="transform: translate3d(-48px, 31px, 0px);">
<li><a class="dropdown-item" href="javascript:void(0);" ng-click="ShowEdit='editComment_#item.Id'"><i class="fa fa-pen"></i> Edit</a></li>
<li><a class="dropdown-item" href="javascript:void(0);" ng-click="DeleteComment('#item.Id');"><i class="fa fa-trash"></i> Delete</a></li>
</ul>
</div>
</div>
// other code
Please guys, I'm stuck here, a help will be appreciated.
I'm working on a project and I need to disable a navbar link after I push a button that redirects me to another page if the post request was successful.
How can I have access to the navbar link, do I need to use css selectors, I'm planning to on using jquery to disable it, but I don't know how can I select it from another file, because my script is in my Index.html, and I have to have access to the _Navbar.html
//This is my _Navbar.html page. I want to disable the Contact page after a button has been pressed.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-page="/Index">Home</a></li>
<li><a asp-page="/About">About</a></li>
<li><a asp-page="/Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
//I tried to css selectors from the Index.html, but it doesnt work.
The _Navbar.html content is part of the DOM so you should be able to access it from a script, regardless of which file it is called from.
The link items don't have unique IDs - in theory you could look for the nth-child of 'navbar-nav' if 'Contact' is always going to be in a consistent position, but that is an anti-pattern that will give you a headache in the future if it ever moves.
The easy solution, give each link item an ID, and you can select and hide as needed.
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
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
I created an empty MVC4 web application project in VS2012. I then installed the http://www.nuget.org/packages/twitter.bootstrap.mvc4.sample/ nuget package. However when I run the sample application, I cannot see any of the navigation menu items in the navbar. I can only see the "Application Name" link. The other items ("Automatic Scaffolding", nested "Example Layouts" dropdown navigation menu) are hidden.
Do I need to modify the cshtml or less files in some way to get these items to display in the sample application?
I modified the cshtml markup in the _BootstrapLayout.basic.cshtml file to get the navigation bar items to display correctly. I used the fixed top navbar example from http://getbootstrap.com/examples/navbar-fixed-top/ as a guide.
Original (Not Working) Code:
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" title="change in _bootstrapLayout.basic.cshtml">Application Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
#Html.Navigation()
</ul>
</div>
</div>
</div>
</div>
New (Working) Code:
<div class="navbar navbar-default 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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#Html.Navigation()
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Result: