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.
Related
I have watched a few tutorials on how to get the DateTimePicker working and I cannot get it to work.
However, I did notice my application has a basic built-in calendar. Please see below:
I want to know how I can customize this to format the time so it is only 20-30 minute intervals of each hour and limited the booking time from 9 am - 5 pm?
Also, I would like to be able to change the 01/01/0001 00:00 to be at least starting from this year onwards!
Here is my shared layout page which I have removed previous code in the scripts section that I was trying to get to work
I would like to point out to the viewer I have tried this many ways installing packages etc and it never showed up on my www root file. This template came with these styles etc already linked
Layout Page
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap 5 CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<!------ Come back to. Change layout using the cdn instead of installing the layout-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons#1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
</head>
<body>
<partial name="_NavBar" /> #*Created a partial to make the _layout page more nicer for
presentation purposes*#
<div class="container">
<!-- AMC Any alert defined in controller is rendered here -->
<partial name="_Alert" />
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© #DateTime.Now.Year - SolutionName- <a asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<!-- Bootstrap 5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- JQuery Needed for .NET Validation -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<!------- Allowing me to use Fonts -->
<script src="https://kit.fontawesome.com/7bdf81a9a5.js" crossorigin="anonymous"></script>
<!-------- Allowing me to use datatable.net tables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
View page for creating appointment:
<h4>Create Appointment</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="CreateAppointmentBooking">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input type="hidden" asp-for="PatientId" class="form-control" />
<label asp-for="StartDateTimeBooking" class="control-label"><i class="bi bi-book" id="datepicker"></i> Book Appointment</label>
<input asp-for="StartDateTimeBooking" class="form-control" id="datepicker" />
<span asp-validation-for="StartDateTimeBooking" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<label asp-for="NameOfDoctor" class="control-label"><i class="bi bi-person"></i>Name Of Doctor</label>
<select asp-for="NameOfDoctor" asp-items="Html.GetEnumSelectList<PatientHut.Data.Models.Doctor>()" class="form-control">
<option>Select Doctor</option>
</select>
<span asp-validation-for="NameOfDoctor" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<label asp-for="PreferenceOfAttendence" class="control-label"><i class="bi bi-info-square"></i> Appointment Preference</label>
<select asp-for="PreferenceOfAttendence" asp-items="Html.GetEnumSelectList<PatientHut.Data.Models.PreferenceOfAttendance>()" class="form-control">
<option>Select choice of appointment</option>
</select>
<span asp-validation-for="PreferenceOfAttendence" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DetailOfBooking" class="control-label"><i class="bi bi-card-text"></i> Reason For Booking</label>
<textarea rows="5" asp-for="DetailOfBooking" class="form-control"></textarea> <!------ Text box created here-->
<span asp-validation-for="DetailOfBooking" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
<a class="btn btn-secondary" asp-action="Details" asp-route-id=#Model.PatientId>Cancel</a>
</div>
</form>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker(
{
showTodayButton: true,
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 30
});
});
</script>
}
I wrote a demo based on your question, you can refer to it.
Model:
public class Test
{
[BindProperty]
public DateTime? RegisterDate { get; set; }
}
View:
#model WebApplication53.Models.Test
#{
}
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<div class='input-group date' id='datepicker'>
<input asp-for="RegisterDate" type="text" class="form-control" value="#DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
#section Scripts
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<
<script>
$(function () {
$('#datepicker').datetimepicker();
});
</script>
}
Result:
In addition, the installation package you mentioned does not appear in the www directory, you should use the library to add the required dependency packages, like this:
Then search for the dependencies you need and then download it and it will be displayed in your www directory.
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 an existing sample project in asp.net-MVC-5 with C#. The sample Project Working Fine. But the problem is, whenever I run the Project, the project will leads to the page,where my cursor was in. For Example, If I am editing in home-Index page means, while running-the project starts from Home/Index page only. But I want to start from Login page only. How to give correct link?
My codings are below:
My _viewstart as
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
My _Layout as
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
My Login Page is in the path
~Views/Account/Login.cshtml.
My Login design as follows:
#using M.Models
#model LoginViewModel
#{
ViewBag.Title = "Log in";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="~/Content/adminlte/components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="~/Content/adminlte/components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="~/Content/adminlte/components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="~/Content/adminlte/dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="~/Content/adminlte/plugins/iCheck/square/blue.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="~/Content/adminlte/dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<img src="#Url.Content("~/Images/Logo.jpg")" alt="HRMS" width="360" /><br />
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="" method="post">
<div class="form-group has-feedback">
<div class="input-icon">
#*<i class="fa fa-user"></i>*#
#Html.TextBoxFor(model => model.UserName, new { #class = "form-control placeholder-no-fix", #placeholder = "Username", #maxlength = "50" })
#Html.ValidationMessageFor(model => model.UserName)
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-icon">
#*<i class="fa fa-user"></i>*#
#Html.PasswordFor(model => model.Password, new { #class = "form-control placeholder-no-fix", #placeholder = "Password", #maxlength = "50" })
#Html.ValidationMessageFor(model => model.Password)
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
</div>
#*<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="User Name">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>*#
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 3 -->
<script src="~/Content/adminlte/components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="~/Content/adminlte/components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="~/Content/adminlte/plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' /* optional */
});
});</script>
</body>
</html>
Thanks in Advance.
This is a setting in the Visual Studio project. Go to the Project properties and look on the Web section. Change your Start Action from Current Page to Start URL and fill in the URL you want, which will most likely be your Project Url. You can copy it from there.
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.
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>