servicestack Razor page with relative path in meta refresh not served correctly - servicestack

this used to work in work in the older versions of service stack (.33). I'm trying .55 now.
I have a .cshtml page with a relative ~ link, and i also set the WebHostUrl in the EndpointHostConfig.
In the old version both the metarefresh and the href were replaced with the WebHostUrl. So both were
http://server/baseurl/Incidents.
In the newer versions, it only seems the href are. So the metarefresh is no longer working. it refreshes to
http://server/baseurl/~/Incidents
not sure if it can be fixed.
example .cshtml
<head>
<meta http-equiv="refresh" content="3; url=~/Incidents">
</head>
<body>
<div>
<p>
<center>
View Incidents
</center>
</p>
AppHost.cs
SetConfig(new EndpointHostConfig {
AllowJsonpRequests = true,
WebHostUrl = ConfigurationManager.AppSettings["BaseUrl"],

The issue is that the ~ is not valid html or a valid URL. But you can use the URL extension methods within Razor to translate the path for you as it understands the tilde. ASP.NET understands the ~ as the root of your application and will translate it accordingly.
<head>
<meta http-equiv="refresh" content="3; url=#Url.Content("~/Incidents")">
</head>
<body>
<div>
<p>
<center>
View Incidents
</center>
</p>

Related

Using #local_variable in CSHTML code in asp-page

I develop ASP.Net Core 2.1 RazorPages web application. I want parametrize the the value of asp-page tag helper.
So I use following code in cshtml file. There is a del_link local variable defined in begining of file. This variable is late used as parameter for second asp-page tag helper.
#page
#{
string del_link = "/UnloadDelete";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div>
<a asp-page="/UnloadEdit">Details</a>
<a asp-page=#del_link>Delete</a>
</div>
</body>
</html>
ASP.Net Razor generate following HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div>
Details
Delete
</div>
</body>
</html>
As you can see in HTML code, asp-page="/UnloadEdit" is properly rendered to HTML code, but asp-page=#del not, it is rendered to <a href="">. How I can use local variable for asp-page tag helper in Razor Pages?
Thanks in advance.
You must pass a page name to the asp-page attribute. So what you are trying to do is not supported. If #del_link renders a relative URL, you can pass that to the href attribute instead. There may be other suitable solutions, depending on why you feel the need to use #del_link at all.

Adding extra scripts and headers to ufront-erazor html layout

Using ufront and erazor I ran into the following problem very quickly.
The hello-world example provides the following layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
#viewContent
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
</html>
For certain pages I want to add more headers or scripts after Jquery has been loaded.
One way to do so (for the scripts for example), would be to pass the scripts as an array of strings, and construct them on the layout file :
...
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
#for(script in scripts) {
<script src='#script.path'></script>
}
</html>
....
The problem with this approach is that I can't keep meaningful headers + body + scripts on the same template file witch would be great, also needs extra care to pass the scripts and headers as context.
Some template engines like Razor or Laravel allow to do that using 'sections'.
Is it possible to do something similar with erazor? If not what would be a good alternative?

Pretty URL using mod_rewrite path issue

I am using MOD_REWRITE to channel all URLs through a single file. The aim is to allow pretty urls like:
http://mysite.com/shop/electrical/hoover
or
http://mysite.com/shop/checkout
etc etc
I achieve this using the following .htaccess file:
# Turn on the RewriteEngine
RewriteEngine On
#
# Rules
#
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . urlbug.htm
This is the stripped down HTML file that does all the work:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>My web page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>
</head>
<body>
<div id="accordion"><h3>Home</h3><div>
<ul class="submenu"><li>Clear Counters</li></ul>
</div>
<h3>Maintan Tables</h3>
<div>
<ul class="submenu">
<li>Stock</li>
<li>Categories</li>
<li>Designers</li>
</ul>
</div>
<h3>User Database</h3><div><ul class="submenu"></ul></div>
</div>
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script src="js/plugins.js"></script>
</body></html>
This works if you visit a URL like:
http://www.facebookanswers.co.uk/code/foobar/works
However, if you try a URL like:
http://www.facebookanswers.co.uk/code/foobar/no/longer/works
Then the URL will load, however, none of the CSS or JS files will load.
This is because I am using relative URLs.
If I instead use absolute URLs, then all works fine. I have set up a different folder to demonstrate this:
http://www.facebookanswers.co.uk/code/foobar2/works
and
http://www.facebookanswers.co.uk/code/foobar2/works/as/well
This is the code with the absolute URLs:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>My web page</title>
<link type="text/css" href="http://www.facebookanswers.co.uk/code/foobar2/css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>
</head>
<body>
<div id="accordion"><h3>Home</h3><div>
<ul class="submenu"><li>Clear Counters</li></ul>
</div>
<h3>Maintan Tables</h3>
<div>
<ul class="submenu">
<li>Stock</li>
<li>Categories</li>
<li>Designers</li>
</ul>
</div>
<h3>User Database</h3><div><ul class="submenu"></ul></div>
</div>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/libs/jquery-1.7.1.min.js"></script>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/plugins.js"></script>
</body>
</html>
Somewhere along the line, the path is getting confused. What is the best way around this? I would like to keep relative URLs if possible, as the code I am developing will be used on a number of sites. Its not the end of the world if I have to use absolute URLs, and I know that there are performance benefits in absolute URLs, but it seems odd that the browser will happily load the URL, but then think that it is stored somewhere else!
Use root relative URLs.
The problem is that the browser sees a URL like http://www.facebookanswers.co.uk/code/foobar/no/longer/works so a relative link would resolve as http://www.facebookanswers.co.uk/code/foobar/no/longer/works/code/foobar2/css... and so on.
Instead use this...
<link type="text/css" href="/code/foobar2/css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>
By starting with a / you're forcing it to be relative to the root of the website, but by not specifying the domain, it'll work just fine if you deploy on another site. This is really just an HTML issue rather than a mod-rewrite one.
Take a look at your server access logs and you'll see what pages are being requested, and you'll see they're not what you were expecting.
Site-wide resources are always best referred to with root-relative URLs - it means you don't need to adjust them based on where you are in the site, and it makes them portable between sites (which is handy if, like me you have your development site on a local machine with a different domain name - I use www.example.com.dev when working locally on www.example.com)

How to automatically show Title of the Entries/Articles in the Browser Title Bar in ExpressionEngine 2?

How would I output the title of an entry in ExpressionEngine and display it in the browser's title bar?
Here is the content of my page's header:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Site</title>
<link rel="stylesheet" href="{stylesheet=site/site_css}" type="text/css" media="screen" />
</head>
What I need is for each page to display the title of the entry in my browser's title bar — how can I achieve that?
Part of UPDATED Code:
Here is how i have done it :
{exp:channel:entries channel="news_articles" status="open|Featured Top Story|Top Story" limit="1" disable="member_data|trackbacks|pagination"}
{embed="includes/document_header" page_title=" | {title}"}
<body class="home">
<div id="layoutWrapper">
{embed="includes/masthead_navigation"}
<div id="content">
<div id="article">
<img src="{article_image}" alt="News Article Image" />
<h4>{title}</h4>
<h5><span class="by">By</span> {article_author}</h5>
<p>{entry_date format="%M %d, %Y"} -- Updated {gmt_edit_date format="%M %d, %Y"}</p>
{article_body}
{/exp:channel:entries}
</div>
What do you think?
Another relatively new way to tackle it is using the Stash add-on and a template partials approach. This method knocks you down to one embed, and has the added advantage of giving you a centralized "wrapper" template - one for each major page layout, basically. The example below assumes you've simply added custom fields to handle any entry-specific meta data you're looking to inject into the header. With this idea in mind, here's a simplified view of the basic structure I've been applying recently:
In your template you apply EE tags to determine the logic of what gets sent to the inside-wrapper
{embed="embeds/.inside-wrapper"}
{exp:channel:entries channel="channel_name" limit="1" dynamic="yes" disable="whatever|you|can|live|without"}
{!-- ENTRY SEO META DATA --}
{exp:stash:set name="entry_seo_title" scope="site"}{cf_channelprefix_seo_title}{/exp:stash:set}
{exp:stash:set name="entry_seo_description" scope="site"}{cf_channelprefix_seo_description}{/exp:stash:set}
{exp:stash:set name="entry_seo_keywords" scope="site"}{cf_channelprefix_seo_keywords}{/exp:stash:set}
{!-- ENTRY/PAGE CONTENT --}
{exp:stash:set name="entry_body_content" parse_tags="yes" parse_conditionals="yes" scope="site"}
Your page content here
{/exp:stash:set}
{/exp:channel:entries}
And then in your wrapper template, which would ultimately contain all your wrapping HTML but could be chunked into snippets. for something like the header since it would be shared with other wrapper templates, for example:
<html>
<head>
<title>{exp:stash:get name="entry_seo_title"}</title>
<meta name="description" content="{exp:stash:get name="entry_seo_description"}" />
<meta name="keywords" content="{exp:stash:get name="entry_seo_keywords"}" />
</head>
<body>
{exp:stash:get name="entry_body_content"}
</body>
</html>
If you want to show just the name of your ExpressionEngine site (as defined in CP Home > Admin > General Configuration) use the site name global variable:
<title>{site_name}</title>
If you want to display just the current entry title from a given channel use the following:
<title>
{exp:channel:entries channel="channel_name" limit="1" dynamic="yes"}
{title}
{/exp:weblog:entries}
</title>
Many Web Developers will use an Embed Variable with an Embedded Template to pass the `{entry_title} to a global embed template, allowing for a dynamic page title:
{embed="includes/header" title="{exp:channel:entries channel="{channel_name}"}{title}{/exp:channel:entries}"}
If you're using EE2, the SEO Lite Module takes care of all the hard work for you with a single line of code:
<html lang="en">
<head>
<meta charset="utf-8" />
{exp:seo_lite url_title="{url_title}"}
</head>
Other solutions include the Low Title Plugin (EE1, EE2).
One addition to Ryan's embed method (which is definitely the most flexile method): chances are you can wrap most of your page in an {exp:channel:entries} tag when viewing an individual entry, avoiding the additional (and expensive) channel:entries call. So it would look more like this:
{exp:channel:entries channel="channel_name" limit="1"}
{embed="includes/header" title="{title}"}
<h1>{title}</h1>
{page_content}
{embed="includes/footer"}
{if no_results}{redirect="404"}{/if}
{/exp:channel:entries}
NSM Better Meta is a more complete way to pass channel meta data to the tag.
For smaller sites, I use the String plugin.
https://devot-ee.com/add-ons/string
Very simple syntax.

Tabcontainer behaves different from browser to browser

The following code works on IE8, Safari 4.0.2 - but generates an empty page on Firefox 3.5.5. Any idea ?
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/tundra/tundra.css">
</head>
<body class="tundra">
<div style="width: 350px; height: 300px">
<div id="tc1-prog">
</div>
</div>
</body>
<script type="text/javascript" src="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/dojo.js"
djConfig="parseOnLoad: true">;
</script>
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(function() {
var tc = new dijit.layout.TabContainer({
style: "height: 100%; width:100%;"
},
"tc1-prog");
var cp1 = new dijit.layout.ContentPane({
title: "Food",
content: "We offer amazing food"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "Drinks",
content: "We are known for our drinks."
});
tc.addChild(cp2);
tc.startup();
});
</script>
</html>
Likely a cross-domain problem. The nightly build is posted for testing, but to actually use it locally, you must download the tarball. Otherwise, references are made to load individual modules using xhr+eval which break the browser's domain security model.
Your other choice is to use a "cross domain" build of Dojo, which is pretty much what you wanted to do and super simple to deploy -- just point at it with the script tag and off you go. That's what's available on the Google CDN.
You might want to put the script tag inside the body tag. For it to be valid HTML, it needs to be either in a body or head tag. An invalid document could certainly result in it not operating consistently between browsers.
Update: Also, you might want to try using a production build instead of the nightly build. I changed the URL to use http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js and it worked fine for me in FF. It was broken with the nightly build.
From the HTML 4.01 Spec:
An HTML 4 document is composed of three parts:
a line containing HTML version information,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.
<html>
<head>
<link ... />
</head>
<body>
...
<script ... >
</script>
</body>
</html>

Resources