I'm working on an ASP.NET MVC 3 application. I primarily come from a ASP.NET WebForms background. I am working on an application with a complicated layout scheme. Because of this, i was hoping to have all of my layout code in, well, _Layout.cshtml. My challenge is, there is custom javascript logic associated with each page. I've found that if this JavaScript is included in the middle of my page, it doesn't work. So what I wanted to do was move it elsewhere. But in order to do this, I need something similar to the ASP.NET WebForms PlaceHolder control. Ideally, I would like to be able to do something like this:
<body>
<div id="myLayout" style="background-color:Gray; height:100%;">
<div id="myContent" style="background-color:Silver;">
#RenderBody()
</div>
<div id="myFooter" style="background-color:Silver;">
Footer
</div>
</div>
#RenderScript()
</body>
Is there a way for me to do this? Or am I going to have to write every page individually?
Thank you!
Here's what i do, in each of your views create a section like this, put any html you want in it
Any View:
#section Scripts
{
<script src="#Url.Content("~/Scripts/myscript.js")" type="text/javascript"></script>
<!-- Styles, more scripts, etc -->
}
Then back in your _Layout.cshtml you can render the section anywhere you want, the second parameter says if the page requires a Scripts section or not.
_Layout.cshtml: (anywhere you want)
<head>
#RenderSection("Scripts", false)
</head>
Related
Hello I have some problems with templating pages.
I am returning from controller a view called list:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/template">
<div layout:fragment="pageContent">
<p>LIST</p>
</div>
</html>
And I would like to put this into template where I have a lot of html stuff and:
<div layout:fragment="pageContent">Demo static page content</div>
But I am getting in web browser only list view.
How to put one view returned from controller to template using SpringStandardDialect?
So if i understand correctly, you want to inject that fragment which is called pageContent into some other html page (lets call it main.html for sake of it.
First thing to do is change the div in list to the following:
<div th:fragment="pageContent">
<p>LIST</p>
</div>
then in your main.html you would call the fragment via:
<div th:include="list::pageContent"></div>
or
<div th:replace="list::pageContent"></div>
Btw "list::pageContent" indicates that its in base folder, if its located in folder called example then it would be "example/list:pageContent".
here is the great example on Thymeleaf website: http://www.thymeleaf.org/doc/usingthymeleaf.html#including-template-fragments
Hope this helps, if not let me know.
I am coming from a PHP/Laravel direction and there we use the blade templating engine to load components into a specific layout like this:
Main Layout called: layout.blade.php
<html>
<head><title>Whatever</title></head>
<body>
#yield('content')
</body>
And then we load our components inside this layout by a file like this, called: content.php
#extends(layout)
#section('content')
<h1>This contents is loaded into the Layout</h1>
<p>Yada yada yada</p>
#stop
In the backend we link the route (lets call it "/content") to a controller that creates this view. And anytime we click on a menu-item with an anchor-tag, we load the views into our layout.
Now with Polymer, this is a different story, because I have no Idea how to go on about.
A layout in polymer looks more like this. Let's call this layout-one.html
<html>
<head><title>Whatever</title></head>
<body>
<core-drawer-panel>
<core-header-panel drawer></core-header-panel>
<core-header-panel content>
<core-toolbar main></core-toolbar>
<div>Main Content goes here...</div>
</core-header-panel>
</core-drawer-panel>
</body>
</html>
It's something like that, I know the structure above might have a mistake, but I am pulling this information out of my head.
Now if I have a different view I want to load inside the "content"-Area, intuitively I would have an achor-tag that loads a "content.html", which in turn would have to have all the html-tags and head-tags and so on... so I would load the complete page, which is counter-intuitive and non-dynamic.
I've seen the Polymer-Team accomplish, what I am trying to accomplish here:
http://www.polymer-project.org/components/core-elements/demo.html#core-scroll-header-panel
Just loading different contents into an existing polymer-layout.
So please in the name of god, can anyone tell me exactly how it is done, because I seriously have no idea at the moment. I am suggesting, that they used something like angular to create the views (because of the hash-tag), but my instinct says, that they made it somehow else.
I would be most glad, if you gave me besides the explanation on how it is done, also any resource on how I would be reproduce this behaviour. Maybe a good article or tutorial.
Thanks mates.
You're looking for the <content> tag. Check out how this works.
simple-layout.html
<polymer-element name="simple-layout" noscript>
<template>
<core-drawer-panel>
<core-header-panel drawer>
<content select=".title"><!-- content with class 'title' --></content>
</core-header-panel>
<core-header-panel content>
<core-toolbar main></core-toolbar>
<content><!-- all other content will show up here --></content>
</core-header-panel>
</core-drawer-panel>
</template>
</polymer-element>
home-page.html
<link rel="import" href="simple-layout.html">
<polymer-element name="home-page" noscript>
<template>
<simple-layout>
<div class="title">Home</div>
<h1>This contents is loaded into the main part of the layout.</h1>
<p>Yada yada yada. More content in the main layout.</p>
</simple-layout>
</template>
</polymer-element>
This way you can load a "page" element and it will include the layout it wants to use.
http://erikringsmuth.github.io/app-router/#/layouts
I have a boilerplate that has various includes, one being:
#include('nav')
I would like to use the same boilerplate for the CMS of my site, but use a different nav.
What would be the best way of getting the boilerplate to include a different nav when the user is using the CMS:
#include('nav-cms')
This is more of an architectural question, and the answer is that you can probably do this many, many ways. However, the answers can be Laravel specific, so here goes:
One method would be to change the include statement to be:
#include($navView)
And then either in your controller, or using view composer, you should set that variable appropriately.
Alternatively, you can do it using sections:
// layout.blade.php
<html>
<head></head>
<body>
#section('nav')
#include('nav')
#show
#yield('content')
</body>
</html>
// some-frontend-view.blade.php
#extends('layout')
#section('content')
Content here
#stop
// some-cms-view.blade.php
#extends('layout')
#section('nav')
#include('nav-cms')
#overwrite
#section('content')
CMS content here
#stop
That way it assumes frontend nav, and then you override it in the CMS for the CMS nav. Alternatively, instead of defaulting to 'nav' in the layout, you could use #yield, and specify it in the some-frontend-view.blade.php file as in the some-cms-view.blade.php file.
i was looking at this website and i am interested on how did the developer managed to load different htmls in a single page without the current page being reloaded...
here is the website: http://demos.kendoui.com/web/validator/index.html...
for example if you clicked globalization in the Framework section, you can see the url changed, the body changed also but a part of the page remains (the top part) and the current page is not reloaded...
i am just starting in web development and i want to know this technique... i hope you can share it to me.... thanks :)
It is using ajax partial updates. You send request to the server and get portion of the page and then place it in some element, for example in div.
Normal:
<html>
<head>
<head>
<body>
<div id="divToUpdate"></div>
#Ajax.ActionLink("Call Partial", "MyAction", "MyController", AjaxOptions{ UpdateTargetId = "divToUpdate" })
<body>
</html>
Partial:
<span> here is my partial view which will be placed in "divToUpdate" div after clicking "Call Partial" Link </span>
I'm wondering can Velocity make what I want :)
For example I have
<html>
<meta>
<title>My title</title>
</meta>
<body>
<div id="content">
<!-- here is my dynamic content -->
</div>
<div id="right">static content</div>
</body></html>
Now. I have 4 actions in my Spring based application
create, update, login, home
Every action have it own template. For create is a big form, for update small form, for login, login form, for home lates news.
There are very much diffrent each from other. Now I want to dynamicly swap content in my
Can I create such template-container (i mean the header part and right div) with dynamic part ?
I don't want to get the actions response to variable and pass it to template. I want to have a simple template for example create.jsp or create.vm or create.html and I want that my app automaticly will take the template of the action and render it in my static template-container.
I hope it is clear
Why not use Tiles instead? It's designed for this scenario.
I've used Tiles 2 with JSP in several projects and I like it. However, with Velocity I prefer macros for simple templating system.
main.vm:
#macro(main)
<html>
<meta>
<title>My title</title>
</meta>
<body>
<div id="content">
$bodyContent
</div>
</body>
</html>
#end
hello.vm:
##main
Hello, World!
#end
Spring configuration:
<bean id="velocityConfigurer"
...
<property name="velocimacro.library" value="main.vm" />
</bean>
Maybe this is not so pretty, but it has the advantage that every view is the one who decides which layout applies, more like JSF does.