I have tried implementing Bundling in Asp.net webform projects.
My Bundleconfig:
System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.ScriptBundle("~/bundle/LoginPageJS")
.Include("~/assets/js/jquery-1.11.2.min.js", "~/assets/bootstrap/js/bootstrap.min.js", "~/assets/js/validatr.js", "~/assets/js/jquery.placeholder.js"));
System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.StyleBundle("~/bundle/LoginPageCSS")
.Include("~/assets/bootstrap/css/bootstrap.css", "~/assets/styles/stylesheet.css",
"~/assets/styles/non-responsive.css", "~/assets/styles/Window.css", "~/IACMSkin/Window.IACMSkin.css"));
BundleTable.EnableOptimizations = true;
MasterPage:
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My Sample</title>
<%: #Styles.Render("~/bundle/LoginPageCSS") %>
<%: #Scripts.Render("~/bundle/LoginPageJS") %>
</head>
It's working in my local machine as well as VM(Windows server 2016 IIS10) and not in UAT environment.
The difference I see here is
Below is from my local and VM:
<link href="/bundle/LoginPageCSS?v=1FyFAVt-XUmly2H-AbvXacpx3b4ou5J-Tsk2Ac5PxaE1" rel="stylesheet"/>
<script src="/bundle/LoginPageJS?v=Kw5fkDuqDSQdMcwvucaZg-o1ChJ6qAulChBWIhFdZhc1"></script>
Below is from UAT:404 error
<link href="/bundle/LoginPageCSS" rel="stylesheet"/>
<script src="/bundle/LoginPageJS"></script>
I checked debug="false" as well.
Please help
Related
I'm trying to create razor #section in one of my views, using umbraco:Macro tag, in order to add scripts/styles specific for each view into head tag.
My current code looks like this(head section of master page):
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="/css/foundation.min.css">
<script type="text/javascript" src="/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/js/responsiveslides.js"></script>
<script type="text/javascript" src="/js/js.js"></script>
<umbraco:Macro runat="server" language="cshtml">
#if(IsSectionDefined("JSIncludes"))
{
#RenderSection("JSIncludes")
}
#if(IsSectionDefined("CSSIncludes"))
{
#RenderSection("CSSIncludes")
}
</umbraco:Macro>
</head>
and this(actual section in view):
<asp:Content ContentPlaceHolderId="ContentPlaceHolderDefault" runat="server">
<umbraco:Macro runat="server" language="cshtml">
#section JSIncludes
{
<script type="text/javascript" src="/js/main_page.js"></script>
}
</umbraco:Macro>
But when i'm trying to open a page, i'm getting "Error loading MacroEngine script (file: )" error on top of my page.
Do anyone know the reason of this?
Would be great, if somebody knew how to add things like this properly.
Thanks in advance.
You don't need to use a razor macro to add page-specific script references, use a ContentPlaceHolder
Master page:
<head>
<asp:ContentPlaceHolder ID="PageScripts" runat="server" />
<asp:ContentPlaceHolder ID="PageStyles" runat="server" />
Content page:
<asp:Content ID="PageScript" runat="server" ContentPlaceHolderID="PageScripts">
<script type="text/javascript" src="/js/main_page.js"></script>
</asp:Content>
Reference
I'm developing an ASP.NET MVC4 web application. I want to create views that is spesific for mobile browsers. I have followed this tutorial http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features. I have installed the package jQuery.Mobile.MVC and added the requested line to the Global.asax file. The installation have created a file called _Layout.Mobile.cshtml, and this file looks like this:
_Layout.Mobile.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="a">
#Html.Partial("_ViewSwitcher")
<div data-role="header">
<h1>#ViewBag.Title</h1>
</div>
<div data-role="content">
#RenderSection("featured", false)
#RenderBody()
</div>
</div>
</body>
</html>
I also added a mobile view for the index view.
Index.Mobile.cshtml
#{
ViewBag.Title = "Home";
}
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
But when I open the webpage in an iPhone simulator, the page looks nothing like the one in the tutorial. It is blank with plain text. I have viewed the page source and can see that only the site.Mobile.css file is loaded.
<head>
<meta charset="utf-8" />
<title>Home</title>
<meta name="viewport" content="width=device-width" />
<link href="/Content/Site.Mobile.css" rel="stylesheet"/>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
I created a new web application project through VS2012, but this time I chose the Mobile Application template. When I run this project and view the page source, a lot more css-files is displaying.
<head>
<meta charset="utf-8" />
<title>Log in</title>
<meta name="viewport" content="width=device-width" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/jquery.mobile-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.2.0.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
I have checked that all of these files exists in my webApp project, but for some reason they are not loading. What am I doing wrong?
I have managed to figure this out, but the solution was a tricky one so I'm answering my own question in case others experience the same problem.
I changed the App_Start/BundleMobileConfig.cs from:
bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
"~/Content/jquery.mobile-{version}.css"
));
to
bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
"~/Content/jquery.mobile-1.3.1.min.css",
"~/Content/jquery.mobile.structure-1.3.1.min.css",
"~/Content/jquery.mobile.theme-1.3.1.min.css"
));
It looks like I only got the minified version of the jquery mobile css, while the stylebundle was looking for the original version. I think this is a bug when installing the jquery.mobile.MVC package.
I've been searching for an explanation as to why the following won't execute on the server
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href="<%=CurrentUser.ses.style.css%>" type="text/css" rel="stylesheet">
</head>
But the following will execute just fine
<link href="<%=CurrentUser.ses.style.css%>" type=text/css rel="stylesheet">
(notice the missing "")
I've even tried
<link href="<%=CurrentUser.ses.style.css%>" type="<%=Response.ContentType = "text/css" %>" rel="stylesheet">
But that will change the contenttype for the page and serve it all as being css.
What am I doing wrong?
try this ?
<link href="<%= String.Format("{0}",CurrentUser.ses.style.css)%>" type="text/css" rel="stylesheet">
I am trying to load stylesheet dynamically from folder, but currently, it isn't working:
<head id="Head1" runat="server">
<link type="text/css" rel="styleSheet" href="http://www.domain.com/users/'<%= UserNameVar%>'/styleSheet.css" />
</head>
UserNameVar contains string data.
Edit: This is the output when i upload it to server. but it is not loading
<link type="text/css" rel="styleSheet" href="http://www.domain.com/users/'<%= UserNameVar%>'/styleSheet.css" /></head>
Put all href value in <%= and %>
Try this:
<head id="Head1" runat="server">
<link type="text/css" rel="styleSheet" href=<%= "http://www.domain.com/users/" + UserNameVar + "/styleSheet.css />" %>
</head>
I am using JQuery for the first time today. I can't make it to work (It simple doesnt show up). I want to display inline content using Thickbox (Eventually I will be displaying a PDF in an iframe). I have included all the javascript and css files etc. and referenced them as in code below.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQueryLearning._Default" %>
<!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>Untitled Page</title>
<script src="Scripts/thickbox.js" type="text/javascript"></script>
<script src="Scripts/thickbox-compressed.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<link href="App_Themes/Theme/Css/thickbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#TB_inline?height=50&width=300&inlineId=hiddenModalContent"
title="Simple Demo" class="thickbox">Show hidden content.</a>
<div id="hiddenModalContent" style="display: none;">
<div style="text-align: center;">
Hello ThickBox!</div>
</div>
</div>
</form>
</body>
</html>
Am I missing something?
Thanks,
Ali
I think you need to alter the sequence of the script files, otherwise they won't work properly:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/thickbox.js" type="text/javascript"></script>
<script src="Scripts/thickbox-compressed.js" type="text/javascript"></script>
<link href="App_Themes/Theme/Css/thickbox.css" rel="stylesheet" type="text/css" />
Also: Aren't "thickbox.js" and "thickbox-compressed.js" different compression formats of the same module? In that case, you can omit one of them. If you want to debug inside the js, you need "thickbox.js", otherwise "thickbox-compressed.js" is sufficient.