Default Blazor project is very inconsistent when it comes to UI. For blazor components, there is a sidenav. But for account manage /Identity/Account/Manage there is no sidenav as that is .cshtml not .razor page.
I know that to have consistent UI I have to have probably two side nav and maintain exactly the same layout for both of them. Still, maybe there is already some example of sidenav for /Identity/Account/Manage that looks exactly as that available for blazor components?
The most welcome solution is use existing blazor navbar (Shared/NavMenu.razor) in account management (/Identity/Account/Manage) pages
I have created a PR against your sample on GitHub. The change is to the _Layout.cshtml used by Identity - it's not perfect, but shows the technique.
_Layout.cshtml
#using Microsoft.AspNetCore.Hosting
#using Microsoft.AspNetCore.Mvc.ViewEngines
#inject IWebHostEnvironment Environment
#inject ICompositeViewEngine Engine
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - BlazorAuthTemplate</title>
<base href="~/" />
<link rel="stylesheet" href="~/Identity/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Identity/css/site.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<div class="sidebar">
<component type="typeof(BlazorAuthTemplate.Shared.NavMenu)" render-mode="ServerPrerendered" />
</div>
<div class="main">
<div class="top-row px-4 auth">
<div class="d-sm-inline-flex flex-sm-row-reverse">
#{
var result = Engine.FindView(ViewContext, "_LoginPartial", isMainPage: false);
}
#if (result.Success)
{
await Html.RenderPartialAsync("_LoginPartial");
}
else
{
throw new InvalidOperationException("The default Identity UI layout requires a partial view '_LoginPartial' " +
"usually located at '/Pages/_LoginPartial' or at '/Views/Shared/_LoginPartial' to work. Based on your configuration " +
$"we have looked at it in the following locations: {System.Environment.NewLine}{string.Join(System.Environment.NewLine, result.SearchedLocations)}.");
}
</div>
About
</div>
<main role="main" class="content px-4 pb-3">
#RenderBody()
</main>
</div>
</app>
<script src="~/Identity/lib/jquery/dist/jquery.min.js"></script>
<script src="~/Identity/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/Identity/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
<script src="/_framework/blazor.server.js"></script>
</body>
</html>
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.
Trying to make a web app using .Netcore When I run the application I get this error. Help me
This is not a errors but a warning. But help me to resolve
I added my code below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="~/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/sidebar-nav.min.css" rel="stylesheet" />
<link href="~/css/animate.css" rel="stylesheet" />
<link href="~/css/default.css" rel="stylesheet" />
<link href="~/css/style.css" rel="stylesheet" />
</head>
<body class="fix-header fix-sidebar">
<div id="wrapper">
#Html.Partial("AdminPartials/_TopMenu")
#Html.Partial("AdminPartials/_Sidebar")
<div id="page-wrapper" style="min-height:600px">
<div class="container-fluid">
#RenderBody()
<hr />
<footer class="footer text-center">© #DateTime.Now.Year | Powered by Techguy</footer>
</div>
</div>
</div>
#RenderSection("scripts", required: false)
<script src="~/js/jquery.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/sidebar-nav.min.js"></script>
<script src="~/js/custom.js"></script>
</body>
</html>
In case you are looking just how to update from #Html.Partial to <partial>:
#Html.Partial("AdminPartials/_TopMenu")
#Html.Partial("AdminPartials/_Sidebar")
Should be changed to
<partial name="AdminPartials/_TopMenu" />
<partial name="AdminPartials/_Sidebar" />
More details here: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/partial-tag-helper?view=aspnetcore-2.2
use
#await Html.PartialAsync("_partialView", new List<Model>())
For the ones how as me are not so familiar with regex. You can do this change easily in whole solution using Find&Replace. It should do the job in most cases.
Find: \#Html.Partial\(\"(.*?)\"\),
Replace: <partial name="$1" />,
option "Use regular expressions" checked
and
Find: \#Html.Partial\(\"(.*?)\", (.*?)\),
Replace: <partial name="$1" for="#($2)"/>,
option "Use regular expressions" checked
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 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
My Search.cshtml has a div named "search-results" that is to be updated. SearchResults is the action name. I have done this many times on MVC2/VS2008 projects, but this is my first using MVC3 and VS2010.
The problem is, instead of my search result being rendered in my div, it clicking submit is redirecting me displaying my partial as a standalone page.
I have read that this may be because Ajax is not enabled. My _Layout.cshtml looks like this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/2011.2.712/jquery-1.5.1.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/main.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/2011.2.712/jquery-1.5.1.min.js")" type="text/javascript"></script>
#(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.transparent.css").Combined(true).Compress(true)))
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
#(Html.Telerik().Menu()
.Name("menu")
.Items(menu => {
menu.Add().Text("Home").Action("Index", "Home");
menu.Add().Text("About").Action("About", "Home");
menu.Add().Text("Employees").Action("List", "Employee");
}))
</div>
<div id="main">
#RenderBody()
<div id="footer">
</div>
</div>
</div>
#(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)))</body>
</html>
Do I need to add MicrosoftMvcAjax.js or jquery.unobtrusive-ajax.js in? My web.config (root) contians the following:
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
If I add MicrosoftMvcAjax.js in at the end of the element, I get an error sayning namespace 'Type' is undefined error from the first line of MicrosoftMvcAjax.js:
Type.registerNamespace('Sys.Mvc');Sys.Mvc.$create_AjaxOptions=function(){return {};}
What am I missing here. I am sure my code is fine, as it copied alsmost verbatim from my MVC2 projects.
You forgot to include the jquery.unobtrusive-ajax.js script to your page (adjust the path as necessary):
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
As far as Microsoft*.js scripts are concerned, they are obsolete in ASP.NET MVC 3 and should no longer be used unless you are porting some legacy application. They have been replaced by jQuery.
Ok, figured out my problem.
I was calling Ajax.BeginForm with the AjaxOption OnSuccess pointint to a js function that updated my place holder. But this is not needed, with unobtrusive. Once I removed the OnSucces from the Ajax options everything started working.
~S