Develop Reference

Stop the navigation bar from refreshing - Umbraco

I couldn't find anything regarding my issue so I decided to post one myself.
I am using a navigation bar that has dropdown menu's. Whenever I open the dropdown and navigate to one of those pages, the navigation refreshes and closes the dropdown menu. The dropdown menu needs to stay open when I go over to one of the pages, I tried Model.Content.AncestorOrSelf().Descendants("document") to try and keep the navigation bar from refreshing but that doesn't seem to work (as people said).
Here's my menu structure:
Everything underneath "Hulp per browser" is in a dropdown and will disappear when I click on "Hulp per browser" again.
Here is my code:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<div class="col-sm-3">
<div class="NavDigiCampuz">
<h3>Helpcentrum</h3>
<li class="NoBullet"><a class="NormalA" href="https://digicampuz.nl/">Terug naar digicampuz</a></li><br>
<ul class="nav nav-list tree">
#{
var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
}
#foreach(var item in Model.Content.AncestorOrSelf(2).Descendants("document").ToList()){
foreach (var ItemChild in #item.Children("categorieMenu")){
if(ItemChild.Children.Any())
{
<li class="MenuItems"><p>#ItemChild.Name</p></li>
foreach (var Subitem in #ItemChild.Children){
if (Subitem.Children("hoofdstuk").Any())
{
<li class="item">
#if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
<a class="NormalA aNav" href="#"><i class="fa fa-#(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> #Subitem.Name <i id="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a>
}else{
<a class="NormalA aNav" href="#">#Subitem.Name <i id ="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a>
}
#foreach (var Finalitem in #Subitem.Children){
<ul class="submenu">
#if(Finalitem.GetPropertyValue("hoofdstukIcoon") != "") {
<br><li><a class="NormalA aNav" href="#Finalitem.Url"><i class="fa fa-#(Finalitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i>#Finalitem.Name </a></li>
}else{
<br><li><a class="NormalA aNav" href="#Finalitem.Url">#Finalitem.Name</a></li><br>
}
</ul>
}
</li>
}else
{
if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
<li><a class="NormalA aNav" href="#Subitem.Url"><i class="fa fa-#(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> #Subitem.Name</a></li>
}else{
<li><a class="NormalA aNav" href="#Subitem.Url">#Subitem.Name</a></li>
}
}
}
}
}
}
</ul>
</div>
</div>
<script>
$(".item").click(function(){
$(this).children(".submenu").toggle(); //it will display or hide your submenu when clicking the item.
});
</script>
<style>
.submenu{
display: none;
list-style:none;
}
</style>
I do plan on removing the script and style from the page when everything works.

First thing you have several issues in the code:
Remove the Where to filter Children and keep it like var selection = Umbraco.TypedContent(documentRootNodeId).Children("Visible");
Cast your hoofdstukIcoon to string Subitem.GetPropertyValue<string>("hoofdstukIcoon")
The first <li class="noBullet"> should be in your nav-list, not outside.
You shouldn't put <br> between your list items, if you want margins use css.
Now we'll focus on your issue with the submenus. What you are doing with your javascript is just using the display property to hide or show your submenu but when the page is rendered, Razor has no idea if that should be hidden or not. To solve this you have to create a new class like .visible that can be used by Razor and Javascript.
Yous hould also move your <ul class="submenu"> out of your #foreach (var Finalitem in Subitem.Children) because what you are doing now is creating a new list with one item for each one.
You should also include a conditional before your submenu in case there a no children and we don't want submenu #if (Subitem.Children.Any()) {
The way of telling your submenu with Razor if it has to diplay or not is doing this:
var isVisible = Model.Content.IsDescendantOrSelf(Subitem) ? "visible" : "";
<ul class="submenu #isVisible">
So in that example your submenu will show if the current page is this Subitem or one of its children.
And your JS script would become this:
$(".item").click(function () {
$(this).children(".submenu").toggleClass('visible'); //it will display or hide your submenu when clicking the item.
});
And your CSS this:
<style>
.submenu {
display: none;
list-style: none;
}
.submenu.visible {
display: block;
}
</style>

