The project I'm working on allows an end-user to modify CSS code to integrate the application as best possible. Most of the CSS values are stored in a database and need to be retrieved and parsed dynamically.
I setup a Style controller, and gave each stylesheet an action, and then passed the configuration data through to the View. I set the ContentType to "text/css" and then generated the stylesheets.
This works fine, but the problem I'm running into is this: none of the code works in the application. I include it in the head code, but it doesn't parse in the code.
An example of what I do is this:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" ContentType="text/css" %>
.element {
background-color: <%= ViewData.Model.BackgroundColor %>;
}
I include it like so:
<link href="/style/Basic" rel="stylesheet" type="text/css" media="all" />
When I include the CSS code in a partial view and include it using the ViewModel (wrapped in style tags) in an action, then everything works fine. It is when I try to parse this as a separate file when it does not work.
Is there something I am doing incorrectly? Or is there some kind of glitch?
Thanks in advance :D
Use a tool such as HTTPWatch to verify that the stylesheet is being sent down and not 404'd
Controller
public ActionResult Basic()
{
Response.ContentType = "text/css";
var basicVM = new BasicVM()
{
BackgroundColor = "Lime",
};
return View(basicVM);
}
And the View
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication3.Controllers.BasicVM>" ContentType="text/css" %>
body {
background-color: <%= ViewData.Model.BackgroundColor %>;
}
and the test page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Test</title>
<link href="/Home/Basic" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div>
Test
</div>
</body>
</html>
Turns everything Green
Related
Controller Class
#RequestMapping(value = "/")
public String indexmethod(){
return "index";
}
css file location : \src\main\resources\static\index.css
jsp file:
<%# taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="/index.css" rel="stylesheet">
<title></title>
</head>
<body>
<div>
<h2>cascascascascas</h2>
</div>
</body>
</html>
Try this:
<link href="${pageContext.request.contextPath}/index.css" rel="stylesheet">
Found the Solution. A specific #requestmapping(value="...") option in
Controller class block the static file.. I just delete that specific
#reqestmapping and after that i get access to static folder. I am
keeping this question. So that, it can help other to solve same
problem.
iv added a new folder inside my 'customPages' folder 'Check' i've then added a new webform page inside the 'check' folder called 'show'
<%# Page Language="C#" AutoEventWireup="true" CodeFile="show.aspx.cs" Inherits="DynamicData_CustomPages_Check_show" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
bla bla la
</div>
</form>
</body>
</html>
when I try to navigate it from another page it wont work ERROR: 28889/CRC/Check/show.aspx
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /CRC/Check/show.aspx
any idea as to why?
EDIT:iv even set it as my start page my right clicking, but it still cant find the page?
You said that you added a WebForm called List, so instead of show.aspx, you should try list.aspx.
If your new folder is in your custompages folder than url shoould be like this
YourApplication/customPages/Check/show.aspx
I think you are missing customPages folder
Open Global.asax
There should be something like this:
routes.Add(new DynamicDataRoute("{table}/{action}.aspx") {
Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }),
Model = model
});
Add 'Show' in the action list.
I was advised (by a person I cannot now contact to ask this) to use a query-string-trick to keep from caching a style sheet while I was debugging. The respondent said this would do the trick:
#{ var currentDate = DateTime.Now; }
<link href="#Url.Content("~/Styles/Site.css?" + currentDate)" rel="stylesheet" type="text/css" />
And I see why, but the expression #{ var currentDate = DateTime.Now; } is just resolving to the literal value in the page when I run it. The full code is:
<head runat="server">
<title></title>
#{ var currentDate = DateTime.Now; }
<link href="#Url.Content("~/Styles/Site.css?" + currentDate)" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
The syntax "#{ }" is new to me. I don't see a reference to it in any doc that I have looked at. According to the usage it appears to be inline script, but it isn't being treated as that at runtime, and I am not even sure if it is Active Server Page syntax (or PHP?).
What DOES work is:
<% var currentDate = DateTime.Now; %>
<link href="~/Styles/Site.css?<%= currentDate%>" rel="stylesheet" type="text/css" />
OK, but still, what does "#{ <some expression> }" signify?
It's Razor, which is a newer rendering engine for asp.net. It's doing the exact same thing as your <% %> block of code.
It is not an expression, it is a code block (a collection of one or more declarations and statements) in Razor syntax.
The reason it does not work for you is that you are not using the razor engine. # replaces the need for <% %> in asp.net by implementing the Razor engine, most notably through mvc3.
Is there any template based system available for .net? I have several domains i want to handle them using a single system. Each domain can have different design. But all will be manage through a single management system.
Assuming that you mean that you want your app to select it's CSS and images folder dynamically based on the host name (domain name) in the request in order to skin your app based on the domain name, you could try something like this:
public static class Skin
{
public static string Url(string assetPath)
{
var host = System.Web.HttpContext.Current.Request.Url.Host;
switch (host)
{
case "www.myfirstsite.com":
return UrlPath("~/Content/myfirst/" + assetPath.TrimStart('/'));
case "www.theothersite.com/":
return UrlPath("~/Content/theother/" + assetPath.TrimStart('/'));
default:
return UrlPath("~/Content/default/" + assetPath.TrimStart('/'));
}
}
private static string UrlPath(string virtualPath)
{
return VirtualPathUtility.ToAbsolute(virtualPath);
}
}
Which would make all your views look something like this when referencing CSS and images:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="<%= Skin.Url("css/master.css") %>" />
</head>
<body>
<img src="<%= Skin.Url("images/myimg.gif") %>" alt="myimg" />
</body>
</html>
Here is the full code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style type="text/css">
#import "jquery.countdown.css";
</style>
<script type="text/javascript" src="Scripts/jquery.countdown.js"></script>
<script type="text/javascript">
$('#shortly').countdown({ until: shortly,
onExpiry: liftOff, layout: "{ps} seconds to go"
});
$(document).ready(function () {
shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
$('#shortly').countdown('change', { until: shortly });
});
function liftOff() {
// refresh the page
window.location = window.location;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<span id="shortly"></span>
</form>
</body>
</html>
I've got the jquery.countdown.js in the Scriptsmap of visual studio. Also the stylesheet "jquery.countdown.css" is in the project.
Don't have a clue about what the problem could be. I'm kind of new to jquery and trying to learn it.
I'm not familiar with this countdown plugin, but, try moving the part
$('#shortly').countdown({ until: shortly,
onExpiry: liftOff, layout: "{ps} seconds to go"
});
into the function passed to $(document).ready, replacing $('#shortly').countdown('change', { until: shortly });
Because otherwise the shortly var is not initialized when you're trying to use it.
you have a error in liftOff function with windowwindow.location
function liftOff() {
// refresh the page
window.location = window.location;
}