I would like to create in my master page a control that depending on the rendered viewpage will change a css file
I was thinking to make a specific controller "CssController" and call this CssController from the src attribute of the css link. This controller will be in charge of choosing the right css and sending it back with text/css header.
question: will this approach break the mvc pattern? Indeed the choose of the design would be in charge of a controller. Is there a better alternative?
What i did in my master page was create a contentplaceholder in the <head> section, as so:
<head runat="server">
<title>Title Here</title>
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript" ></script>
<link href="<%= Url.Content("~/Content/css/site.css") %>" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
then, when you create a view using the master page, you can add the view-specific css you want into that content place holder. That way, it'll put your site.css first, plus the desired css, javascript, <script> blocks, whatever, on that particular view.
If you are using separate css files for separate themes, then those would be in fact the view and controller would work. So it does not seem to violate the pattern. But, it does seem to be a more complicated solution than others.
The common way I have seen to do this is with a Jquery Style Switcher
http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/
With a little bit of code you can determine the default style to show on each page
The basic MVC example sets Page Title via the controller. I'm not sure this is any different. If you were using it (for instance) to have users be able to select different skins for their experience, I'm not sure there is any other way to do it, regardless of whether or not it violates the pattern.
Related
I've started developing to sitefinity CMS and I'm having some conflicts when applying styles and Jquery/javascript to Different Widgets.
I want each widget to have its own Style and its Own Jquery and Javascrip functions.
What's happening is that I'm applying in one widget preventDefautls to all its textboxes, and the other widgets' textboxes get affected too.
I'm also applying different css to the widgets and there are conflicts too.
Maybe the good practice is to use the same css to all widgets.
but still when I want to apply something like preventDefaults to all its textboxes, all my widgets get affected.
How can I avoid this?
Im developing ASP.NET MVC Widgets
and this is my widgets structure
<script src="#Url.Content("~/Scripts/jquery-1.11.3.js")"></script>
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.805/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.805/styles/kendo.bootstrap.min.css" />
<style>
//addicional style
<style>
<script>
//scripts...
</script>
<div>
Content...
</div>
Some advices about good practices, documentation, or code would be great.
For the styles, I generally wrap my custom widgets with a specific class, eg "imageGallery", and then in my main css (which I manage with grunt/compass), I make sure to target that class explicitly. This way, I can have global style settings, but then also style specific widgets with tweaks. And the nice thing with grunt/compass, is that you can have a separate physical css file for each widget's styles, but they all get bundled together for publishing.
For js, I typically inherit from the SF types, eg "SimpleScriptView", and then override the GetScriptDescriptors(), GetScriptReferences(), etc methods. This allows the scripts to be bundled with the ashx, and cuts down on risk of duplication, etc. It can be a little more complicated to follow the Sitefinity layout of the javascript classes at first, but you'll be consistent with the framework, so you can even decompile SF to get more examples when needed.
I've been playing around a lot with the templating/layout concepts in Grails GSP. I've ben using layouts/content blocks for imitating ASP's master page behavior.
For example, I am using the tag <g:pageProperty /> in a template to leave a "placeholder" which can be overridden using a <content> tag:
myTemplate.gsp:
<body>
<g:pageProperty name="page.topDiv" />
</body>
myPage.gsp:
<html>
<head>
<meta name="layout" content="myTemplate"></meta>
</head>
<body>
<content tag="topDiv">
My top div
</content>
</body>
</html>
This works great for "appending" content to some spot within a template. However, I really want the behavior I can get in ASP.NET's master pages... which is to provide a "default" rendering of some content, and allow optional overriding. In an ASP.NET Master page, it would look like this:
myMaster.master:
<asp:ContentPlaceHolder id="something" runat="server">
<div>Default text/html here</div>
</asp:ContentPlaceHolder>
someOtherPage.aspx:
<asp:Content contentPlaceHolderId="something" runat="server">
Overriden content here!! I don't need to override this though :)
</asp:Content>
My Question:
Can I do this same default/overriding behavior in Grails' GSP?
There are a few different days you could accomplish this. The g:pageProperty is equivalent to the Sitemesh decorator:getProperty tag, so you can use a default attribute to indicate the default text to use. For example:
<g:pageProperty name="page.topDiv" default="Default text/html here"/>
However, I don't know of a clean way to get HTML content in there. You could use a g:if tag to test for that property and specify default behavior if it doesn't exist:
<g:if test="${pageProperty(name:'page.topDiv')}">
<g:pageProperty name="page.topDiv"/>
</g:if>
<g:else>
<div>Default text/html here</div>
</g:else>
The default content could also live in an external template gsp. The render method could then be used to display that content in the default attribute of g:pageProperty:
<g:pageProperty name="page.topDiv" default="${render(template:'topDiv')}"/>
Where in this case, the default content would be located in _topDiv.gsp.
I think you can try instead.
<g:render template=""><g:render>
I'm just trying to set up an input with datepicker and I'm getting the following error: "Object doesn't support this property or method".
I downloaded the JQueryUI without a theme and there is my head section of the master page:
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript" />
<script src="/Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
After that, I created an input text inside a partial view (that remains inside a view):
<input type="text" id="txtDataIda" />
And at the beggining of this partial view:
$(function() {
$("#txtDataIda").datepicker();
});
When I open the page, the error is shown and the datepicker won't work.
I suppose I must be doing something wrong since I've never got the chance to work with JQueryUI before.
Thanks in advance!
You should go to http://jqueryui.com/download and build a custom download with the features that you want. Then, just reference the 2 files (jquery-1.4.2.js, jquery-ui-1.8.5.custom.min.js) in the "js" folder and not all of the files in the "development-bundle" folder. Then, you don't have to worry about multiple files conflicting. I have a feeling that the .widget, .datepicker, and 1.8.custom files may be conflicting. But, if it's all in one custom file, then you don't have to worry about that.
Or if you're not using any other ui features, you could try referencing only the jquery-1.4.2.js, ui.core.js, ui.datepicker.js files to see if that works without conflict.
And, of course, double check that you've put the references in the correct master page that is being used.
Fixed!
The JQuery wasn't being loaded, because the script tag was self closing. When I changed it to , it worked, as bizarre as it seems.
Thanks!
I'm designing an MVC site, and I've already got quite a few things in the Site.css that only apply to one controller or even one page. I'd like to break this out into multiple css files and include them only when necessary, but how can I do this when all header information is in the Site.Master.
Note: I still want to use master pages, I just want some header resources to be per page or per controller.
I was able to do this by adding a ContentPlaceHolder into my Site.master header and then linking to the CSS statements via that placeholder. It works well from what I've seen.
Example:
<head runat="server">
<title>Site Master</title>
<asp:ContentPlaceHolder ID="css" runat="server" />
<link href="~/css/css.css" type="text/css" rel="stylesheet" />
</head>
Something else to consider - if you have a lot of "one-off" CSS styles, you may want to think about how you're setting up the styles in the first place.
How shall I apply Css Class to the root folder of my mvc application.Because when the application is not given the name of the controller and the start action it is not displaying the images and the css
I think your referring to the reference within link tag in your header?
If this is the case the best solution in my opinion is to use Url.Conent so your link tag will look something like:
<link href="<%=Url.Content( "~/Content/Site.css" ) %>" rel="stylesheet" type="text/css" />
That way no matter what the url the user is viewing the reference to the style sheet is always correct.