Using Angular 2 to return HTML from C#/.NET service

I have an existing .NET application that I want to update to use an Angular 2 front-end. There is a section of a page that has dynamic content and every time I want to get the most up-to-date content, I currently use jquery similar to this:
$.get("/Plan/Variety/VarietyList")
.done(function (data) {
PlaceReturnedData($("body"), data, "variety-list-selling");
});
The data returned is the exact HTML I need, no need to manipulate it.
How can I use Angular 2 to return this same data? I've looked around and only see how to handle JSON data, such as the example below from Angular 2's Tour of Heroes tutorial:
heroes.component.ts:
heroes: Hero[];
selectedHero: Hero;
constructor(
private router: Router,
private heroService: HeroService
) { }
getHeroes(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
ngOnInit(): void {
console.log('initializing MenuVarietiesComponent');
this.getHeroes();
}
hero.service.ts
#Injectable()
export class HeroService {
private heroesUrl = 'app/heroes'; // URL to web api
private headers = new Headers({'Content-Type': 'application/json'});
constructor(private http: Http){ }
getHeroes(): Promise<Hero[]> {
return this.http.get(this.heroesUrl)
.toPromise()
.then(response => response.json().data as Hero[])
.catch(this.handleError);
}
}
heroes.component.html:
<ul class="heroes">
<!-- On click, execute onSelect() function and pass in the hero variable from the ngFor. Apply the "selected" class if hero & selectedHero match, remove it if they don't -->
<li *ngFor="let hero of heroes"
(click)="onSelect(hero)"
[class.selected]="hero === selectedHero">
<span class="badge">{{hero.id}}</span>
<span>{{hero.name}}</span>
<!-- We need to stop propagation so we don't trigger the onSelect() method on the <li> -->
<button class="delete" (click)="delete(hero); $event.stopPropagation()">x</button>
</li>
</ul>
How can I modify the example Angular 2 code above to handle HTML data rather than JSON data so I can take advantage of code I already have set up on the C# end? I'm guessing the *ngFor in the html is irrelevant since I probably won't need to save my data as an array and I would probably need to change the value of heroesUrl to /Plan/Variety/VarietyList, but I'm a little stuck after that.
EDIT:
Here is what the returned HTML from my controller might look like:
<div class="varietyTypeName" data-toggle="collapse" data-target="" aria-expanded="true" aria-controls="">
Greens
<i class="fa fa-angle-down arrow-toggle"></i>
</div>
<div class="collapse in collapsableArea">
<div class="varietyFamilyName">Arugula</div>
<div class="varietyName">
<a class="ajax-rep rep-main-col" href="/Plan/Selling/DetailsPPVS/5409">Astro</a>
<a href="#deleteVarietySelling" id="deleteVarietySelling_5409" class="quick-delete fa-minus-button" title="Delete" data-toggle="modal">
<i class="fa fa-minus"></i>
</a>
</div>
</div>
<div class="collapse in collapsableArea">
<div class="varietyFamilyName">Kale</div>
<div class="varietyName">
<a class="ajax-rep rep-main-col" href="/Plan/Selling/DetailsPPVS/3720">Kalettes</a>
<a href="#deleteVarietySelling" id="deleteVarietySelling_3720" class="quick-delete fa-minus-button" title="Delete" data-toggle="modal">
<i class="fa fa-minus"></i>
</a>
</div>
</div>

What you need to do is something like this:
import {Component, OnInit} from '#angular/core';
import {DomSanitizationService} from "#angular/platform-browser";
export class SideBarComponent implements OnInit {
myHTML;
constructor(private sanitizer: DomSanitizationService, private myService : MyHTTPService){
myService.getHTMLFromBackend().subscribe(
data => {
this.myHTML = this.sanitizer.bypassSecurityTrustHtml(data.content)
});
}
ngOnInit() {}
}
Then when you are trying to use it in the html (DOM) Just simply do
{{myHTML}}

Building HTML dynamically with knockout

I have a single-page-application in MVC4 project in C#.
In my HTML I have a like-a-table lists - first is the table titles, and second is in a div with a "foreach" property (knockout) and presents all the items in my list.
Now, I need this "table" to be dynamic - I'll get a list of columns and "instructions" (column title, column class name, column value name, css conditions, etc.) and the HTML will be built dynamically.
Is it possible with knockout?
This is my code now. There are only 5 columns. I need it to be dynamic so I can easily add (and remove) columns by changing the instruction list, whithout touching the HTML.
<ul class="assetsTitles">
<li class="ItemKey" data-bind="click: sortBy.bind($data, 'Key'), css: { selected: Filter().OrderBy() == 'Key', desc: Filter().Descending() }"><span>Key</span></li>
<li class="ItemName" data-bind="click: sortBy.bind($data, 'Name'), css: { selected: Filter().OrderBy() == 'Name', desc: Filter().Descending() }"><span>Item Name</span></li>
<li class="ItemProp1" data-bind="click: sortBy.bind($data, 'ItemProp1'), css: { selected: Filter().OrderBy() == 'ItemProp1', desc: Filter().Descending() }">ItemProp1</li>
<li class="ItemProp2" data-bind="click: sortBy.bind($data, 'ItemProp2'), css: { selected: Filter().OrderBy() == 'ItemProp2', desc: Filter().Descending() }">ItemProp2</li>
<li class="ItemProp3" data-bind="click: sortBy.bind($data, 'ItemProp3'), css: { selected: Filter().OrderBy() == 'ItemProp3', desc: Filter().Descending() }">ItemProp3</li>
</ul>
<div data-bind="foreach: items, visible: items().length > 0">
<div class="itemRow" data-bind=" attr: { id: RowId() }">
<ul class="itemRowDetails " data-bind="visible: ShowDetails, selected: IsSelected, click: $parent.showItemDetails.bind($data, $data, $parent.type), css: { selected: IsSelected() }">
<li class="ItemKey" data-bind=" title: Key"><span data-bind="text: Key" /></li>
<li class="ItemName" data-bind=" title: Name"><span data-bind="text: Name" /></li>
<li class="ItemProp1" data-bind=" title: ItemProp1"><span data-bind="text: ItemProp1" /></li>
<li class="ItemProp2" data-bind=" title: ItemProp2"><span data-bind="text: ItemProp2" /></li>
<li class="ItemProp3" data-bind=" title: ItemProp3Display"><span data-bind="text: ItemProp3Display, css: { alertDetail: ItemProp3Alert, alertDetail2: ItemProp3Alert2 }" /></li>
</ul>
</div>
</div>

you can use ko.renderTemplate
and doing some thing like :
<!-- ko foreach:$root.visibleColumns() -->\
<li data-bind=\"attr:{'data-columnname' : columnName}\" role=\"column\" ><span data-bind=\"attr:{'class': columnHeaderCss, 'data-columnname' : columnName,'data-headertext': headerText}, text: headerText\"></span> </li>\
<!-- /ko -->\
and pass the columns list to viewModel :
ko.dataGrid = {
viewModel: function (configuration) {
var me = this;
$.extend(me, {
columns: configuration.columns,
visibleColumns: function () {
var res = [];
$.each(me.columns, function (i, c) {
if (c.visible)
res.push(c);
});
return res;
},
});
}

You could try building the html in script using traditional techniques then attach it to an element. Then to add this to the binding the name of that element needs to be included as a 2nd parameter:
ko.applyBindings(viewModel, dynamicElement)
Alternatively ko has html ("html:") and text binding ("text:") options.
In constructing the html in code you may need to use the "containerless control flow syntax" i.e. wrap within the comment notation e.g. <!-- ko foreach: myItems --> .... <!-- /ko --> Where myItems is an array.
Usual caveats apply regarding possible injection attacks!
Its been some time since I played with ko..

Script works on Create, but in Edit doens't

guys.
I have a View on my ASP.NET MVC Project.
This View has a lot of fields and a script to search some data.
<link href="#Url.Content("~/Content/styles/people.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/people.js")" type="text/javascript"></script>
<input type="hidden" id="selectiveAccess" name="selectiveAccess" value="#ViewBag.SelectiveAccess" />
<input type="hidden" id="peopleID" name="peopleID" value="#ViewBag.PeopleID" />
<div id="content">
<h1>People - Create</h1>
<h3>All the fields with (*) are required.</h3>
#using (Html.BeginForm("Save", "People", FormMethod.Post))
{
#Html.Partial("EnabledCourses")
#Html.Partial("GeneralData")
#Html.Partial("AddressData")
#Html.Partial("ContactData")
#Html.Partial("OtherInformations")
#Html.Partial("Research")
Back to the top
<div id="divErrors"></div>
<div id="actions">
<ul style="list-style: none;">
<li style="display: inline"><input type="reset" id="clear" style="height: 3em; width: 10em" value="Clear form" /></li>
<li style="display: inline"><input type="submit" id="continue" style="height: 3em; width: 10em" value="Continue" /></li>
</ul>
</div>
}
When I call Index(), the script works fine.
public ActionResult Index()
{
ViewBag.PeopleID = string.Empty;
return View();
}
When I call Edit(), the same script doensn't works.
public ActionResult Edit(long peopleID)
{
ViewBag.PeopleID = peopleID;
return View("Index");
}
This is the script:
function searchCityByPostalCode() {
var postalCode = {
'postalCode': $('#postalCode').val()
};
$.get(
'people/SearchCityByPostalCode',
postalCode,
function (city) {
// do something that works.
}
);
}
Anyone knows the problem?
Thanks!!!

Most likely is is due to the relative link you are using.
Index allows you to do something like this
www.mysite.com/Mycontroller/ - Goes to Index
www.mysite.com/Mycontroller/Index - Goes to Index (same as above)
However edit would force you to use the second form since there is no default route value
www.mysite.com/Mycontroller/Edit/{id}
Meaning that when you call the function for get in the index the request looks like
www.mysite.com/Mycontroller/people/SearchCityByPostalCode
And edit looks like this which is a diffrent path
www.mysite.com/Mycontroller/Edit/people/SearchCityByPostalCode
So basically you need to use an absolute reference so that the URL will work from the root of the site.
$.get(
'/people/SearchCityByPostalCode',
postalCode,
function (city) {
// do something that works.
}
);

How to retrieve a HTML element in Code Behind

I use asp.net and C# 4.
I would like to know if is possible and how to retrieve a "Normal" (not asp.net) element in Code Behind.
For instance: I have a <li></li>, I would like get it from my logic and set is Visible to False.
At the moment I tried to change the MarkUp with:
<li ID="li-item" runat="server">
// Does not work I get Error: ID no identified....
I'm pretty new to Asp.Net, please give me a sample of code. Thanks for your support.
PS: I hope to do not get down votes because it is a too trivial question :)

"li-item" is not a valid identifier. And you need to close the li tag.
Try:
<li ID="li_item" runat="server"></li>
(I have used an underscore instead of -)
Now it should work

If it has an id and runat=server then you should be able to access it as a HtmlGenericControl, http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlgenericcontrol.aspx.

<ul runat="server" id="ULSlider" class="slider_bg_container">
<%-- <li>
<img src="images/Home_Main.jpg" alt="" width="704" height="312" />
</li>
<li>
<img src="images/Slde1.jpg" alt="" width="704" height="312" />
</li>
<li>
<img src="images/Slde2.jpg" alt="" width="704" height="312" />
</li>
<li>
<img src="images/Slde3.jpg" alt="" width="704" height="312" />
</li>
<li>
<img src="images/Slde4.jpg" alt="" width="704" height="312" />
</li>--%>
</ul>
and in code i use this like
protected void LoadData()
{
ImageGalleryBAL objImageBAl = new ImageGalleryBAL();
DataSet ds=objImageBAl.ImageGallery_GetALLImageForSlider();
String s="";
foreach (DataRow dr in ds.Tables[0].Rows)
{
string imgUrl =ConfigurationManager.AppSettings["SiteURL"]+ dr["ImageName"].ToString();
string AltText = dr["AltText"].ToString();
s=s+"<li><img src='"+imgUrl+"' alt='"+AltText+"' width='704' height='312' /> </li>";
}
ULSlider.InnerHtml = s;
}