Develop Reference

How to refresh div content without loosing the angularJS scope?

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.

How can I disable a navbar link after I push a button and successfully redirect to another page?

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.

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

Simple Razor C# .Net form: Checkboxes and Session Variable settings

First, I want to explain I do not know any Razor or C#. I have a client that I build out high-fidelity prototyping for. Some of the elements are getting kind of advanced where JavaScript is not working for me anymore.
The Ask:
I have a modal that I trigger (using bootstrap), this modal has some checkboxes in a form. Each checkbox will trigger to turn on or turn off a session that will turn certain elements on or off on a series of 5-6 pages. Here I am just working with one of those sessions. I can duplicate once I figure this out. Any help will be greatly appreciated.
Code:
#{
if (Request.Form["fitscorechecked"] != null && Request.Form["fitscorechecked"] == "on") {
Session["fitscore"] = "on";
} else {
Session["fitscore"] = "off";
}
}
My Form:
<form method="post">
<div class="row">
<div class="col-sm-12 bottom5"><input type="checkbox" id="fitscorechecked" name="fitscorechecked" value="true"/> Show fit score during adjustment</div>
<div class="col-sm-12 bottom5"><input type="checkbox" id="Anonymous" name="Anonymous" value="true" /> Make contributors anonymous</div>
<div class="col-sm-12 bottom5" data-toggle="tooltip" data-html="true" title="<h5>Advanced Options</h5><h6>Will allow you to view related tasks, manually adjust patterns (power users only), and the ability to download responses.</h6>">
<input type="checkbox" id="Advanced" name="Advanced" value="true" /> Show advanced options</div>
</div>
<div class="prototype-btngroup-center">
<a class="btn btn-default prototype-btn-spacersm" data-dismiss="modal">Cancel</a>
<a class="btn btn-primary" type="submit" value="submit" href="#stepAlign6" data-toggle="tab" data-step="5" data-dismiss="modal">Begin Alignment</a>
</div>
</form>
<form>
I have never built a form in .net so I am really lost. I just need something very simple that does not use controllers. Much of this code is show and then redone based on the updates from the product team, so something that is simple and easy to adjust.