I'm using Razor with WebPages but without MVC. I like the simplicity with this so I'm not interested in using MVC at this point. However I would like to be able to render a partial into my page. Like a menu, a footer, etc.
With MVC you can to this:
#{ Html.RenderPartial("Footer", Model);}
I would like to do something similar:
#{ Html.RenderPartial("footer.cshtml"); }
How can I achieve what I want?
take a look at this link http://www.mikesdotnetting.com/Article/151/Extending-ASP.NET-Web-Pages-Create-Your-Own-Helpers
Hope this will help you
also try this:
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
</head>
<body>
#RenderPage("/Shared/_Header.cshtml")
<h1>Index Page Content</h1>
<p>This is the content of the main page.</p>
#RenderPage("/Shared/_Footer.cshtml")
</body>
</html>
Related
I would like to stlye my .net core website. Currently there is a file called site.css with all the css for the website. However since i have multiple views i would like to be able to pick and choose what css is applied to what view. I want all my views to have the same navbar as my homepage or index view. Any suggestions?
However since i have multiple views i would like to be able to pick and choose what css is applied to what view.
You can add a Render Section control to your layout.
In your _layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
#await RenderSectionAsync("css", required: false) <-- Add this
</head>
<body>
#RenderBody()
</body>
</html>
And in your view file, you can specify which css it depends on:
#section css{
<link rel="stylesheet" href="some-css.css" />
}
I want all my views to have the same navbar as my homepage or index view. Any suggestions?
Simply put the navbar in your layout view file is fine.
Apply all your css changes to shared/_layout.cshtml page.
Document Reference
How do I make a link-text? I want to show how I tried do it. BeforeAfterResult
In HTML, links are defined with the tag:
link text
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>Visit google</p>
</body>
</html>
with javascript see here How do I create a link using javascript?
I have a paragraph in my website in which I have to highlight few words. Instead of using div and a class, I used a tag which I name myself as follows
<html>
<head>
<style>
highlight{
background-color:#FFF176;
}
</style>
</head>
<body>
A quick <highlight>brown</highlight> fox jumped over a lazy dog.
</body>
</html>
Here is the JSSFiddle
It seems to work fine. But is there anything wrong with this? Is it okay if I use it for a project?
There is nothing wrong in using custom tags. However, you didn't define the tags you used. Please see the links below to articles on proper ways to user custom tags/elements.
Using custom elements
Extending HTML by Creating Custom Tags
You can use this solution in a project, functionally it's ok but is advisable that you attach your tags with a common classname to define styles sheets (CSS), tags structures (HTML) and functionality (JavaScript) in differents source files.
I recommended you to put in a different file your CSS styles with a link-tag inside the head tag like this:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
In this pages you can learn much more about it:
MDN Web Docs Mozilla
Though it is alright to do that, I would suggest the following: https://jsfiddle.net/838Lrnwk/
<html>
<head>
<style>
#high .highlight{
background-color:#FFF176;
}
</style>
</head>
<body>
<p id="high">
A quick <a class="highlight">brown</a> fox jumped over a lazy dog.
</p>
</body>
This would give the same effect; however, you can control what paragraph has the the effect in and all other tags like font,em, strong, etc and still retain the highlight.
Suppose I have two html files footer.html and main.html. The footer contains a reference to the top of a page as follows:
<!-- footer.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<footer>
<small>To top</small>
</footer>
</body>
</html>
The main.html file embeds the footer by using the <object> tag (see note 1) as shown below. There can be several files similar to main.html. Because of this <a href="page#header"> may not be used.
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<div id="content"> Long content ... </div>
<object id="footer" type="text/html" data="footer.html"></object>
</body>
</html>
Question: Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
Note 1: The <object> tag can be used to embed another html, although without a relation:
You can also use the <object> tag to embed another webpage into your HTML document.
from http://www.w3schools.com/tags/tag_object.asp
The same can be done using <iframe> or <embed> instead of <object>, but the issue remains.
Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
No, it isn't.
If you use a relative URL, then it will be relative to the document that the link appears in (i.e. the footer).
If you use an absolute URL, then you have to specify which document you want to link to the top of (and since multiple documents will embed the footer, you can't do that).
You've ruled out generating the URL programatically with JavaScript.
Thanks to all for the comments and answers. Indeed, this approach seems not to work due to a missing relation between html files. In other words, footer.html cannot refer to the inside of main.html. Instead, I modified the structure, so that the main includes the footer directly and the content is embedded by using an <iframe> as follows:
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<iframe id="content" name="contentframe" src="content.html"></iframe>
<footer id="footer">
<small>To top</small>
</footer>
</body>
</html>
This solves the issue and works without JS, PHP or the like independently of the page loaded into the <iframe>. That is, it simply jumps to top keeping the contents of the loaded page. Eventually, there is one main and multiple long content pages which are loaded into this main. Tested with FF and IE.
I'm about to generate a pdf report (roughly 20 slides long) in java using Spring MVC, Thymeleaf and Flying-saucer. I would like to be able to structure the code according to the different slides so that I can easily add and remove slides and not have all code for all slides in one chunk. In the end, after Spring MVC and Thymeleaf are done, I guess I will have a lot of XHTML and CSS ready to be sent to Flying-saucer for PDF generation.
I haven't worked that much with Spring MVC but my feeling is that you first do the controller stuff, e.g. get data, work with the data and then put necessary data on the Model so Thymeleaf can continue and render the view based on a template and the data on the Model.
How can I divide the code parts in java and Thymeleaf in a good modular way? Anyone have a good design to be inspired by or can point me somewhere on the web where I can find good information about this?
In your case I suggest to fragment Thymeleaf templates into three parts - master, slide and content templates. You can fill report content dynamically from Spring MVC controller or build it in static way just in Thymeleaf.
I providing skeleton templates structure as I think it's the best (all templates supposed to be on root template path). If you want to add slide you just create new template with content and insert new line to master template. If you want to remove slide you just delete appropriate line.
Master template - index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<th:block th:include="slide :: slide" th:with="content=${'content1'}"></th:block>
<th:block th:include="slide :: slide" th:with="content=${'content2'}"></th:block>
<th:block th:remove="tag" th:include="slide :: slide" th:with="content=${'content3'}"></th:block>
</body>
</html>
Slide template - slide.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body th:fragment="slide">
<div class="slide">
<div th:replace="${content} :: content"></div>
</div>
</body>
</html>
Content template 1 - content1.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<ul th:fragment="content">
<li>Content 1</li>
</ul>
</body>
</html>
Content template 2 - content2.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<span th:fragment="content">Content 2</span>
</body>
</html>
Content template 3 - content3.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<p th:fragment="content">
Content 3
</p>
</body>
</html>