I have create a website with masterpage. Apart from this, I also create a child page called - Home.aspx, which inside this home.aspx file, I have use a Jquery slider to display slide show of images.
The images had appeared successfully at first(no errors). However, upon adding more child pages and adding an Login control to the masterpage, the images are not appearing anymore. In addition, the file path of the images had appeared errors - "Warning File 'Images/h1.jpg' was not found."
I had tried to comment up the Login control inside the masterpage to check whether does it affect the jquery and eventually it did not.
Here is my code of the master page head section whereby I add in the jquery:
<head runat="server">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>BedOfRoses</title>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.slidertron-1.0.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Following is the Home.aspx file code:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="banner">
<div id="slider">
<div class="viewer">
<div class="reel">
<div class="slide"> <img src="Images/H1.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H2.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H3.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H4.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H4.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H6.jpg" alt="" /> </div>
</div>
</div>
</div>
<script type="text/javascript">
$('#slider').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
advanceDelay: 3000,
speed: 'slow'
});
</script>
</div>
Are these pages placed in a separate folder than the root one? Use the root selector instead of the current dir selector?
This
<div class="slide"> <img src="/Images/H1.jpg" alt="" /> </div>
instead of this
<div class="slide"> <img src="Images/H1.jpg" alt="" /> </div>
Related
I'm trying for like past 6 hours to create static not collapsible sidebar using Bootstrap 5.0, but unfortunately without success.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - ASP.NET</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-reboot.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
<!--here will be sidebar-->
</div>
</div>
<div class="col-lg-6">
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
<div class="col-lg-3">
<div class="sticky-top">
...
</div>
</div>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© #DateTime.Now.Year - ASP.NET - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
I have made comment where I want to put it.
I'm fully aware there are a bunch of tutorials and examples online, but they are not using raw Bootstrap 5.0, because even when I copy it 1:1, it returns plenty of warnings about missing classes, and as a result sidebar looks like it was made by someone who learns HTML for last few hours.
Horizontal navbars are fully supported, but creating working vertical sidebar looks impossible.
The blazor server template does a decent job at a side navigation bar. It's not the same as asp.net but the css in the template might give you some new ideas of things to try.
I'm following an older book (2017) so the code is outdated
I'm having a problem connecting bootstrap to _Layout.cshtml
I believe the problem is this link to bootstrap
<link rel="stylesheet" asp-href-include="/lib/bootstrap/dist/**/*.min.css"
asp-href-exclude="**/*-reboot*,**/*-grid" />
Since there is no wwwroot folder anymore. How do I link bootstrap correctly?
Here is my _Layout.cshtml code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" asp-href-include="/lib/bootstrap/dist/**/*.min.css"
asp-href-exclude="**/*-reboot*,**/*-grid" />
<title>SportsStore</title>
</head>
<body>
<div class="navbar navbar-inverse bg-inverse" role="navigation">
<a class="navbar-brand"
href="#">SPORTS STORE</a>
</div>
<div class="row m-1 p-1">
<div id="categories" class="col-3">
Put something useful here later.
</div>
<div class="col-9">
#RenderBody()
</div>
</div>
</body>
</html>
Here is my solution explorer image
Here is the List.cshtml that I'm trying to use bootstrap with
#model ProductsListViewModel
#foreach (var p in Model.Products)
{
<div class="card card-outline-primary m-1 p-1">
<div class="bg-faded p-1">
<h4>
#p.Name
<span class="badge badge-pill badge-primary" style="float:right">
<small>#p.Price.ToString("")</small>
</span>
</h4>
</div>
<div class="card-text p-1">#p.Description</div>
</div>
}
<div page-model="#Model.PagingInfo" page-action="List" page-classes-enabled="true"
page-class="btn" page-class-normal="btn-secondary"
page-class-selected="btn-primary" class="btn-group pull-right m-1">
</div>
You can use CDN links.
You should link the css library in the head tag, and scripts to last of body tag.
<head>
.....
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
......
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
I have a PDFTron Web Viewer control on my ASP.NET page where I can successfully view a static file 'GettingStarted.xod' already provided by PDFTron in the WebViewer folder. The file is returned by a ASP.NET web api REST service. The file displays successfully while running the solution locally. On hosting in Azure, I get the document from the web api successfully but the web page hosting the web viewer doesn't show the file, instead an empty web viewer control is only displayed. Please suggest how can I get the XOD to be displayed in the ASP.NET page hosting the web viewer control. The code for fetching the XOD file in settings.js file on WebViewer directory is as follows:-
window.WebViewerUniversalInstance.model.set(
{
documentUrl: "/api/Document/GetXODDocument",
//serverUrl: "../html5/annotationHandler.php", //server script for handling annotations
annotationUser: new PDFTron.WebViewer.User("Guest", false),
currentPageNumber: 0,
pageCount: 0,
zoomLevel: 0,
fitMode: PDFTron.WebViewer.FitMode.Zoom,
layoutMode: PDFTron.WebViewer.LayoutMode.SinglePage,
toolMode: '',
rotation: 0,
webViewerLibPath: 'lib/', //URL path to the WebViewer lib folder
webViewerOptions: { //extra WebViewer options
silverlightOptions: {
enableAnnotations: false //disable annotations if silverlight is loaded.
}
}
});
Adding the .aspx page markup and errors received in console tab of browser
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="DocViewer.aspx.cs" Inherits="PDFTronWebViewerWebApi.Content.WebViewer.View" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6 lt-ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 lt-ie9"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!--<![endif]-->
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- use latest browser mode for IE -->
<title>WebViewer Universal</title>
<!-- WebViewer.js Dependencies -->
<script type="text/javascript" src="lib/resources/jquery-1.10.2.min.js"></script>
<!-- WebViewer.js IF DEBUG -->
<!--<script src="../silverlight/Silverlight.js" type="text/javascript"></script>
<script src="../flash/FlashUtils.js"></script>
<script src="../flash/swfobject.js"></script>
<script src="../flash/FABridge.js"></script>
<script src="../flash/HttpAjaxPartRetriever.js"></script>
<script src="../WebViewer.js" type="text/javascript"></script>-->
<!-- WebViewer.js ELSE IF PRODUCTION -->
<script src="lib/WebViewer.min.js" type="text/javascript"></script>
<!-- WebViewer.js END -->
<!-- WebViewer Universal Dependencies -->
<script type="text/javascript" src="lib/resources/jquery-ui-1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/resources/modernizr.custom.js"></script>
<script type="text/javascript" src="lib/resources/i18next-1.7.1/i18next-1.7.1.min.js"></script>
<script type="text/javascript" src="lib/resources/backbone/underscore-min.js"></script>
<script type="text/javascript" src="lib/resources/backbone/backbone-min.js"></script>
<!-- WebViewer Universal Specific -->
<link type="text/css" rel="stylesheet" href="lib/universal/universal.css" />
<script src="lib/universal/universal.js"></script>
<!-- WebViewer Universal Settings (Modify this to your own server setup) -->
<script src="settings.js"></script>
<!-- WebViewer Universal Theming -->
<link type="text/css" rel="stylesheet" href="lib/resources/themes/cloud/jquery-ui-1.10.0.custom.min.css" />
<link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" /> <!-- use the extra icon set for the classic theme -->
<link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" media="screen" /> <!-- use the extra icon set for the classic theme -->
</head>
<body>
<form id="form1" runat="server">
<div id="headerContainer">
<!-- Optional: add custom header content here.
Example usage: Application logo/branding, links to other pages in your app (My Account, Login, Sign up), etc.
-->
<div>
<span>
<br />
<span style = "font-weight:bold; font-size: 22px;" > Doc View Page </span> <br /><br />
<span>Doc Number : <asp:Label ID="lblDocNo" runat="server" /> ; File Type : XOD</span><br />
<span>File : <asp:Label ID="lblDocName" runat="server" /></span>
</span>
</div>
<div style = "clear:both" ></div>
</div>
<div id="contentContainer">
<div id="leftPanelContainer" style="float:left;">
</div>
<div id="viewerContainer" style="float:left;width:100%">
<div id="control" class="toolbar ui-widget-header" style="overflow:hidden;white-space:nowrap">
<span class="left-aligned">
<button id="sidePanelToggle" type="button" data-i18n="[title]controlbar.toggleSidePanel;controlbar.toggleSidePanel"></button>
</span>
<div class="right-aligned">
<div class="group">
<button id="layoutModeMenuButton" type="button" data-i18n="[title]controlbar.pageLayoutModes;controlbar.pageLayoutModes"></button>
<button id="rotateButton" type="button" data-i18n="[title]controlbar.rotate;controlbar.rotate"></button>
</div>
<div class="group">
<button type="button" id="prevPage" data-i18n="[title]controlbar.previousPage;controlbar.previousPage"></button>
<input type="text" pattern="[0-9]*" name="pageNumberBox" id="pageNumberBox"/>
<div class="ui-label" id="totalPages">/0</div>
<button type="button" id="nextPage" class="" data-i18n="[title]controlbar.nextPage;controlbar.nextPage"></button>
</div>
<div class="group">
<button type="button" id="zoomOut" data-i18n="[title]controlbar.zoomOut;controlbar.zoomOut">Zoom Out</button>
<div class="hidden-xs hidden-sm hidden-md" id="slider" data-i18n="[title]controlbar.zoom"></div>
<input type="text" name="zoomBox" id="zoomBox" data-i18n="[title]controlbar.zoom"/>
<button type="button" id="zoomIn" data-i18n="[title]controlbar.zoomIn;controlbar.zoomIn"></button>
</div>
<div class="group">
<div id="fitModes" class="hidden-xs" title="Page layout">
<input type="radio" id="fitWidth" name="radioFirst"/>
<label for="fitWidth" data-i18n="[title]controlbar.fitWidth;controlbar.fitWidth"></label>
<input type="radio" id="fitPage" name="radioFirst"/>
<label for="fitPage" data-i18n="[title]controlbar.fitPage;controlbar.fitPage"></label>
</div>
</div>
<div class="group">
<span id="tools">
<input type="radio" id="pan" data-tool-mode="Pan" name="radioSecond" />
<label for="pan" data-i18n="[title]controlbar.pan;controlbar.pan"></label>
<input type="radio" id="textSelect" data-tool-mode="TextSelect" name="radioSecond"/>
<label for="textSelect" data-i18n="[title]controlbar.textSelect;controlbar.textSelect"></label>
</span>
</div>
<div class="group">
<span id="searchControl" class="search-component hidden-xs hidden-sm">
<input id="searchBox" type="text" class="toolbar-input-text search-component" name="search" data-i18n="[title]controlbar.search"/>
<button id="searchButton" class="search-component" type="button" data-i18n="[title]controlbar.search;controlbar.search"></button>
</span>
</div>
<div class="group">
<button id="downloadButton" type="button" data-i18n="[title]controlbar.download;controlbar.download"></button>
<button id="printButton" type="button" data-i18n="[title]controlbar.print;controlbar.print" style="display: none;"></button>
<button id="fullScreenButton" type="button" data-i18n="[title]controlbar.fullScreen;controlbar.fullScreen"></button>
<button id="aboutButton" type='button'>About</button>
</div>
</div>
</div>
<ul id="layoutModeMenuList" class="ui-widget ui-menu-dropdown" style="display:none">
<li data-layout-mode="SinglePage"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single"></span>
<div data-i18n="controlbar.layoutMode.single"></div></a></li>
<li data-layout-mode="Continuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single-cont"></span>
<div data-i18n="controlbar.layoutMode.continuous"></div></a></li>
<li data-layout-mode="Facing"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing"></span>
<div data-i18n="controlbar.layoutMode.facing"></div></a></li>
<li data-layout-mode="FacingContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing-cont"></span>
<div data-i18n="controlbar.layoutMode.facingContinuous"></div></a></li>
<li data-layout-mode="FacingCover"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover"></span>
<div data-i18n="controlbar.layoutMode.cover"></div></a></li>
<li data-layout-mode="CoverContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover-cont"></span>
<div data-i18n="controlbar.layoutMode.coverContinuous"></div></a></li>
</ul>
<div id="overlayMessage" class="overlayMessage" style="display:none"></div>
<div id="printDialog" style="display:none">
<div>
<span data-i18n="print.pagesToPrint"></span>
<input type="text" id="printPageNumbers" title="Enter a single page number or a single page range. e.g. 3, 4-10." placeholder="e.g. 3, 4-10" style="width:100px" />
</div>
<br/>
<div id="printProgress"><div class="progressLabel"></div></div>
</div>
<div id="documentContainer" style="overflow: auto;width:100%;">
</div>
</div>
<div id="rightPanelContainer" style="float:right;">
</div>
<div style="clear:both"/>
</div>
<div id="footerContainer">
<!-- Optional: add footer content here
Example usage: Application logo/branding, a secondary control toolbar (e.g. page navigation), status bar
-->
</div>
</form>
</body>
</html>
Console Errors in browser:
HTML1300: Navigation occurred.
DocViewer.aspx
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
DocViewer.aspx
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/jquery-1.10.2.min.map
HTML1500: Tag cannot be self-closing. Use an explicit closing tag.
DocViewer.aspx (166,13)
HTML1508: Unmatched end tag.
DocViewer.aspx (173,5)
HTML1521: Unexpected "</body>" or end of file. All open elements should be closed before the end of the document.
DocViewer.aspx (174,1)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/i18next-1.7.1/translation-en.json
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/underscore.js
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/backbone.js
SCRIPT7016: Use of XMLHttpRequest with the synchronous flag set to true is deprecated due to its impact on user-perceived site performance.
jquery-1.8.2.min.js (2,85652)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/html5/Resources/i18n/translation-en.json
SCRIPT5022: Error loading document: Invalid XOD file: Zip end header data is wrong size!
CoreControls.js (727,381)
As suggested by Ryan, I upgraded to latest version 2.2.2. I left the WebApi approach and using PDF Tron Web Viewer as used MVC controller to download the file first on hosted folder in Azure and then displayed the file on MVC Razor View.
It looks like you are running an older version of WebViewer that does not have the azure specific fixes.
You need to switch to the latest version.
https://www.pdftron.com/webviewer/download.html
You can check your version by bringing up a developer console in Chrome, in the top left there is a dropdown that should say "", change this to ReaderControl.html, then run readerControl.docViewer.version in the console.
I have a action which works well ( loads all images and CSS) as a normal action but when I use Rotativa.MVC.ViewAsPdf to produce a PDF it don't load the CSS. and the application doesn't show any errors
public ActionResult DownloadNonProfessionalDeputy(int id)
{
Application_Attorney_NonProfessional oAP = db.Application_Attorney_NonProfessional.Find(id);
return new Rotativa.MVC.ViewAsPdf(oAP) { FileName = string.Format("DCM_Attorney_Non_Professional_Application.pdf", new { CustomSwitches = "--print-media-type --header-center \"text\"" }) };// { = "--header-right \"Page [page] of [toPage]\""};
//return View(oAP);
}
help appreciated
Image from PDF
Image from HTML View
The View
#model DCM_Intranet.Models.Application_Attorney_NonProfessional
#{
Layout = null;
int nPage = 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="~/images/gale_phillipson_corn.ico" type="image/x-icon">
<title>Attorney Non-Professional Application</title>
<link href="~/css/style.default.css" rel="stylesheet">
<link href="~/css/jquery.datatables.css" rel="stylesheet">
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/modernizr.min.js"></script>
<script src="~/js/jquery-migrate-1.2.1.min.js"></script>
<script src="~/js/jquery.sparkline.min.js"></script>
<script src="~/js/toggles.min.js"></script>
<script src="~/js/retina.min.js"></script>
<script src="~/js/jquery.cookies.js"></script>
<script src="~/js/morris.min.js"></script>
<script src="~/js/raphael-2.1.0.min.js"></script>
<script src="~/js/jquery.datatables.min.js"></script>
<script src="~/js/chosen.jquery.min.js"></script>
<script src="~/js/custom.js"></script>
<script src="~/js/jquery.capslockstate.js"></script>
<script src="~/js/jspdf.js"></script>
</head>
<body>
<div class="container-fluid" id="content">
<!-- Top Header -->
<div class="row">
<div class="col-md-12">
<table class="table">
<tr>
<td valign="middle" align="left"><h2>Data Capture</h2></td>
<td valign="middle" align="right"><img src="~/Images/dcm.png" width="403" height="100" class="pull-right" />
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
#{nPage++;}
<div class="row">
<div class="col-sm-6 pull-left"><h2>Court of Protection/Power of Attorney - Non-Professional </h2></div>
<div class="col-sm-6 pull-right vcenter"><strong>Page #nPage</strong></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">
<strong>Should you require any guidance in completing this form please contact the DCM New Business Team on 01748 825971 or dcm#dcmcash.com</strong>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<p>This form is for use for Court of Protection/Power of Attorney case where the deputy is Not Acting in a Professional Capacity.</p>
<p>
This form is intended for professional Introducer/Adviser use only—please do not pass it to your client. The objective of this form is to collect all of the data required to operate Dynamic Cash Management efficiently without any need for your input at a later date.
</p>
<p>Please ensure that the form is completed in full, as any omissions may lead to a delay in setting up your client’s Dynamic Cash Management account.</p>
<p>
<b>
It is particularly important to ensure that your client is consulted on Sections 8 (ATRI) and 9 (Liquidity) as they are used to determine the types of institutions and accounts that we will deposit your client’s cash with. Proper consultation will ensure that Dynamic Cash Management use only those institutions that your client is comfortable with and that they are able to withdraw funds when they need them.
</b>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
You need to use absolute path for both css files and images, for example:
<link href="#Server.MapPath(~/css/style.default.css)" rel="stylesheet">
<img src="#Server.MapPath(~/Images/dcm.png)" width="403" height="100" class="pull-right" />
Your Code:
<img src="~/Images/dcm.png" width="403" height="100" class="pull-right" />
Updated Code:
<img src="~/Images/dcm.png" style="width:403px; height:100px" class="pull-right" />
Keep height and weight in the style attribute.
For the CSS Part, I did the following:
In Action,
return new PartialViewAsPdf("_PartialViewName", model);
In _PartialViewName.cshtml,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
#Styles.Render("~/Content/css")
</head>
<body>
// code here
</body>
</html>
In BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
//other css libraries
));
Optimize Css and JavaScript File
Remove Loader from CSHTML page
and Use async in javascript URL'
<script src="~/Content/Themes/1/js/script.js" async></script>
Like this
Adapting Stephen Zeng's answer for asp.net core. This in asp.net core here is what worked for me.
#inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment _env;
#{
var cssPath = $"{_env.WebRootPath}\\styles\\booking\\purchase\\receipt.css";
}
#section styles {
<link href="#cssPath" rel="stylesheet" />
}
A weird thing I ran into as well is that locally and in an Azure staging slot it worked without this. It would only work in the production slot with this change.
Using ASP.NET, C#, HTML5 and CSS3. My MasterPage is not recognizing the background image I have set in my stylesheet. I found an answer from 2009 on the ASP.NET forums from an MSN developer and it is still not working. After checking the code, the answer is relevant to XHTML transitional, the default doctype for .NET in Visual Studio.
Any suggestions? Thank you in advance.
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../changes.css" rel="stylesheet" type="text/css" />
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
html, body {
background-color: #000;
background-image: url('../images/darker_wood_1600x1200.jpg');
background-attachment: scroll;
background-repeat: repeat-x;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head><title>
</title>
<link href="changes.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkM1MGX8QufJ31wnSeINevDB81G3lHsitto4ucLAdg6zs=" />
</div>
<div id="PageWrapper">
<div id="Header"><a href="./">Header here
</a></div>
<div id="MenuWrapper">Menu here</div>
<div id="MainContent">
</div>
<div id="Sidebar">Sidebar here</div>
<div id="Footer">Footer here</div>
</div>
</form>
This code works for me, but I don't know if the code above is how it looks. Cause you post a stylesheet value in the middle of a div.
Also, if the page can't read the file. Try a different file or try changing the search path for the file. Maybe it can't read it because it's outside the server dir. Because the CSS code looks correct.
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../changes.css" rel="stylesheet" type="text/css" />
<link href="../style.css" rel="stylesheet" type="text/css" />
<link href="changes.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /></head>
<meta charset="utf-8" />
<style type="text/css">
// If you want the "Page" background to be this way:
html, body
{
background-color: #000;
background-image: url('../images/darker_wood_1600x1200.jpg');
background-attachment: scroll;
background-repeat: repeat-x;
}
// Or the PageWrapper
div#PageWrapper
{
background-color: #000;
background-image: url('../images/darker_wood_1600x1200.jpg');
background-attachment: scroll;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<!--- <form id="form1" runat="server"> --->
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkM1MGX8QufJ31wnSeINevDB81G3lHsitto4ucLAdg6zs=" />
</div>
<div id="PageWrapper">
<div id="Header">
Header here
</div>
<div id="MenuWrapper">
Menu here
</div>
<div id="MainContent">
</div>
<div id="Sidebar">
Sidebar here
</div>
<div id="Footer">
Footer here
</div>
</div>
</form>
<!--- </form> --->
</body>
</html>