In ASP.NET Core 6, does #RenderSection always work on the name that you give to your section? Could it be like this:
<html>
<body>
#RenderBody()
</body>
<script type="text/javascript" src="~/lib/layout.js"></script>
#RenderSection("scriptsNav_menu", required: false)
</html>
#section ScriptsNav_menu {
<script type="text/javascript" src="~/lib/contacts.js"></script>
}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2> Contacts</h2>
</div>
</div>
I didn't try it myself, to be honest
Here's the official document about the RenderSection
In layout pages, renders the content of the section named name.
required indicates if this section must be rendered.
So when your view <h2>Contacts</h2> containing #section ScriptsNav_menu is loaded, you will see <script type="text/javascript" src="~/lib/layout.js"></script> like screenshot below.
But when you visit another view which doesn't contain #section ScriptsNav_menu, the ~/lib/layout.js won't load.
While set required to true, and visit Privacy page again I get error below which means the script will always be loaded.
Related
I would like to have a text box at the top of my website on every page that has the same text, but I don't want to edit the code individually for every webpage. How would I sync the text to all the webpages?
Include Common files using jQuery...
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="header"></div>
<div id="content">
Main Content
</div>
<script>
jQuery(document).ready(function(){
jQuery("#header").load("header.html");
});
</script>
</body>
</html>
I do have a small issue i can't solved despite reading on internet.
I'm learning node.js, express.js, ejs.
I create a small app that tries to display a dynamic webpage on my local server.
The code is working but not the display of the pictures! (the stylesheet works fine)
here is my index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body class="container">
<header>
<% include partials/header %>
</header>
<main>
<h1><%= title %> </h1>
<img scr="/images/logo_small.jpg" alt="logo" />
<p> Welcome to <%= title %></p>
</main>
<footer>
<% include partials/footer %>
</footer>
</body>
</html>
In the main apps i wrote:
app.use(express.static(path.join(__dirname, 'public')));
And finally i put the images in ./public/images/logo_small.jpg.
The display shows "logo" instead of the pictures. When I go this URL
http://localhost:3000/images/logo_small.jpg
Firefox shows me the image. it is frustrating!
I miss something here, but i don't see what. Any idea ?
I'm writing a basic Node app and simply want to render the index page with Jade, and then let Angular do the rest on the front-end.
This is the Jade (slightly shortened to illustrate the problem):
doctype html
html
include ../includes/head
body(ng-app="TestApp" ng-controller="TestAppController")
div(ng-view)
include ../includes/foot
Which compiles to the following HTML:
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
<link rel="stylesheet" href="/dist/css/app.css">
</head>
<body ng-app="ExampleApp" ng-controller="ExampleAppController" class="ng-scope">
<!-- ngView: -->
<footer class="page-footer">
<ul class="page-footer-links">
<li>Some Twitter User</li>
</ul>
</footer>
<script src="/dist/js/app.min.js"></script>
</body>
</html>
Notice how div(ng-view) is now an HTML comment within the rendered HTML, rather than a DIV with the directive:
<!-- ngView: -->
Changing div(ng-view) within the Jade to any of the following produced the same result for me:
ng-view
<div ng-view></div>
| <div ng-view></div>
Any ideas as to why this is happening?
This was actually nothing to do with Jade. As stated in a comment by #NikosParaskevopoulos, the <!-- ngView: --> HTML comment is a placeholder created by Angular upon seeing a <div ng-view> and having no route to display in it.
Redefining my Angular routes solved the problem.
Simple, but specfic question. I have a site which is using Pixastic to blur images. There are two images on a page which need to be blurred. This seems to work fine in IE (which I believe is using filters on the images) but doesn't work on other browsers (Firefox/Chrome). In those browsers it just effects the second image and the first is replaced by nothing - so I just get a rendered page with one blurry image on it instead of two.
I'm using the jQuery selector, by the way. The code I'm using is basically just this:
<head>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/pixastic.custom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.blur').pixastic('blurfast', {amount:0.2});
});
</script>
</head>
<body>
<img src="img/title1.png" title="" class="blur" />
<img src="img/title2.png" title="" class="blur" />
</body>
Does anyone know if it's possible to affect multiple images with Pixastic, and if so, how?
Thanks
As far as I can tell, what you have that should work.
Option 2. Try specifying a CSS class explicitly instead?
e.g. roughly something like:
<html>
<head>
<script type="text/javascript">
var pixastic_parseonload = true;
</script>
<script src="pixastic.core.js" type="text/javascript"></script>
<script src="invert.js" type="text/javascript"></script>
</head>
<body>
</style>
<img src="img/title1.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
<img src="img/title2.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
</body>
</html>
I have a web app were the entire layout remains constant except for one <div>. Currently, I'm just using routes to handle links and it seems like quite a waste to reload the rest of the layout.ejs file where the only thing I wish to change is my <div>.
What would I have to change in my layout.ejs file? Here is my current file:
<!DOCTYPE html>
<html lan="en">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="/javascripts/chat.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="chat">
<input type="text" id="text-input">
<input type="button" value="Send" id="send-button">
</div>
<div id="content">
<%- body %>
</div>
<div id="rooms">
</div>
<div id="footer">
<div id="footer_links">
Home | About | Contact
</div>
</div>
</div>
</body>
</html>
I was thinking about using AJAX to use this, but I've heard some good things about using partial views. I'm just not sure at all about how to set this up. Also, I've heard that it's possible to use WebSockets with partial views instead of AJAX. Is this a good idea, or even possible?
Sorry this may be straightforward. I'm having a difficult time with the documentation.
Thanks!
I just worked it out.
You can call `partial(filename)` in the view to load the partial. say we use EJS, and there is three files in `views/`:
1. layout.ejs
2. index.ejs
3. header.ejs
and the content of index.ejs is :
then, start the server, browser it, you will see `header.ejs` is loaded to `index.ejs`.
!!!　UPDATE
In the express version >=3.0, there is no partial() any more. But we can use <% include xxx.file %>, or just use another module: "express-partials". Please search it on Github.