Using 2sxc, I have a hero module that I use across the website on all pages. It looks like this:
It uses "#Content.Title" for the h1 tag so it displays "Scholarships". But I need to make a breadcrumb that gets the parent page's name of the current page. So in this case, "Teachers".
For example, this hero also exists on other pages like "Volunteer" and it has a parent of "Get Involved" so the breadcrumb would dynamically show "Get Involved".
So far, here's my code:
#if (#Dnn.Tab.ParentId != -1) {
<nav class="uppercase text-sm font-semibold tracking-wider"><span class="text-honeydew visited:text-honeydew">#Dnn.Tab.ParentID</span> <span>/</span></nav>
}
This works to handle heroes on a root page (to not show the breadcrumb). But I can only seem to output the ParentID.
How can I use the #Dnn.Tab.ParentID to get the Parent tab's name using c#? Or is there another way to go about this?
Easiest thing to do is use the TabController to turn a TabId in to a TabInfo
#using DotNetNuke.Entities.Tabs
#functions {
private TabInfo GetTabInfo(int tabId)
{
return TabController.Instance.GetTab(tabId, Dnn.Portal.PortalId);
}
}
So then just call it all in one like this with .ParentId...
<pre>
Debug:
Parent Page Name: #GetTabInfo(Dnn.Tab.ParentId).TabName
</pre>
Related
original title: VueJS with Bootstrap, stretched link with hidden button
I am trying to make clickable bootstrap cards in a VueJS project, I want clicking the card to open a collapsible element within the card, right now I have something that works using a button with the "stretched-link" class
<b-card
v-bind:img-src="`https://via.placeholder.com/200`"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<b-button v-b-toggle="'collapse-' + unique-identifier" variant="primary" class="stretched-link ">Toggle</b-button>
<b-collapse v-bind:id="'collapse-' + unique-identifier" class="mt-2">
<b-card>This is the collapsed content</b-card>
</b-collapse>
</b-card>
I'm trying to make this work without having a visible button in the card, I've tried using the invisibile class and the d-none class (class="stretched-link d-none" and class="stretched-link invisible")
In both cases, the button is made invisible but so is the stretched link. Is there any way to maintain the active stretched link area while hiding the button icon?
ok I figured out a solution for my particular use case with JQuery,
What I was really after was a clickable image with the functionality of a bootstrap button. So this is a solution for that problem, not exactly hidden stretched links.
In my Vue component I define the triggerButton method, which finds a button by its id and clicks it.
<script>
import $ from 'jquery'
export default {
props: //just filling this for structure,
data() {
return {
//stuff
}
},
async mounted() {
//more placeholder structure
},
methods: {
//here is the sauce
triggerButton(id) {
$("#"+id).click();
},
}
}
</script>
Then in the <template> body I have a hidden button. "unique-identifier" is just a unique number that is put in, it's needed in my case because im generating many of these elements in a for loop and they need to have distinct ids.
In this case I'm using the bootstrap button to trigger a unique modal.
<b-button style="display:none" v-bind:id="'button'+ unique-identifier" v-b-modal="'modal' + unique-identifier">Launch centered modal</b-button>
Then finally I have an image displayed in the bootstrap card, and on click i call the triggerButton method that will now display my modal.
<img v-on:click="showModal('button' + unique-identifier)" :src="`https://placekitten.com/g/200/200`"/>
My goal is to render different pages with different layouts to one div on my index page. The idea is that only one div ("create-focus") changes and I want the other pieces to only have to load once.
This is a proof-of-concept so everything that I am building is local (I have no addresses to redirect to. Only local files to import.)
I have an index.jx as thus:
<div class="col-md-12">
<div id="create-header"></div>
<div id="create-top-banner"></div>
<div id="create-menu"></div>
<div id="create-focus"></div>
<div id="create-footer"></div>
</div>
I would like to replace the id "create-focus" with new html from another jsx :
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./AdBanners.css";
class AdBanners extends Component {
render() {
return (
<div className="AdBannerBody" id="ad-banners" ref={this.myRef}>
<h2>Stuff and Things</h2>
</div>
);
}
}
export default AdBanners;
const wrapper = document.getElementById("create-adBanner");
wrapper ? ReactDOM.render(<AdBanners />, wrapper) : false;
I have tried to load just the html, but it simply prints the code to my screen as text. Do I need to run another render call? How is that possible?
I don't understand very good what you're trying to do, is it to set the inner html of the div "create focus"?
take a look at:
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
You are misusing ReactDOM.render. The second argument should be a reference to a normal HTML element you want to render your element as the child of. So in your case you would want to call:
ReactDOM.render(<AdBanners />, document.getElementById("create-focus"))
Although I'm not sure this is exactly what you're trying to do. The setup for this app seems very strange to me.
Is there a way to add white space in MVC while using variables? for example foreach(item in collection) {#item #item}. How to make a blank space something like " " in it?
You can use pre tag , which defines preformatted text.
foreach(item in collection) {
<pre>#item #item</pre>
}
have you tried this can be repeated i.e. you can do line breaks with <br />
In my application I have used a space after the link's name ("Details ") as shown here
#Html.ActionLink("Details ","Details", new { Variable_ID = item.VIP_ID})
#Html.ActionLink("Edit", "Edit", new { Variable_ID = item.VIP_ID })
so my links will look like this: Details Edit, instead of DetailsEdit.
You can also put a separation bar like this "Details | ", so you can have
Details | Edit
<span> </span>
Insert " " to add more blank spaces
//This will work for sure, as MVC C# using razor syntax then you just need to put space between those two only
foreach(var item in collection) {
<span>#item #item</span>
}
If you wish to add single space between item:
foreach(item in collection)
{
<p>#item #item</p>
}
But you will have better flexibility if you wrap it in a HTML element like div or span,
and then add padding/margin to the element using CSS.
foreach(item in collection)
{
<div class="user-defined-classname">#item</div>
<div class="user-defined-classname">#item</div>
}
In CSS
.user-defined-classname{
padding-left|right|top|bottom: 10px
}
Suggestion:
The "Views" folder is specifically meant to just contain your view files (i.e. .cshtml files).
Try adding your CSS file to a folder in the root of the ASP.NET project. Often, this folder is named "Content", but you can rename it as "Styles" or something else. Then you can load your CSS file from within a view using a link tag:
<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />
This may help.
One more variant:
#(string.Format("{0} {1}", item, item))
How to put header in listview with GridLayout.
When I put header above listview my header take some height and last row in listview is not showed, because of header.
I also found a way to set header in listview directly:
data-win-options="{ header: select('.header') }">
With this my header is positioned on the left side of list, not above the list, like normal header should be.
I did not see any example with listview GridLayout and header section above (for instance I wanna put search box and heading in header).
Any example of this ?
Two solutions are here:
1) This is answer I get from Microsoft:
In the list view the WinJS.UI.GridLayout's viewport is loaded
horizontally.
You need to change the viewport's orientation to vertical. You can do
this by attaching the event onloadingstatechanged event.
args.setPromise(WinJS.UI.processAll().then(function () {
listview.winControl.onloadingstatechanged = function myfunction() {
if (listview.winControl.loadingState == "viewPortLoaded")
{
var viewport = listview.winControl.element.getElementsByClassName('win-viewport')[0];
viewport.className = 'win-viewport win-vertical';
}
}
}));
and change the class win-horizontal to win-vertical.
2) Problem could be also solved adding standard html header and list below header, without data-win-options="{ header: select('.header') }" attribute.
In that case we need to calculate height of the list:
.list {
height: calc(100% - headerHeight);
}
I'm new to Angular but I'm trying to implement a textbox that allows users to enter in links. I only want to support links, and otherwise I want to block all html from being presented as such. I could theoretically use something other than a textarea, but my requirements are that it must be bound to a variable in my scope (right now with ng-model) and I cannot accept html tags other than '< a >'
Here is my example plnkr
In the example, I would like the second seeded item to display as a link, blue and underlined. However, the third item should display as it is currently shown (without interpreting it as html).
HTML:
<textarea maxlength="160" ng-model="val.text"></textarea>
<div class="btn" ng-click="submit()">Submit</div>
<br><br>
<div ng-repeat="item in items">
{{display(item)}}
</div>
JS:
$scope.submit = function() {
if (!$scope.val.text) return
$scope.items.push($scope.val.text);
}
$scope.display = function(txt) {
return txt;
// something here? if txt contains <a> and </a> indicate
// that we should display as html
}