MVC4 How to configure different layouts & CSS for areas - asp.net-mvc-4

I have an MVC4 web app and have created 2 areas. I cannot see how to use different layouts for them. When I created the areas there was not a shared folder generated for them,
I have tried creating one in the area named BO and copying the _layout.cshtml file there, no luck. Copied the _viewstart.cshtml file there,
renamed the _layout.cshtml to and changed the layout call in the BO area's _viewstart.cshtml to
Layout = ~/Areas/BO/Shared/Views/_BOLayout.cshtml";
still no luck, neither the layout nor the css & JS files are loading when I navigate to the BO area home page.
Lots of stuff around on making areas use the root _layout.cshtml but I cannot find much on using different ones for each area. Any suggestions please?
PS. The above (Copied the _viewstart.cshtml file there) also breaks things; I get: Type 'ASP._Page_Areas_BO__ViewStart_cshtml' does not inherit from 'System.Web.WebPages.StartPage'. Error on navigating to the area.

The following structure should work for an Admin area for example:
~/Areas/Admin/Views/Shared/_AdminLayout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
#RenderBody()
</body>
</html>
~/Areas/Admin/Views/_ViewStart.cshtml:
#{
Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
~/Areas/Admin/Views/Foo/Index.cshtml:
<h2>Index view of FooController in Admin area</h2>

Related

How to create uneditable / locked regions in templates in IntelliJ IDEA

I have created a template file in my project which I want to apply to almost all pages in my website/project.
Ideally I would like there to be editable regions and uneditable/locked regions in the template, so that when I update the code in the template it should update all the uneditable regions in the pages that use this template.
For example, in Dreamweaver, you can do this:
<!doctype html>
<html lang="en">
<head>
<title>
<!-- TemplateBeginEditable name="title" -->
<!-- TemplateEndEditable -->
</title>
<head>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
The <title> and <head> areas remain editable for any page and won't be overwritten when a template file code changes. However if I was to remove the <html> tag then that would be removed for all pages using the template.
Can I achieve this in IntelliJ IDEA at all?
In IntelliJ IDEA consider using Structural Search and Replace - to find and replace some common code pattens or code templates. See Searching for XML and HTML tags, attributes, and their values for examples.

How to handle paths of JS and CSS in Golang Templates

currently am working in a Golang Site, as frontend I am using the go templates. In order to separate the different parts of the sites I created this templates:
Head: containing the <head> tag, and some imports of css
Header: defining the navbar of the site, logo, etc. It's only HTML
Footer: defining the HTML of the footer of the site.
SomePage: defining the body tag, this template calls Head, Header and footer. This file can be for example the index, the login, etc.
I added the Javascript imports just after I nest the footer template, but still inside the body tag. As example, I added them like:
<script src="public/js/SomeJS.js"></script>
<link href="public/css/SomeCSS.css" type="text/css" rel="stylesheet"/>
In the routes of my project I have defined public to serve those static files, this is working pretty nice. Now, I have some routes of the project, lets say:
router.GET("/",controllers.Index)
router.GET("/login",controllers.Login)
With the first route, the libraries are being loaded pretty well. Then, with routes as the second, I am not able to load them because the browser tries to locate that files as:
http://myserver/login/public/css/someCSS.css instead of
http://myserver/public/css/someCSS.css
In this case, I understand why it's adding the login to the URL. So, my question is, how it's normally handled?
By now I added the domain and folder to the imports, example:
<script src="MyDomain.com/public/js/SomeJS.js"></script>
But I really don't want to do it in this way, because anytime that the domain change I should be editing the code and it's not really pratical. Also, I don't want to add the imports of the libraries in every view that I create. I have some files (CSS and JS) that are common for all the project and I just want writte it once.
Thank you!
Add / in the being of the path, it is called relative path from domain root.
<script src="/public/js/SomeJS.js"></script>
<link href="/public/css/SomeCSS.css" type="text/css" rel="stylesheet"/>
Without /, it is called as relative path from current domain directory. This is the behavior you have right now.
Output:
http://myserver/public/css/someCSS.css
http://myserver/public/js/SomeJS.js

How can i render page without loading layout page in mvc?

In mvc project,recently I am working on project's performance improvement.I am facing problem for loading layout page.when I am rendering or changing page it should load only content on page,not the layout page.so, I want solution to render my content pages without loading of Layout page.
Set the Layout property of the content pages/views as null on which you don't want the layout page to be loaded.
#{ Layout = null; }
For this you have to use either ajax and partial views or any other javascript UI frameworks like knockoutJS or AngularJS
You would need to use Knockout, Knockout & jQuery can provide you with the postback you are looking for. Here is a link.
http://knockoutjs.com/
Your question is not very clear. Please elaborate it. From my understanding, you wanted a very basic layout for better performance.
This you can achieve by creating a new layout page and remove all the scripts and css files from it. Then use this layout page as your layout for the pages.
Your layout can be very minimal, something like
<!DOCTYPE html>
<html>
<head>
</head>
<body>
#RenderBody()
</body>
</html>

Grails Resources Plugin resource scope

I am struggling to understand the scope of resources defined with the Grails resources plugin.
I have created a small project (Grails 2.0.4) with a single domain item of Book and generated the associated Controller and Views.
I have then modified the main layout as follows:
<html>
<head>
<g:layoutTitle/>
<r:layoutResources/>
</head>
<body>
<g:layoutBody/>
<r:layoutResources/>
</body>
</html>
When I run the app I get no styling as expected.
I now add the following to the head list.gsp
<head>
<meta name="layout" content="main"/>
<r:require modules="jquery-mobile"/>
</head>
When I go to the list page now I correctly get the jquery-mobile styling as expected but when I go to the create page I also get jquery-mobile styling but was expecting no styling, as this page does not contain the tag.
It seems that the resources selected for one page are being used for all other pages. Is this expected behaviour?
Thanks,
Kim
Use Resources 1.2, it sounds like this might be an old bug.

<BODY> of the views in a "scaffolded" Ruby on Rails 3 web-app

do you know how can i modify the <BODY> tag of the rendered htmls files of my app's views?
I mean, i can manually edit the html, but the <BODY> tag is added automatic in run time...
And i'd like to do something like
<body bgcolor="#0000FF">
Thanks!
You need to edit the application.html.erb in the layouts subfolder of views in your application.
Of course, you'd be much better of doing this in a stylesheet rather than the markup directly :)