I have alittle project using html, css, c# with razor syntax.
I have layout page (on the sheard folder) and I use renderbody().
On the layout page I ave an image("intro.png") that I want to be on all pages (because that I put the image on the layout page), but when I go to other pages on my little website the page doesn't apeear, it's appear only on the first page.
here is asection of my layout page:
<!-- Introduction -->
<header>
<h2>head?</h2>
</header>
<p>some text.</p>
<img src="Content/images/intro.png">
</section>
<div id="content">
#RenderBody()
<aside>
<section>
<header>
<h3>Categories</h3>
</header>
</section>
<section>
<header>
<h3>Archives</h3>
</header>
<ul>
<li>December 2008</li>
<li>January 2009</li>
<li>February 2009</li>
<li>March 2009</li>
</ul>
</section>
</aside>
</div>
instead of giving link to image this way:
<img src="Content/images/intro.png">
Use this :
<img src=#Url.Content("~/Content/images/intro.png")>
I think there is a problem with Image Path .. I think above answer will solve that problem..
Related
Can we render a Blazor component as an independent DOM fragment, or somehow else consume it as a standard Web Component within a vanilla HTML/JS page?
This might be a naive question from the Blazor architectural standpoints. I am not a Blazor expert by far, but I think it can be a useful technique for incremental "brownfield" modernization of legacy web applications. I'm surprised this doesn't appear to be officially supported.
To illustrate, consider this simple web component example, which renders a custom element <date-info>:
// define a custom web component
customElements.define("date-info", class DateInfo extends HTMLElement {
constructor() {
super();
// create an "open" (vs "closed") shadow DOM,
// i.e., accessible to the outside JavaScript
this.attachShadow({ mode: "open" });
}
async connectedCallback() {
console.log(`${this.constructor.name}.${this.connectedCallback.name} called`);
// get the content from the server,
// this could be a Blazor component markup
try {
const response = await fetch("https://worldtimeapi.org/api/ip");
const data = await response.json();
const content = new Date(data.utc_datetime).toString();
this.shadowRoot.innerHTML = `<span>${content}</span>`;
}
catch(e) {
console.error(e);
const info = document.createTextNode(e.message);
this.shadowRoot.appendChild(info);
}
}
});
<!-- use the web component -->
<p>Current time: <date-info/></p>
Now, instead of fetching https://worldtimeapi.org/api/ip, I'd like to fetch and render a detached markup for a Blazor/Server component, e.g.:
#* this is a Blazor component *#
<p>#(DateTime.Now)</p>
Moreover, I'd expect this markup to remain functional and dynamic, i.e., the client-side DOM events and the server-side updates for this Blazor component to further propagate both ways, through the life cycle of the wrapping web component.
It's surely possible to make it a Blazor #page and load it into an iframe, but I'm rather looking to render it as a part of the outer page's DOM.
So far, I've come across this:
Apparently, that wasn't one of Blazor design goals back in 2018:
https://github.com/dotnet/aspnetcore/issues/16033.
Later Steve Sanderson created an (unofficial) library to test Blazor components in isolation, which in theory can be used to get a standalone Blazor component markup: https://stackoverflow.com/a/60457390/1768303.
Is it the best approach to tackle this problem, so far?
MS has addressed this limitation, but the solution requires .Net 6.
https://github.com/aspnet/AspLabs/tree/main/src/BlazorCustomElements
This was done by the man himself, Steve Sanderson.
In the meantime you can mix the old cshtml with razor components.
I use this approach to maintain the same graphic layout between the two systems.
An example, the following file is _Layout.cshtml used by Identity.
I've used various Blazor components via static rendering:
#using Microsoft.AspNetCore.Hosting
#using Microsoft.AspNetCore.Mvc.ViewEngines
#inject IWebHostEnvironment Environment
#inject ICompositeViewEngine Engine
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#using Project.Server.Shared
<!DOCTYPE html>
<html>
<head>
<component type="typeof(MainLayoutHead)" render-mode="Static" />
</head>
<body>
<app>
<div class="container main">
<component type="typeof(MainLayoutTopImages)" render-mode="Static" />
<div class="row navmenu-row">
<div class="col-md-12 bg-dark navmenu-col">
<component type="typeof(NavMenu)" render-mode="Static" />
</div>
</div>
<div class="row content pt-4 pb-0 mt-0">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
#*Required for GDPR.*#
<partial name="_CookieConsentPartial" />
</div>
</div>
<div class="row body-row">
<div class="col-md-12 body-col">
#RenderBody()
</div>
</div>
</div>
</div>
<component type="typeof(MainLayoutFooter)" render-mode="Static" />
</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)
</body>
</html>
The MainLayoutHead, MainLayoutFooter and NavMenu are regular Blazor components.
Not sure if this helps but you can definitely do it from a server side page (I'll delete this answer if it doesn't). Here's a test page that renders all three standard "pages" inside a cshtml page with server side content. You need to actually forget the "page" concept in Blazor. EVERYTHING is a Component. Pages are just components with a Page custom attribute.
The problem with this setup is that as soon as you refresh the page you restart the three components and you lose any scoped data.
#page "/test"
#namespace StackOverflow.Answers.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StackOverflow.Answers</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="StackOverflow.Answers.styles.css" rel="stylesheet" />
</head>
<body>
<div class="m-2 p-s bg-light">
<h3>A Normal Razor Page</h3>
<p>
Lots of server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Shared.SurveyPrompt)" render-mode="ServerPrerendered" />
</div>
<div class="m-2 p-s bg-info">
<h3>A Normal Header</h3>
<p>
Lots More server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Pages.Counter)" render-mode="ServerPrerendered" />
</div>
<div class="m-2 p-s bg-light">
<h3>A Normal Header</h3>
<p>
Lots More server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Pages.Counter)" render-mode="ServerPrerendered" />
</div>
<div class="m-2 p-s bg-light">
<h3>Yet Another Normal Header</h3>
<p>
Lots More server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Pages.FetchData)" render-mode="ServerPrerendered" />
</div>
<div class="m-2 p-s bg-light">
<h3>Yet Another Normal Header</h3>
<p>
Lots More server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Pages.FetchData)" render-mode="ServerPrerendered" />
</div>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
I'm kinda new to C#, and I will appreciate any help, thanks.
Here's my problem: I created an Iframe but I cannot link it to my sidebar or rather I cannot display another HTML unto my Iframe
Here's my code
<header>
<!-- This is sidebar button along with its contents-->
<div id="mySidenav" class="sidenav">
<!--Contents of the sidebar-->
<a class="closebtn" onclick="closeNav()">X</a>
<!-- The problem starts here, for I don't know what to put -->
<!-- Option 1: -->
<!-- Option 2: --> <a> ##Html.ActionLink("Employment","emp", new{ target="iframe_a"}) </a>
Department Module
Leave Module
Allowance and Deduction
Salary Module
User Accounts
Reports
</div>
<div id="main" class="desHead">
<a class="openNav" onclick="openNav()">☰</a>
<h1>Payroll System</h1>
</div>
</header>
I am creating a Vazor (VB.NET Razor) using XML literals supported in VB.NET. I generate a string containging Html code but it needs further processing to resolve paths, handle asp- attributes, do ant encryption or authentication … etc. All this work is already done in Razor, so I don't want to reinvent the wheel. I want to know the part of the Razor doing this to deliver my HTML code to and get the work done.
I create a Class for each view, that implements IVazor Interface. The vbxml code is written in teh Vazor method. This is how it looks like:
Public Function Vazor() As XElement Implements IVazor.Vazor
ViewBag.Title = "Vazor Sample"
Return _
<p>
<h3> Browse Students</h3>
<p>Select from <%= students.Count() %> students:</p>
<ul>
<%= (Iterator Function()
For Each std In students
Yield <li><%= std.Name %></li>
Next
End Function)() %>
</ul>
<script>
var x = 5;
document.writeln("students count = <%= students.Count() %>");
</script>
</p>
End Function
I made a proof of concept here: https://github.com/VBAndCs/VB.NET-Razor
Note: I changed the VBRazor to Vazor but didn't upload this yet.
I want to complete this work, but I need help. My Vazor delivers a string containing HTML code without any C# ot VB code, so it differs from Razor in three things:
1- no need to locate any chtml file.
2- no need to combine view parts (layout, sections, etc) because mu view classes take care of that (I didn't complete this yet. I only cobine the layout for now)
3- no need co compile the View or evaluate any thing.
So, I deliver html code like this:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - WebApplication1</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
</environment>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav Class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div Class="container">
<a Class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">WebApplication1</a>
<button Class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span Class="navbar-toggler-icon"></span>
</button>
<div Class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul Class="navbar-nav flex-grow-1">
<li Class="nav-item">
<a Class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li Class="nav-item">
<a Class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div Class="container">
<partial name="_CookieConsentPartial" />
<main role="main" class="pb-3">
<p>
<h3> Browse Students</h3>
<p>Select from 3 students:</p>
<ul>
<li>Adam</li>
<li>Mark</li>
<li>Tom</li>
</ul>
<script>
var x = 5;
document.writeln("students count = 3");
</script>
</p>
</main>
</div>
<footer Class="border-top footer text-muted">
<div Class="container">
copy; 2019 - WebApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a></div>
</footer>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery, window.jQuery.fn, window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4="></script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", false)
</body>
</html>
This Html code needs further processing to resolve paths, handle asp- attributes, do ant encryption or authentication … etc. All this work is already done in Razor, so I don't want to reinvent the wheel. I want to know the part of the Razor doing this to deliver my HTML code to and get the work done. I spend days looking at the Razor code but didn't get what I want, so a little help is appreciated here.
And who are interested, they can participate in the discussion here:
https://github.com/dotnet/vblang/issues/397
Thanks.
I found a perfgect easy solution, by using VirtualPathProvider. But it disapeared in ASP.NET Core!
I found an alternative with IFileProvider.. More details here:
https://www.mikesdotnetting.com/article/301/loading-asp-net-core-mvc-views-from-a-database-or-other-location
but when I tried to register my virual file provider with this code:
services.Configure(Of MvcRazorRuntimeCompilationOptions)(
Sub(options) options.FileProviders.Add(New Vazor.VazorViewProvider())
)
I found that FileProviders is no longer a member of RazorViewEngineOptions!
In ASP.NET Core 3.0, it is done using MvcRazorRuntimeCompilationOptions (needs to reference Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation:
services.Configure(Of MvcRazorRuntimeCompilationOptions)(
Sub(options) options.FileProviders.Add(New Vazor.VazorViewProvider())
)
And here is the implementation of this idea: Vazor 1.0 up and running:
https://github.com/VBAndCs/Vazor
Vazor is ready now. Start using it today to create wep pages for ASP.NEt Core 3.1 in VB.NET:
1. Install Vazor project templates
2. Install Html5 completion provider VS extension
3. Use the instructions in the ReadMe file
4. Use eShopOnWeb.VB as a guide app.
5. Have fun :)
This is the complete story behind Vazor.
And this is a short version published in Visual studio Magazine article.
I'm using mvc to go to an index that returns a partial view then render it in the body of a layout, then the different parts of the view (edit, add, delete)I use ajax and angular to render different parts of it. So I've got one index with different parts (edit, delete, add) that render the corresponding components and update them throw ajax. The thing is that I only want to render the section in the layout corresponding to the partial view, I mean in the renderbody() where the partial is rendered. But I dont want the header of the layout to to postback in order to mantain the options selected.
Here is an image:
This is the layout, the usual mvc layout:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
#Html.ActionLink("su logotipo aquÃ", "Index", "Home")</p>
</div>
</div>
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</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 - Mi aplicación ASP.NET MVC</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
My View:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>holaaaaaaaaaaaaaaaaaa</h2>
My controller:
public ActionResult Index()
{
return PartialView();
}
In short:
I need to know how to use partial views, to render it in the layout, mantaining the options selected and not doing post back to better look of the page.
If you don't find a good solution to your problem, consider implementing bootstrap tabs http://getbootstrap.com/javascript/#tabs
I've had a similar problem and without finding a solution I've switched from select box to tabs.
Basically you play with tabs and ng-includes like this:
<ul class="nav nav-tabs">
<li class="active"><a href="" data-toggle="tab">TabName1
<ng-include src="'myFirstPartialTemplate.html'">
</a></li>
<li><a href="" data-toggle="tab">TabName2
<ng-include src="'mySecondPartialTemplate.html'">
</a></li>
</ul>
If your view is a partial view, then it should not have the property 'Layout' set.
I would do the following:
Make your index page return a View:
public ActionResult Index()
{
return View();
}
Create a another action to return your partial:
public ActionResult MyPartial()
{
return PartialView();
}
In your index page, if you wish, render your partial in the body.
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>holaaaaaaaaaaaaaaaaaa</h2>
#Html.Partial("MyPartial")
Not sure if this is what you need, but I hope it helps.
I am using Netbeans to edit my HTML file. This is the first part of my HTML code file (I have some more code inside the head tags however that is not important):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- wrapper for the whole component -->
<div id="componentWrapper">
<!-- playlist -->
<div class="componentPlaylist">
<div class="menuHolder">
<div class="menuWrapper">
</div>
</div>
<div class="thumbHolder">
<div class="thumbWrapper">
The dynamic part is in my C# program that create automatic on the hard disk an event each X time and put for me in a directory some gif files along with one animated gif (the animated gif shows animation of the other gif files in the directory). In this part of the HTML after the line: <div class="thumbWrapper">
I need to add the dynamic part in this format for example:
<div class="playlist" data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration="25000">
<ul>
<li data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg' data-startScale="1.4" data-endScale="0.5" data-startPosition="tl" data-endPosition="br" data-link='http://www.google.com' data-target='_blank' data-description="hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category1/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>
There are more <li> </li> lines. The important thing here is inside the li tags:
data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg'
image1 then the next one is image2 then image3 and so on...
Then playlistItem the next time I will add to the HTML a block like this inside div tags it will be playlistItem2 then playlistItem3....
And the links to the images now it's: media/category1/main/01.jpg
But next time next block it will be media/category2/main/01.jpg
Then in the end I have another some HTML code that I don't change and then in my C# program, I merge the three parts every time and upload the updated HTML file to my FTP.
The first part is static, then dynamic part, and in the end another static part.
My question is how do I build each time adding to the dynamic part?
For example on my hard disk I have new event inside one .jpg file.
The file uploaded to my FTP server.
So now the HTML code I need to add in the HTML file, for example:
<div class="playlist" data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration="25000">
<ul>
<li data-address='image1' class='playlistItem2' data-imagePath='media/category2/main/01.jpg' data-startScale="1.4" data-endScale="0.5" data-startPosition="tl" data-endPosition="br" data-link='http://www.google.com' data-target='_blank' data-description="hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category2/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>
My question is how in C# I can dynamically update the HTML file in this part?
Hi you can use placeholders inside the html file. Those placeholders can be replaced at runtime as below:
string placeHolder = "<!--<<PLACEHOLDER>>-->";
string path = "C:\\test.html";
string dynamicContent = #"<div class='playlist' data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration='25000'>
<ul>
<li data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg' data-startScale='1.4' data-endScale='0.5' data-startPosition='tl' data-endPosition='br'
data-link='http://www.google.com' data-target='_blank' data-description='hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>'
data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category1/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>";
string content = File.ReadAllText(path).Replace(placeHolder, string.Concat(dynamicContent, placeHolder));
File.WriteAllText(path, content);