How to add a skin engine to asp.net MVC system - asp.net-mvc

I'm implementing a solution in ASP.NET MVC that later can be applied to couple of other fields. To do so it will require to re-brand the UI even though the underlying business logic wont need to change. I'd like to write the code in such a way that will allow other developers to only develop code that will only changes the UI. This is similar to the way that themes can be written against Wordpress Blog software.
Can any one suggest how to organize my project to make such feature work?

http://pietschsoft.com/post/2009/03/ASPNET-MVC-Implement-Theme-Folders-using-a-Custom-ViewEngine.aspx

I would not use bult in Themes (not actually sure if these still exist in MVC) But you could multiple sets of CSS (with related images) in a Themes folder with a separate path per theme eg: Themes\Default, Themes\Classic, etc where the only configuration is the Path element. This would split the styling from the core code and you would'nt need to use any Theme "Engines" etc.
In your MasterPages/Pages/Views you could just set the path to the stylesheets dynamically.

Have you tried using MasterPages?

Related

MVC project structuring

I have been looking for an solution for structuring my MVC5 project, but have not found anything yet.
What i look for is. I have an Main Website, which off-course has it's own Views, Scripts and Controllers, but what is special is that i like to have sub Website projects which add an menu point in the main page, but the sub website also contains it's own Views, scripts and Controllers( I have tried to draw a picture of what i'm talking about ).
The point of this is to have an structured in a easy way. But also to reuse the same views in a framework way.
You should be able to define an area in another project, found an article that explains in detail how it is done in MVC3, it should not be very different in later versions since areas and routing haven't changed a lot.
http://nileshhirapra.blogspot.no/2012/02/aspnet-mvc-pluggable-application.html
Update: you do not actually need to set up the project in the Areas folder, but you need to copy all content like views and scripts/css into there before being able to use it in the main application.
If you want these sites to actually be separate websites but only look similar, then that is what you'd need to set up. You'd probably want to decide on a single-sign-on scheme for that.

Is it possible to use razor layouts with Orchard CMS and bypass the theming

A little bit of context
We have a recent MVC4 web application used by a lot people that we would like to port to Orchard CMS. Even though this is an "admin" type of application, we don't want it to be part of the admin section of Orchard. This application is currently live and we would like the move to Orchard to be as invisible as possible to the end-user.
Where we are now
We followed this answer as how to Integrate existing ASP.NET MVC application with Orchard CMS but we use layouts (Razor not Orchard) and it is not working (by default) with the way Orchard renders pages (the views returned by the controllers actions are displayed without the layouts - _ViewStart.cshtml is ignored). I have tried to specify the path of the layout in the View method but it doesn't work or the path is not good since we are in a module. Is there a way to tell Orchard to use a _layout.cshtml file and bypass Orchard theming?
It is possible to bypass Orchard themes. Note that I am doing this with MvcMailer, so the outputted e-mail is "templated" HTML with a Layout. I cannot definitively say this works on regular pages, but you can try it. Just slap this in your view:
#inherits System.Web.Mvc.WebViewPage<object>
#{
Layout = "_Layout.cshtml";
}
Caveat: you cannot use the newer #model directiv. I just fall back to the old style and put my model where "object" is:
#using Namesapce.ViewModels
#inherits System.Web.Mvc.WebViewPage<MyViewModel>
Otherwise, it's pretty straightforward to create a Theme and override any of Orchard's shapes. There are two ways I do it:
Create a straightforward theme, override shapes (say you want a
different Login, just create Login.cshtml in the Theme's ~/View
folder), use alternates (use Layout-homepage.cshtml to override the
layout for the homepage), have your .css, etc.;
Use a couple of tricks to override the theme with code from a module, and create
your own views and shapes in a theme folder. You can, for example, have a Layout.cshtml file in your theme with code that displays a shape. However, the shape itself (.cshtml file) lives in your module, which is great for using a dashboard type theme that will
call a shape that is named the same in your different modules but
shows different content. The code for this is a bit more in-depth. Just ask if you need samples.
tl;dr No, it is not possible.
I don't like answering my own questions but since Bertrand Le Roy commented my question instead of answering it (no hard feelings) and he is part (or was?) of the Orchard team, I will answer with what I know, until someone comes with a better answer.
From what I understand, to be part of an Orchard project is to embrace it all the way, there is no in between. The custom (Orchard) view engine (which works with zones, layouts, widgets, shapes, etc.) cannot be bypassed (fallback to default MVC engine) in a module. As Bertrand suggested, I should convert my project to Orchard theming.

