I have a ASP.Net 2.0 site and want to translate it into MVC paradigm (I'm new to this), but starting from Zero.
I have some themes in my old site, but reading here and there, it seems like Themes doesn't fit well into MVC paradigm.
The question is:
What is the best practice in MVC for building a Themed user customizable site?
Can you give a little example, if applicable?
Note: I'm aware of this but they don't talk about best practices or how to start with.
Here's my code that I've been using for implementing "Themes" in ASP.NET MVC:
ASP.NET MVC: Implement Theme Folders using a Custom ViewEngine
It's nice when you're able to just swap out CSS files to change the theme, but this really isn't very practical in a ton of cases. Especially when each theme needs to have a completely different layout. In which case, you need to change the CSS and HTML that gets rendered, and this is why I wrote the code found at the above link.
A clean, semantically correct HTML with a good CSS is the way to theme any web app, whether it's ASP.NET, RoR, PHP, etc.
The best example of the power of CSS is CSS Zen Garden.
w3schools has a nice introduction/tutorial to CSS.
Each of your users could have an associated stylesheet which would get selected whenever applicable, i.e.:
<link rel="stylesheet" type="text/css" href="<%= Model.SelectedStyleSheet %>"/>
As themes were intended to style up tags you can use CSS to create a similar approach. I would probably recommend that you start with copying your default themes over to css definitions e.g.
html: <input type="button" />
css: input { color : light-blue }
Then for anything that had your non-default theme you can just apply classes to them. It takes a while to re-write all your themes as CSS, but once done it's worth the effort.
jQuery-ui themes are nice, and not too hard to implement.
Just link to the js and css file and don't forget the icons. And make sure to use Url.Content() in those links. Otherwise it might not be linked to the correct path, once you deploy it on a production server (i fell into that trap once).
Related
I've built an ASP MVC site and used bootstrap, Jquery, knockout and signalR, and inherited a mix of 3rd party MVC code integrated with controls like syncfusion. (I don't have a choice in this matter, company decision)
After coding the HTML helpers in the views,
I manually applied all the bootstrap styles took sometime and got it
to work. Now, with upgrade/changes to bootstrap (RC 3.1) I am finding
myself back to square one, hunting through the code and replacing it manually, lots of
changes. Can you please share a better way to transpile/emit/bind the
bootstrap CSS classes into the helpers (i.e. in an independent way of the
technology helper, whether its ASP HTML MVC helper, Syncfusion HTML
MVC helper, Rad or FluentBootStrap)
Please provide a solution/recommendation to apply bootstrap CSS to ASP MVC pages
That's easy to separate and maintain and CSS upgrade's Programmtically
or globally configurable/settable/applicable
I've been thinking extension classes might be a good option, but not sure how I can achieve this, if you've can show me how to get the custom bootstrap CSS bound so I can programatically apply it or globally,
Is there a transpiler or Razor Declaritve Helper (I know about the nuget package, I tried applying it, and it turned out to be more of a template, than declarative extension binding, and I couldnt use it with other libraries Syncfusion or DevExpress)
or some other way, I would greatly appreciate it.
Here is an example of what I do currently, with the Syncfusion library
#Html.Syncfusion().Menu("myMenu").AutoFormat((Skins)ViewData["Themes"]) - performance hog
or better option 2 below
http://mvc.syncfusion.com/demos/ui/tools/Menu/Appearance
#(Html.Syncfusion().Button("btnNormal")
.Text("Save")
.Width(100)
.Height(50)
.ContentType(ContentTypes.TextAndImage)
.ImageUrl(Url.Content("~/Content/Images/Button/icon_save.png"))
.CustomCSS("CustomCss_Button") )
-> I changed/upgraded manually to BootStrap RC 3.1, I changed this last part to the bootstrap
.CustomCSS("btn-default dropdown-toggle btn-primary"))
Not sure this would be helpful to you, but check out TwitterBootstrapMVC. Right now it supports v2.* of TwitterBootstrap, but the support for v3.* is being built.
Our answer is from the experience we are going through. Here is what we found,
currently, The twitter bootstrap MVC is your best option IMHO, we are moving everything to it and its free! Its probably better the broiler plate option.
The 3.0 upgrade is a big question for us as well, so this is
something Dmitry can clarify.
Also, auto creating type safe bootstrap HTML views/sections for models is another question.
In addition you will face challenges with custom controls, we have a OLAP BI client, which looks / or doesn't not have the same consistent look. Dmitry can you answer how to resolve this with twitterbootmvc
Dmitry, will the twitterbootstrap upgrade, auto upgrade to the 3.0 bootstrap or do we have do anything manually?
I just discovered that in visual studio you can for the precompile of RAZOR into HTML.
Can you add that as an option to fluent
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.
Ok so this is a little random but..
Using MVC 3 (with Razor view engine) with Knockout.js which uses jQuery Templating i've come across a little problem i'm sure is possible to solve.
In order to use jQuery-Tmpl you need to supply a template in
<script type="text/html">
...template elements go here...
</script>
Now the problem is that the razor view engine doesn't seem to generate HTML inside of these specific script tags. It handles standard html, (script type="text/javascript") fine but appears to just not do anything with the aforementioned script tag.
Does anyone know how to get around this issue i.e. how to use MVC 3 Razor with jQuery-Tmpl?
There is a pretty good solution in this blog post: http://www.wiredprairie.us/blog/index.php/archives/1204
This creates a "template" helper that emits the script start/end tags.
Otherwise, I have some ideas for putting templates in external files, which would be another way to avoid this issue. It involves storing the templates in .html files and injecting them into the page into script tags. There are certainly many ways that this could be accomplished though on the client or server side, just a few ideas.
A more general approach if you want to keep things in the document is using #Html.Raw to output html without affecting the edit-time syntax state.
For example:
#Html.Raw("<script type='text/x-dot-template' id='awesome_template'>")
<!-- insert some awesomeness here -->
#Html.Raw("</script>")
I happen to like the helper method suggested above a little better, but it has not always been something I was able to implement, so this is an alternative with its own benefits (namely clarity over ease of use and terseness)
I just defined some forms in /lib/form/doctrine/ But the form elements currently don't have any CSS formatting.
Is there a default stylesheet that I can quickly copy/paste to style the forms, error messages, etc.?
It's not out of the box for Symfony but Blueprint CSS is a nice CSS framework, and when I used symfony 1.4, it used to color automatically the errors (I don't know if they changed the class names and stuff).
It's a bit heavy, but it ensures a solid structure if you use it for your development.
I just used Symfony's CSS from the admin. It was exactly what I was looking for - good results with minimal effort. Thanks for the suggestion cuhuak.
This stems from my question that i started at MVC Beginner Question
Im now confident in developing a MVC website from the MVC side of things.
My fatal floor now is the UI level designing. i.e. designing views and master pages including css styling.
Just wanting to get any advice on where i should start? Im currently about to look at the expression studio to see if that will help.
I need to get up and running in this quickly so that it doesnt hold back the development of the website.
Thanks in advance
I would look at a CSS grid-framework like 960 Grid System or Blueprint.
There is often controversy from CSS/Markup purists as to whether the use of such frameworks is valid, but they often overlook that not everyone is a CSS expert. I have found that the use of these frameworks has saved me hours of productivity since my CSS skills (as a programmer) are not that great.
As far as using Expression, I tend to use this as a "test-bed" with simple HTML files. The Designer and CSS Style support seem to be more interactive than that which Visual Studio supports, so for quick mock-ups -- Expression, then move that HTML/CSS over to VS as soon as possible.
One other priceless tool to use while designing is the add-on "Firebug" for Firefox ... it allows you to inspect single elements on your page, the CSS properties affecting that element - it even allows you to change CSS attributes "on-the-fly" to immediately see the ramificatiions. This tool has saved me HOURS!
Consider finding a suitable theme in a free open source template.
Consider something that suits at http://www.freecsstemplates.org/.