So, my boss has this crazy idea - the whole website working on one single page. So far - still ok, but here's the thing:
- the different pages have different divs with content (like usual), and when some div is clicked (or link in it) some of the divs expand/collapse, working in the way of revealing different content. That's fine, but...
he doesn't want to use JavaScript or anything for dynamic view of the website ('cuz I am leaving in 2 weeks and him and the other employee are not capable of JS, thus cannot improve/maintain if needed)
his idea is to have the HTML code, for all the pages variations of the website, stored in the database, and upon clicking some link - reloading the page with the certain HTML. So not different .html files for every page, but only one for all of them.
The problem is that it works for the first page that I load, initially, but then when I call another page, it gets twisted, since I call the function, that retrieves the HTML, but the other call of the previously loaded page is still there, so it calls again. Here's sample, so you understand:
<script runat="server" type="text/C#">
public string getPage(string name)
{
string page = "null";
switch (name)
{
case "media":
page = getMediaPage(); <!-- just function from the code-behind that retrieves the html code from the DB and passes it to the page -->
break;
case "home":
page = getHomePage(); <!-- just function from the code-behind that retrieves the html code from the DB and passes it to the page -->
break;
}
return page;
}
</script>
</head>
<body onload="addEvents();">
<form id="form1" runat="server">
<div id="parent">
<div id="presentation">
SomeCompany ApS Street3 | CITY | INFO#Comapny.com TLF: 999999
</div>
<%=getPage("home") %>
</div>
</form>
So that's how the initial page will be and then just in the parent div I will call the HTML for the other pages. One example of HTML, stored in the DB:
<div id="mainmenu">
<b>HOME</b>
<br />
PRODUCTS
<br />
SUPPORT
<br />
CONTACT
<br />
ABOUT
<br />
</div>
<div id="logo">
</div>
So I call this chunk of code slam it in the page. The twist happens as I have <a href="<%=getPage("media")%>"> clicked, so it loads the page normally, but there is <%=getPage("home") %> standing statically in the page, ALL THE TIME, as I need to start from somewhere, and it attempts to load the previous page again, and... server error.
I know it's kinda stupid idea, but I can't argue with him anymore.
So my question is - is there way of handling all this with some kind of OnClick(Event e) or some other way out, with calling different functions (as I already started).
Or I should just tell the boss that it's not gonna work this way...
As stated, this isn't a great idea, but you could get it to work by using some Web Controls.
Where you have <%=getPage("home") %> in your page, change this to:
<asp:literal id="ltlContent" runat="server" />
On Page_Load call:
ltlContent.Text = getPage("home");
Any links on your page which should load other content, change these to LinkButton controls, and their click events could have:
<asp:LinkButton id="linkMedia" runat="server" onclick="LoadContent" CommandArgument="media" />
public void LoadContent(object sender, EventArgs e){
ltlContent.Text = getPage(e.CommandArgument);
}
you could try the parameters on the get url.
add them on your link "?page=media"
and then you parse the url when you arrive $_GET["page"]
Related
My main web page (index.html) follows a common structure (simplified):
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
<div id=mainContent>
...
</div>
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
The web server is well configured such that all the static files are cached and don't get reloaded on the client side if refreshing the page.
Upon choosing a link from the site, mainly from the 'menu' or the 'footer', I want to display different content within the div tag 'mainContent'. Page layout, CSS, fonts, scripts, menue, footer - all is the same. I have identified several means to achive this:
Construct a new subPage.html file copying everything from index.html, then rewrite the div 'mainContent'
with the desired other stuff and change page specifics like title, description etc.
Or use php to include the desired content in mainContent and to change the page specific values like 'title'.
Link from index.html goes to href="subpage.html".
Drawbacks:
Maintenance: when changing anything in the outside 'wrapper', I'll have to edit
every subPage.
no idea how to easily transport values from index.html
to subPage.html, beside cookie (not always permitted) or URL
parameters.
use a javascript onClick handler (event listener) to load requested content from server using XHttpsRequests and exchange the innerHtml of div mainContent.
Drawbacks:
no noscript version possible.
my changing content is probably not indexed by Google bot and alike, since it is not loaded with index.html. Would it change the situation if the 'alternativ content' was saved in .html files in the base directory, such that it would be browsable and discoverable?
Pre:
keeps javascript variables
no need to reload outer page, thus best user experience.
use a 2nd div 'mainContent2' with style="display: none". With a javascript onClick handler toggle display style of both mainContent divs to none <-> block.
Pre:
easy to implement.
all content loaded and thus SEO indexed.
Drawback:
Everything has to be loaded at once, so the index.html might get pretty big.
[4. iframe probably not an option (as the src attribut is static)]
I tend to opt to alternative #2.
Any other technics recommended? What is the 'best practice'? How is this generally done by the pros? Suggestions? Please elaborate.
I'll give you a few answers based on each option:
PHP
You can use PHP to import the header and footer instead of the main
content, that way you have just one file with a header and another
with a footer and all the pages that you create with different
contents will import the header and footer, avoiding duplications.
JS
Do you need a no-script version? I have never seen someone who disabled js but I don't know your app, it could be a pre-requirement.
You can use a modern js framework like Next + React / Nuxt + Vue / Remix / Svelte / ... There is a lot of options here that can provide you an SSR (Server Side Render) and make Google Bot happy
SPA
This seems to be a SPA. You can use some of the modern js frameworks that I mentioned in the second item. You need to think about lazing load the images too. I don't know how big is this content, but you can try google lighthouse to see if there is some problem with page size in this approach, also, you could enable the gzip on the server.
OR...
All of the above
You can use all of them together too. A frontend with a framework getting data from an API written with PHP, why not? PHP can validate the request type and delivery an HTML if it's the first request or a JSON if the application is already loaded.
Most common solution probably a variant of your option 1. But different then you think. Create a header.php with the content
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
and create a footer.php with the content:
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
Then create an index.php like
<?php include('header.php'); ?>
<div id=mainContent>
...content index page...
</div>
<?php include('footer.php'); ?>
And then create subpages like subpage.php
<?php include('header.php'); ?>
<div id=mainContent>
...content subpage...
</div>
<?php include('footer.php'); ?>
This way if anything in the header or footer needs to change you edit the header.php file and the changes will take effect on all pages because the header.php gets included on every page.
I've got a problem with Blazor, probably something with routing. I'm using MudBlazor components and I can see a strange behavior. I've got the navigation menu (MudNavMenu) and when I'm choosing to go to another page, it redirects me successfully, however it's not redirecting to the beginning of the page - it's redirecting to the same moment as the last page.
So for example: You scrolled all the way down, Yoy were at the end of the page, then You choose to go to another page and this page is loaded at the end, not at the beginning.
I have no idea why is that (and I would like a new page to be loaded at the beginning of course). I tried with normal href, MudBlazor Href, hrefs/Hrefs with Id (#), code-behind NavigationManager with NavigateTo method. It behaves same for every solution.
MainLayout.razor:
<MudLayout>
<MudAppBar Style="background-color: #FFFFFF">
<MudImage Width=200 Src="images/svg/logo-blue.svg"></MudImage>
<p class="title-text">Some Title</p>
<MudSpacer />
<MudIconButton Icon="#Icons.Material.Filled.Menu" Color="Color.Info" Edge="Edge.End" OnClick="#((e) => DrawerToggle())" />
</MudAppBar>
<MudDrawer #bind-Open="#_drawerOpen" Anchor="Anchor.Right">
<NavMenuMud />
</MudDrawer>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.Medium" Class="pt-5">
#Body
</MudContainer>
</MudMainContent>
</MudLayout>
#code {
bool _drawerOpen = false;
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
NavMenuMud.razor
<MudNavMenu Bordered="true" Rounded="true" Margin="Margin.Dense" Color="Color.Info" Class="pa-2">
<MudText Typo="Typo.h6" Class="px-4">Navigation</MudText>
<MudText Typo="Typo.caption" Class="px-4 mud-text-secondary">Click to navigate</MudText>
<MudNavLink Href="/" Match="NavLinkMatch.All" Icon="#Icons.Rounded.Home">Main page</MudNavLink>
<MudNavLink Href="/Example1" Match="NavLinkMatch.Prefix" Icon="#Icons.Rounded.Info">Example1</MudNavLink>
<MudNavGroup Title="List" Icon="#Icons.Rounded.ListAlt">
<MudNavLink Href="/Example2">Example2</MudNavLink>
<MudNavLink Href="/Example3">Example3</MudNavLink>
<MudNavGroup Title="Examples">
<MudNavLink Href="/Examples/Example4">Example4</MudNavLink>
</MudNavGroup>
</MudNavGroup>
</MudNavMenu>
Beside these, I have some razor components with content of course (some MudTexts, MudPapers etc., nothing questionable).
I'm facing a similar problem. A long search for a solution to this problem led me to change here, I didn't find an answer here, I started digging guides for redirecting to blazor wasm.
And I noticed that I didn't read the guides carefully, in general, the App.razor file contains the following standard code:
<Found Context="routeData">
<RouteView RouteData="#routeData" DefaultLayout="#typeof(MainLayout)" />
<FocusOnNavigate RouteData="#routeData" Selector="h1" />
</Found>
From this code as a whole, it becomes clear that when switching to another page, the priority is towards the <h1> tag.
Just add the <h1> tag to the page and when you go to this page, you will be redirected to this tag
I want to redirect from one view to another view in the same project/solution. There are 3 hyperlinks in here and I am unable to redirect to either of them. Can someone help me with this?
<body>
<div>
<br />
<span style="margin-left:20%"></span>
Forgot Login ID?
<br />
<br /><span style="margin-left:20%"></span>
Forgot Password?
<br />
<br />
<span style="margin-left:20%"></span>
Need to register your Corporation?
Click here
</div>
</body>
When I try to click on the hyperlink, I am getting the following HTTP 404 Not Found error. I tried many approaches, but none seem to work.
I tried different approaches to linking to the controller. But, I failed to get any positive output.
Asp.net does not have phyiscal routing - you do not want to link to physical files. Instead it resolves its routes after a pattern. The default pattern, unless specified otherwise is "{controller}/{action}/{id}".
So assuming your controller is called CorporationController, and your action method is called "ForgotPassword", the hyperlink would be constructed with:
#Html.ActionLink("Forgot Password", "ForgotPassword", "Corporation")
You might want to read some basic documentation about Asp.Net Mvc first.
I've got a Razor list-to-view function setup and i render a website url that a user inputs. My problem is that at the moment clicking the url causes the anchor to try and find that page within the website, when it's an external link.
How do i do this?
My code with the rendered URL:
<div id="PageDetails">
<h2> #artist.ArtistName </h2>
<p><strong>Website:</strong> #artist.ArtistWebsite</p>
<p><strong>Bio:</strong> #Html.C1().Body(artist.ArtistBio)</p>
#if (!string.IsNullOrEmpty(artist.Image))
{
<img src="#Html.C1().MediaUrl(artist.Image)" /><br />
}
</div>
The URL in the data type field should start with http://:
Use 'http://www.xyz.com' rather than 'www.xyz.com'
Silly question and I hope I just overlooked this. In Sitefinity, once you are logged in, there is a wrapping div which one can use to target certain html tags ONLY when you are logged in.
I am not seeing anything like this in DNN and was wondering if someone knows of a solution to this please?
What I would like, is something like this:
[div class="dnn-logged-in"]
[div class="my-content-wrapper"]
[div class="elements-i-would-like-to-show-or-hide]
Hide or show this if I am logged in or not
[/div]
[/div]
[/div]
Many thanks!
I'd say this is a fairly uncommon task because this type of logic is generally handled on the server side and not the client side. This is because you generally don't want to increase the client payload any more than you need to - and if the user isn't logged in - they'll never need this content. In addition there are obviously security implications if working with sensitive data - as the information is easily viewable in the underlying markup.
All disclaimers aside, If you do want to do this, I think the best solution would be to just make site work just like you're used to in Sitefinity. In DNN you would create a container that contains the appropriate logic. A container wraps each module, and within the container you have the opportunity to write any code (server or client) to make your container dynamic.
For this brute force example I modified the "Invisible.ascx" container that ships with the DarkKnight skin in DNN 6:
<%# Control language="C#" AutoEventWireup="false" Inherits="DotNetNuke.UI.Containers.Container" %>
<%
var isLoggedIn = HttpContext.Current.User.Identity.IsAuthenticated;
if (isLoggedIn)
{
%>
<div class="dnn-logged-in">
<% } %>
<div class="Invisible"><div id="ContentPane" runat="server"></div></div>
<% if (isLoggedIn) { %>
</div>
<% } %>
This will yield the following HTML when not authenticated:
<div class="DnnModule DnnModule-DNN_HTML DnnModule-364">
<a name="364"></a>
<div class="Invisible">
<div id="dnn_ctr364_ContentPane">
[Dynamic Content Here]
</div>
</div>
</div>
and this when you are authenticated:
<div class="DnnModule DnnModule-DNN_HTML DnnModule-364">
<a name="364"></a>
<div class="dnn-logged-in">
<div class="Invisible">
<div id="dnn_ctr364_ContentPane">
[Dynamic Content Here]
</div>
</div>
</div>
</div>
If you want this logic everywhere, I'd just enhance each of the containers that you're currently using with this type of logic.
You can use SkinObject to do so in dnn. Login skin object will help you showing a Login/ Logout OR Regiter, User Skin object will help you show the currently logged in user. You can use any style and div you want.
In DotNetNuke this is controlled by permissions, which can be assigned to pages or to individual modules (specific content). By default, new pages will have VIEW permissions for "All Users", and new content created on the page will inherit that permission.
To change this, select the settings for the specific content, un-check the "Inherit View Permissions from Page. This will enable the check-boxes for all the various roles. Then simply ensure that All Users is un-selected, and instead select "Registered Users". This will make the content visibleto any user who is logged into the site.
This is a super powerful permission model which actually controls the rendering, rather than just obscuring visibility.