What is the use of jquery.mobile.structure-1.0.css in jquery mobile

I have a question. When i am creating an application in rhomobile jquery.mobile.structure-1.0.css present inside /public/jqmobile. My question
1) What is the use of jquery.mobile.structure-1.0.css
2) jquery.mobile.structure-1.0.css was not included anywhere (in layout.erb) the application. Then why jquery.mobile.structure-1.0.css is present. I try to find the use of jquery.mobile.structure-1.0.css but not getting good result. Any one can explain?
The structure CSS is used to make a completely custom theme, where you do not want to rely on any of the default themes that come with jQuery Mobile. It's a very basic bare bones stylesheet. You can use it in place of the main jQuery Mobile stylesheet, then you create your own stylesheet to override and customize.
Personally I seperate the structure css out so I can make changes to my themes without causing any major issues to the new theme.css architecture. Makes it a bit easier to make upgrades as new versions come out. Though it is a little tricky to verify that there are no new additions to the themes. I wouldn't use overrides on the base themes a,b,c,d, - I find it's better to build your own themes using those as bases, e,f,g, etc...

Do ASP.Net MVC Portable areas work with Umbraco?

I have an Umbraco website that I want to extend. I feel that ASP.Net MVC is the way to go for the extension I'm writing - I particularly like the idea of a Portable Area from MVCContrib. What I'm wondering is, how straightforward would it be to incorporate the Portable Area into Umbraco without recompiling the source?
More generally, is it possible to wire a portable area into an existing application just by modifying web.config? I'm thinking along the lines of creating a HttpModule and including that in web.config.
No, portable areas require a VirtualPathProvider to be set. VirtualPathProviders must be configured via code.
You could try some hacktastic approach using the App_Code folder. It may work.
The current version of Umbraco (4.x) is based on the web-forms model so it won't be easy incorporating MVC into it (though I believe Umbraco 5 - still in planning - will be MVC based).
Generally you either user XSLT or web-form User Controls to add functionality to an Umbraco site. However, I'm not clear what the "extension" you are writing actually does? Perhaps you could expand upon what it is designed to achieve?

Strategies for dealing with CSS in ASP.Net MVC UserControls

I have just started playing with the ASP.Net MVC framework, and today I created a simple UserControl that uses some CSS. Since the CSS was declared in a separate file and included in the View that called the UserControl, and not in the UserControl itself, Visual Studio could not find any of the CSS classes used in the UserControl. This got me thinking about what would be the most appropriate way of dealing with CSS in UserControls.
Declaring the CSS in the View that is using the UserControl gives more flexibility if the same control is used in different contexts and needs to be able to adapt to the style of the calling View.
Having the UserControl supply its own CSS would lead to a more clear separation, and the Views would not need to know anything about the HTML/CSS generated by the UserControl, but at the cost of a fixed look of the control.
Since I am totally new to the framework, I'm guessing people have already come to some good conclusions about this.
So, would you have the UserControl handle its own CSS, should it depend on the CSS declared in the calling View, or is there another, better solution?
If you look at a skinable toolkit like Yahoo UI it documents the classes used by each control and then provides a single skin file for the entire toolkit. By swapping out the single skin file you can change looks for your entire site.
I would assume that 99.9% of the time you would want to custom skin your controls and not have them come predefined with a look and feel.
As an example here are the CSS defines for Yahoo's TabView control
It should always be in your global CSS really. If you pass this on to a designer, you dont want to have to explain which control defines x style, etc.
A quick point... it's ok for your Views to be aware of HTML... that's what they are for. What I would recommend (if you want to be ubber cool), is to add a parameter to your "MVC UserControl" that specifies the class name. Example:
<%= MyHelperClass.Marquee("This text will scroll!!!", "important-text") %>
I'm of course pretending that "important-text" is the class name that I want to add to my control.
I am assuming that when you say "UserControl", you're referring to an example like in that link above.

Resources