I am using MVC/Razor/.Net/C# and i would like to allow users to change the theme of the site just like you can change the theme in microsoft windows.
Does anyone know how to, or, can point me in the direction of some good tutorials/examples.
Cheers
This is a very, very broad question with any number of correct approaches.
You could create a base controller that loads the user's selected CSS theme name from a database during each request. Then you can put that value into the ViewBag (or ViewData) and reference it in your view:
<head>
#{
var themeName = ViewBag.ThemeName;
}
#if (String.IsNullOrWhiteSpace(themeName)) {
themeName = "default";
}
<link href="#Url.Content(String.Format("~/themes/{0}.css", themeName))" type="text/stylesheet" />
</head>
Usually this functionality is achieved with multiple CSS files and has little (or nothing to do with .NET).
You should design your HTML in a semantic way so that by changing the CSS files the entire output is different with each CSS applied.
This link gives a more explanatory intro into the subject -> http://www.thesitewizard.com/css/switch-alternate-css-styles.shtml
After you do that, what you need to do in your application is to store the user preference (of what skin) in a session or something like that and change the CSS file accordingly.
Asp.Net WebForms use to have the Skin/Theme feature, but I think that it was deprecated (it is not very good) and I also saw an implementation where instead of HTML the developer used XML and XSLT files to render the views (which is also too complicated for my taste).
Related
Is there a way to find all the src="" urls when rendering a ASP.net MVC page in the view to then generate DNS prefetch tags on the fly?
https://www.chromium.org/developers/design-documents/dns-prefetching
If I understood correctly I can tell you the following:
Option #1: (Not a pretty solution but would work.)
NOTE: for this try to use simple Javascript and not rely on JQuery or other (since then you still need to "load" the .JS file for that and that is ruining the point of your question.
Process your src/href or some other predefined property tag with some kind of "OwnLogic" to define the "base target",
but in a way that the browser would not be able to initiate the request to obtain that image or other file.
Example:
<img url="" class="DNS_BaseTarget" DNS_BaseTarget="smiley.gif||myCDNPointerInfo" alt="">
Then, with javascript, get a list of all elements that uses the class DNS_BaseTarget and then read the property value and update the "src" tag.
At the same time you can inject by javascript inject all the '<link rel="dns-prefetch" href="https://cdn.yourTargetDomain.com">' that you will use based on the information you just processed.
I did not tested this concept, so "lag" or some sort of delay in the client might be expected (but maybe not noticeble by the user).
Option #2:
The View Result Execution Process (in MVC life cycle) tell us that the method 'Render()' is the last one to be executed.
With this being said, you can create your own custom override logic
Example: intercept view rendering to add HTML/JS on all partial views?
How to intercept view rendering to add HTML/JS on all partial views?
With this concept of trying to "process" the final html before sending it to the user, you could somehow "parse" the file.... try to get all the 'src/href' and then
inject all the '<link rel="dns-prefetch" href="https://cdn.yourTargetDomain.com">' that you will use.
I have a problem where I am trying to have a default CSS page, but depending on certain aspects can have their CSS changed. Groups of people can have their CSS changed to their own custom version via database entries, they post a long string that has what the CSS needs to be set to. But, they can also do something simple and simply want to overwrite maybe just the background or the entire site.
<head>
<link href="/static/css/styles.css" rel="stylesheet" />
<style type="text/css">
#{
WebExtensionHelper.CustomCSS();
}
</style>
</head>
WebExtensionHelper.CustomCSS() returns a string with all the CSS in it, as stated previously. I need this to affect every page so I need this on the _Layout.cshtml page. Another thing to consider if it's helpful, I will have about 200 people who would like customcss.
One solution is to generate a custom CSS file at run time. In your layout you can point the stylesheet link to a controller action instead of an actual file:
<link href="#Url.Action("Index", "Style", new { whichStyle = myValue })" rel="stylesheet" type="text/css" />
In the Style controller, create an Index method:
public ActionResult Index(string whichStyle)
{
MyStyleViewModel model = new MyStyleViewModel();
// -- (Load relevant style settings here) --
Response.ContentType = "text/css";
return View(model);
}
And then in the Index view, write out css as normal:
#model MyStyleViewModel
#{ Layout = null; }
body
{
color:#333;
#if (Model.Font == "Lucida")
{
#:font-family:"Lucida Grande", sans-serif;
}
else
{
#:font-family:Georgia, Serif;
}
}
I haven't run that exact view code, so adjust as needed for your situation.
You could simply use LESS. It is supported in Visual Studio 2012 (and 2010) and MVC 4, so it is easy enough to use, and will do exactly what you want. It is perfect for your scenario.
Setting up LESS requires more work than I can put into an answer here, so as much as I hate to do this, here are two links:
http://geekswithblogs.net/ToStringTheory/archive/2012/11/30/who-could-ask-for-more-with-less-css-part-2.aspx
http://www.hanselman.com/blog/VisualStudio2012RCIsReleasedTheBigWebRollup.aspx
http://richardneililagan.com/2012/08/automatic-dotless-compile-less-css/
Once set up you can either compile on the server side with Dot LESS, as mentioned in the last link above, or send it to be processed on client side with javascript.
It should be
#WebExtensionHelper.CustomCSS();
not
#{
WebExtensionHelper.CustomCSS();
}
Sorry for those who tried to help me earlier, I was unable to copy and paste my code at the time, and noticed in my question that I answered my problem.
I am decision dilemma as to the requirement of a client
I want to change the look and Layout both of the site - XXX Client
Generally this is how it should work,
You change a theme the website is displayed with different images and Colors.
You change a masterpage your website changes it's layout (sidebar moved to right from left - provided the layout is specified in masterpage)
I am confused as to how one would accomplish this. If i design my pages using a default masterpage then when i switch to another masterpage there is no assurance that other masterpage might have same content placeholders.
This would throw an exception
How can i implement multiple masterpages Intelligently without creating 2 pages each for the respective masterpage ?
Edit
dilemma is caused by other colleague implementing his own ideas into pages developed by him, He over popups to display forms on sidebar link clicks mine directs to separate pages.
You should be able to achieve this in CSS without changes to masterpages or themes. That way you will guarantee that the content placeholders will be unchanged.
Change your images to be set from CSS (something like):
.imageFromCss { background:url("../images/myimage.png");}
And CSS can move sidebars from left to right:
.sidebar {display:inline; float:right;}
You can change dynamicly the masterpage on PreIint.
Select Case iForum
Case 6 '41
MasterPageFile = "/Children/Forum.master"
Case Else
MasterPageFile = "/Ezra/Forum.master"
End Select
(I know that I can write better example)
Now, Create a BaseMaster class, with your variables, functions, etc, and inherit the website MasterPage from this class.
Now add to the top of page:
<%# MasterType TypeName="ForumMaster"%>
And now just use Master.YourFunction(). It will work with all MasterPages.
Good Luck !
I have a web application I'm working on, and I'd like to avoid the clutter of if/elseif/else in the view, and of having way too many separate ascx files just for conditional inclusion in a view.
What I want to do is create some sort of simple class that works like so (an example will demonstrate what I'd like to achieve)
<% using(RequiresAccessTo.Feature(Features.FancyStuff)) { %>
Special content for users
<% } %>
If the user does not have access to the feature, the class would render a sign up link instead. I know I could simply use if/else, but the content of the else block could be one of 2-3 different standard responses depending on access level, and this mechanism would be used in countless places around the website.
If there a way to simply prevent Special content for users from rendering altogether, it'll mean I can make the templates around the website really easy to maintain.
Another option you might try would be to create a custom server control. Properties on the control could include the feature set you'd want to check permission for. If that permission wasn't met, the control would render the sign up link appropriate for that access level or permission. Your view would end up looking something like:
<controls:SignUpWrapper runat="server" id="signup" access="FancyStuff">
<div>
Approved user contents.
</div>
</controls:SignUpWrapper>
In your control, you would first check permission then render either the appropriate link or the provided HTML. The trickiest bit here might be getting the routing information to your server control code. Not something I've tried. Worst case scenario I imagine you should be able to pass the necessary information or even the entire sign up link through properties. No wait, worse would be bypassing routing altogether and forcing the URL in through a configuration value, erm... yeah. Either way it's a bit wordier than your desired example, but not far off.
I suppose some folk might see even the server control idea as a bit wonky. But as long as you stay away from view state, post back behavior and maybe a few other classic ASP.NET features, there's nothing preventing using server controls. We all use masters and content containers already. Sorry to preach if you're already in the choir. =)
For the time being, this is stretching my imagination and maybe even common sense a bit depending on the difficulty of generating that link. I'll check back if I think of anything else.
I can think of one other decent option to keeping your if/else logic in a partial view.
You could create an HtmlHelper extension method. HtmlHelper is the object used when calling things like Html.ActionLink in a view. You can write your own method that produces whatever HTML you want. The conditionals all take place in the extension method and your view code is reduced to:
<%= Html.MyControl(param1, param2) %>
The rule of thumb I follow when deciding when to create an HtmlHelper extension method and when to create a partial view is generally how much HTML is going to be generated. If I end up with more than a few lines of rendered HTML, a partial control is generally your best bet as it is generally easier to understand and maintain the HTML.
If you're worried about organizing numerous partial views, you can create subfolders under your Shared view directory. The views can then be referenced like this:
<% Html.RenderPartial("Subfolder/PartialView") %>
I just thought of an alternative solution:
<% if(!BlockContentAndRenderPlaceHolder(Feature.Whatever)) { %>
whatever
<% } %>
I know it looks a bit obtuse, but if you saw the content on these pages, you'd understand.
Style sheet in master page is not working for one web page of asp.net application but it works for another web page.
If you are referencing a css file from a master page you should ensure it has an absolute path, that way it will work everywhere. For example:
<head runat="server">
<link type="text/css" rel="stylesheet" href="~/_styles/mystylesheet.css" />
</head>
The important thing to note here is that the head tag has the runar="server" attribute and that i am specifying the full virtual path using a tilde ("~").
Are none of its style elements being included? Is it being over ridden( they are Cascading Style Sheets)? Does it have the correct CSS include statement?
Are your pages in different levels of folders ?
For example,
..\main.css
..\folder1\MasterPage.master
..\folder1\css_working.aspx
..\folder1\folder2\css_not_working.aspx
in this scenario you should define your css in masterpage as :
<link rel="stylesheet" type="text/css" href="../main.css" />
And take your pages to same level, like that :
..\main.css
..\folder1\MasterPage.master
..\folder1\css_working.aspx
..\folder2\css_not_working.aspx
If you are using update panels there are some cases where the styling may be lost for AJAX toolkit controls. To fix this you need to put hte full name of hte class items into the stylesheet instead of letting hte toolkit handle this.
Also be sure to use a relative url where possible so that if a file moves it won't loose it's mapping.
Use Firebug or Debug Bar, these tools will show you all the styles being employed on each element, so you can see what stylesheets it is using and which ones it is not.
Also, when you build check for any warnings about stylesheets that it can't reference etc.
it could be a permission issue on the folder... if you have deny users="?" in your web config.. make sure you have an allow users on the folder where you have your style sheets