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.
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 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.
Dropdown is not showing when clicked. Other input fields are working as expected except this.
The dropdown field is one of the field in form tag.
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
I've initialized it in the script tag just before the end of body tag. Also tried to put in head tag, or added document.ready as well as window.onload but all doesn't fix the problem.
<script>
$('.ui.dropdown').dropdown();
</script>
FYI, I've installed Semantic-UI ASP.NET MVC in Nuget.
I've tried the solutions below but to no avail.
Semantic-ui dropdown is not working
Semantic UI Dropdown is not showing the drop down but everything else is working
I managed to get the drop down list shown now, by adding this script in the head tag.
<script>
$(document).ready(function () {
$('#divDropdown').click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$('#divDropdown').removeClass('active visible');
$('#dropdownMenu').removeClass('visible');
} else {
$('#divDropdown').addClass('active visible');
$('#dropdownMenu').addClass('visible');
}
$(this).data("clicks", !clicks);
});
});
</script>
By right, it can be as simple that initializing it with .dropdown should work. But somehow it's not.
I'm still waiting for someone to propose a better solution than this.
Thanks.
Include semantic CSS inside the head tag
Include jquery in the end of your body tag, then include semantic UI JS
Put your code from semantic dropdown inside
$(document).ready(function () { //code goes here });
this way it will be executed after everything loads (jquery and semantic) and it will work.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Test semantic</title>
<link rel="stylesheet" type="text/css" href="semantic2/semantic.min.css">
</head>
<body>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="semantic2/semantic.min.js"></script>
<script>
$(document).ready(function () {
$('.ui.dropdown').dropdown();
});
</script>
</body>
</html>
I have been trying to attach this http://harvesthq.github.io/chosen/ to my asp.net mvc 4 site, but still to no avail.
I tried doing the same with simple WebForms, and it was a success.
Nuget packages were downloaded to default locations in both cases.
in all I downloaded these packages:
Jquery-2.1.1
Jquery-ui-1.10.4
chosen-1.1.0
chosen.jquery-1.1.0
Scripts are located in /Scripts folder and Css file in /Content
I have been using Visual Studio 2013.
Here is the code of View (simplified):
#model IEnumerable<modelnamehere>
#{
ViewBag.Title = "Index";
}
#using (Html.BeginForm("Index", "TestedController", FormMethod.Get))
{
some code here;
}
<select multiple class="mySelector" data-placeholder="Choose...">
<option>Select 1</option>
<option>Select 2</option>
<option>Select 3</option>
</select>
<link href="#Url.Content("~/Content/chosen.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/chosen.jquery.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".mySelector").chosen();
})
</script>
And here is _Layout.cshtml shared page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - ASP.NET MVC</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("ASP.NET MVC", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Testing Page", "Index","TestedController")/li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - ASP.Net MVC</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
I`m kinda new to using JQuery, so if there is some explanation to the wrongs steps I have done, it would be much app