Sharing Layout with Portable Area in ASP.NET MVC - asp.net-mvc

My application is designed to use portable area to modules of functionalities. But each of these modules has to use the _LayoutBase from the root project. The Layout of the these modules are set with
Layout = "~/Views/Shared/_LayoutBase.cshtml";
The css and scripts referenced in _LayoutBase are not loaded when accessing
http:/localhost/RootWeb/module1/account/login
Any idea how do I resolve this. Any help is greatly appreciated
George

I have just dealt with this type of issue, here was our workaround:
Open _ViewStart.cshtml for your module and change to this:
#{
this.Layout = "~/Areas/<YourModuleName>/Views/Shared/_Layout.cshtml";
}
Open _Layout.cshtml for your module and update this (sets it to the root application's _Layout):
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Also, you have a couple options regarding the CSS/Scripts issues:
Update all references to the said area; "~/Content/style.css" ==> "/AreaName/Content/style.css" (and the same for the JS files)
Add the CSS/JS to the root bundle config and layouts, ensuring it gets loaded from there. Remember to move all other required assets up to the root as well or you will be missing images and the like.

Related

Structure in a Blazor App and why can't I have one?

So, I've created a bog-standard Blazor Server App using dotnet new blazorserver. Opened the solution in VS and run it.
Fine.
If I add a new folder, say Components and add a new Razor Component in that folder - Component1.razor - then in my index.razor page I add a using statement to point at my Components folder and the mark up to include the component itself and run the app, the index page shows, but there is no sign of my component. Further looking at the source of the rendered HTML, I see an empty element <component1></component1>
If I move my new component to the Pages folder and rerun the app, the component renders properly.
If I create a sub-folder under Pages and move my component to there and rerun the app, the component fails to render.
Am I doing something wrong? Am I expecting too much? Should I be able to have a structure that means I don't have to have every single component in a single folder?
I think you missing the point of _Imports.razor. You can put your pages anywhere they will be found by the #page "" attribute. If you want your components to be available either put a reference to their folder via the _Imports.razor or use the #namespace attribute/directive to override the namespace from folder its is in to another that is being imported. There is nothing special happening here. The template puts a using statement in for the "Shared" folder. This is why App.razor in the root folder has access to them.
Example _Imports.razor (From a project with name/default namespace of PolymorphicApi)
...
#using PolymorphicApi
#using PolymorphicApi.Shared
If you do not want to use _Imports.razor, you may not want to make all your components available. You can use #namespace in the component. This is the same as overriding the default namespace in a .cs file.
Example :
#namespace PolymorphicApi
A component using this statement could be in any subfolder and will be available as the root namespace is already imported.
As a side note: _Imports.razor can be thought of as a chunk of razor statements that will be imported into all razor components in that folder down. You do not have to use it just for namespaces. For example you can use an #inject statement. I do this to have Localization in every component by default.

How to use two themes in asp.net mvc project

I have two themes' folders called Default and New in Views folder. These folders are included .cshtml extension files. I want to use these folders as theme option. How can I do theme settings in global.asax?
Install bootstrap through visual studio Manage Nugget Packages and you can utilize free themes available. Lot of free themes are available in https://bootswatch.com/. Download a CSS from the mentioned link and replace the one in your bootstrap CSS folder. Hope this helps...
EDIT
Actually in Asp.Net MVC Global.asax has nothing to do with setting themes. Current theme in MVC is decided by the styles specified in _Layout.cshtml file. Usually this file lies inside Views\Shared path. The _ViewStart.cshtml which lies directly under Views folder decides which layout should the view use.
Approach 1
If we require some other layout for certain views we can add another _ViewStart.cshtml inside the folder where those views exist and specify the path of _NewLayout.cshtml in it. The views will automatically get the new layout/theme while you render it.
Approach 2
Use a logic and set your layout/theme accordingly as shown below in /Views/_ViewStart.cshtml file,
#{
if (this.User.IsInRole("Admin") || !this.User.Identity.IsAuthenticated) {
Layout = "~/Views/Shared/_Layout.cshtml";
} else {
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
}

deployment path issue in css

I have to rewrite a legacy asp.net mvc app using lots of:
Url.Content()
to get it to work in a different/additional deployment environment where the virtual directory is a sub directory of the default site.
At the moment css classes like this:
.icos-pencil:before { content: url(/content/images/global/icons/usual/icon-pencil.png); }
are also broke. Is there a similar 'helper' (?) like Url.Content for the css above?
If you want use helper in js or css file you can write own view engine such as jsHelper or you can use this code
background-image:url('../../content/images/global/icons/usual/icon-pencil.png');
becomes
background-image:url('content/images/global/icons/usual/icon-pencil.png');
Simply use relative path in your CSS.

Why doesnt the MVC4 bundling bundle Knockout.js?

I have downloaded MVC4 and trying to work out how the bundling feature works in a standard project. It would seem that having the bundle:
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
Brings back all the jquery.js files but not the knockout.js files in the included scripts. Why is this? And also what is the _references.js file about and why is the knockout.js file commented out?
If you look into your project Global.asax file, you should find there something like this:
protected void Application_Start()
{
...
BundleTable.Bundles.RegisterTemplateBundles();
}
Now the RegisterTemplateBundles is registering only a predefined subset of scripts:
jquery-*
jquery.mobile*
jquery-ui*
jquery.unobtrusive*
jquery.validate*
MicrosoftAjax.js
MicrosoftMvc.js
modernizr*
AjaxLogin.js
If you want some additional files you could either change RegisterTemplateBundles to EnableDefaultBundles:
protected void Application_Start()
{
...
BundleTable.Bundles.EnableDefaultBundles();
}
Or create your own custom bundle (you can read more about bundling and minification here). You should also know that EnableDefaultBundles has some performance impact.
The _references.js file is used by Visual Studio for JavaScript intellisense. You can learn more from following article:
JavaScript Intellisense in VS11, The _references.js File
tpeczek is correct. Most folks don't use Knockout.js, that's why it's not included by default. Bundling/Minification (BM) has changed considerably for RC and it will be much simpler to add files to bundles. See my Bundling and Minification tutorial
I was able to add a file to the bundle with the following line of code added after the RegisterTemplateBundles()
BundleTable.Bundles.RegisterTemplateBundles();
BundleTable.Bundles.Where(x => x.Path == "~/Scripts/js").First().AddFile("~/scripts/knockout-2.0.0.js");

Relative filename in ERB files

I am putting my ERB files in app/view. The problem is that sometimes I make mistakes when including CSS and JS files. I refer to them as "js/include.js" or "css/default.css" instead of /js/include.js and /css/default.css
However, these files are located in the public directory not the app/views directory so as a result the page breaks.
Is there a way to change the default behavior so that it looks in public folder whenever I refer to these files relatively?
If you stick with the Rails conventions you'll save yourself some grief. Use stylesheet_link_tag and javascript_include_tag in your layouts. And don't scatter css and js includes around your views. Use custom layouts instead.
For example, if you have an admin interface with a different look and different behavior you could add app/views/layouts/admin.html.erb. Then, in AdminController specify that it should use the admin layout. You can also specify the layout at the controller action level if you need to.

Resources