I'm learning asp.net and using mvc as a starting point. I've got the app running however when trying to add CSS to a particular view it doesn't do anything. I've seen many solutions but not seem to work for me. Plugging css selector directly in _Layout works only for the main page but doesnt for independent views
Refresh cache
#Styles.Render("~/Content/styles.css") add to view
link css in head of _Layout
I am obviously missing something; can someone figure out what I am doing wrong and explain why it works?
Folder structure:
_Layout.cshtml head
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - bugtracker</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="~/bugtracker.styles.css" asp-append-version="true" />
<link href="~/Content/css/styles.css" rel="stylesheet" type="text/css"/>
</head>
Index.cshtml
#model IEnumerable<bugtracker.Models.Issue>
#{
ViewData["Title"] = "Index";
}
#foreach (var item in Model) {
<span class="cardborder">
<p> ID: #Html.DisplayFor(modelItem => item.Id) </p>
<p> #Html.DisplayFor(modelItem => item.Name) </p>
<p> #Html.DisplayFor(modelItem => item.Description) </p>
<p> #Html.DisplayFor(modelItem => item.Type) </p>
<p> #Html.DisplayFor(modelItem => item.Priority) </p>
</span>
}
Content/css/styles.css
.cardborder{
border: 1px solid red;
}
Yes, I'd also try to load the script at the bottom of the _Layout.cshtml to see if that changes behavior, also make sure to have caching turned off in your browser.
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 have a problem in loading scripts on first time load of view in ASP.NET MVC, the scripts are present on Partial View but these scripts are not called when page is being loaded first time.
But when I append the same partial view second time using Ajax call, the scripts load perfect on the view and components present earlier on the view appended by the partial view also work perfect.
Here I little further discuss my problem in detail that when same scripts I call via _Layout view, then these scripts does not work on partial view, and When I put the same scripts on Partial view also then the problem arises of scripts called two times and my functions are called twice.Actually I am using SignalR scripts and due to 2 times referencing of scripts one time on _layout View and 2nd on Partial view my SignalR functions are called twice and my all code logic ruins.
This is my Home view code:
#model IEnumerable<SmartKids.Lib.Core.ViewModels.FileMediaAlbumsVM>
#{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="profile-body">
#*#Html.Partial("ModalMessages")*#
<div class="row">
#Html.Partial("_Messages")
</div>
<div class="row infinite-scroll">
<input type="hidden" value="" name="clientScreenWidth" id="clientScreenWidth" />
#Html.Partial("_AlbumRow", Model)
</div>
<div id="loading" class="text-center">
<i class="fa fa-spinner fa-2x fa-spin"></i>
</div>
</div>
#section scripts{
<script src="~/Scripts/infiniteScroll.js"></script>
<script type="text/javascript">
var moreRowsUrl = "/Album/Home"; //the URL to your ActionMethod
$(window).scroll(scrollHandler);
</script>
}
and This is my Main _Layout code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Smart Kids</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link href="~/Content/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Content/css/headers/header-default.css" />
<!-- CSS Customization -->
<link rel="stylesheet" href="~/Content/css/custom.css" />
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #122;
}
</style>
#RenderSection("metaTags", false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="wrapper">
<!--=== End Header ===-->
<div class="container" id="main">
<div class="row">
<div class="col-md-12">
#RenderBody()
</div>
</div>
</div>
</div>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/albumSignalR.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Now I have no scripts in Partial view and this is my Partial View code:
<div class="widget-extra margin-bottom-15">
<div class="timeline">
<ul class="timeline-list">
<li>
<a href="#Url.Action("HomeAlbum", "Album", new { aId = item.AlbumId })">
<picture class="thumbnail img-responsive">
<source media="(min-width: 480px)" srcset="#Url.Content(filepath_mobile), #Url.Content(filepath_mobile) 2x">
<source srcset="#Url.Content(filepath_small), #Url.Content(filepath_small) 2x">
<img src="#Url.Content(filepath_mobile)" alt="#item.Title">
</picture>
</a>
</li>
</ul>
</div>
</div>
Kindly suggest me some solution to this, what I am doing wrong or what needs to be fixed.
why dont you move the closing script
tag within the closing }
#section scripts{
<script src="~/Scripts/infiniteScroll.js"></script>
<script type="text/javascript">
//$(function () {
// $("div#loading").hide();
//});
var moreRowsUrl = "/Album/Home"; //the URL to your ActionMethod
$(window).scroll(scrollHandler);
</script>
}
I am opening the same MVC solution in VS2013 and VS2015RC, exact same code, but my VS2015RC tells me there are bunch of errors on my .cshtml pages where as VS2013 says no errors. The main problem is I don't get any intellisense because of the errors in VS2015.
What could be causing this? Also, when I Build the solution in VS2015, it says it succeeded?
Code snippet:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-2.1.3.min.js")" type="text/javascript"></script>
<meta name="description" content="The description of my page" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="header">
<div class="title">ABC</div>
</div>
<div id="categories">
#{ Html.RenderAction("Menu", "Navigation"); }
</div>
<div id="content">
#RenderBody()
</div>
</body>
</html>
vs2013
vs2015
try add this line inside each .cshtml
#inherits System.Web.Mvc.WebViewPage<dynamic>
I have a whole web page source code in a string type variable.
These code is given below:
<!DOCTYPE html>
<html lang="en" dir="ltr"
class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>Twitter / Authorize an application</title>
<link href="https://abs.twimg.com/a/1373417125/tfw/css/tfw.bundle.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if (IEMobile) & (lt IE 9)]>
<link href="https://abs.twimg.com/a/1373417125/tfw/css/tfw_iemobile.bundle.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
html { display:none; }
</style>
<noscript>
<style type="text/css">
html { display: block; }
</style>
</noscript>
<!--[if IEMobile & lt IE 9]>
<style type="text/css">
html { display: block; }
</style>
<![endif]-->
</head>
<body class="oauth
write
signed-in
tfw
en
logged-in
noloki
">
<div id="header" role="banner">
<div class="bar">
<h1 class="logo">Twitter</h1>
<div id="session" role="navigation">
<h2 class="current-user"><a href="https://twitter.com/xyz" title="Ankita Kumar">
<img src="https://twimg0-a.akamaihd.net/profile_images/37880007865454313/7c577aeb3085dasf355dgf76f043c1cd09_mini.jpeg" alt="" width="24" height="24">
<span class="name">ankita_yahoo</span>
</a></h2>
<div class="user-menu">
<h3 class="session">User Management</h3>
<ul class="session">
<li class="new">New Tweet</li>
<li class="settings">Settings</li>
<li class="help">Help</li>
<li class="signout"><form action="/intent/session" method="post"><div style="margin:0;padding:0"><input name="_method" type="hidden" value="delete" /><input name="authenticity_token" type="hidden" value="015cfb030df22330e517d50b0770c4dab7f3f89b" /></div>
<input id="referer" name="referer" type="hidden" value="/oauth/authorize" />
<input type="submit" class="textual link" value="Sign out">
</form></li>
</ul>
</div>
</div>
</div>
</div>
<div id="bd" role="main">
<p class="action-information">You've granted access to ThisTweetControl!</p>
<div id="oauth_pin">
<p>
<span id="code-desc">Next, return this PIN to complete the authorization process:</span>
<kbd aria-labelledby="code-desc"><code>6107346</code></kbd>
</p>
</div>
</div>
<div class="footer" role="navigation"><div id="ft">
Go to Twitter
Go to the ThisTweetControl homepage
<p class="tip">You can revoke access to any application at any time from the Applications tab of your Settings page.</p>
<p><small>By authorizing an application you continue to operate under Twitter's Terms of Service. In particular, some usage information will be shared back with Twitter. For more, see our Privacy Policy.</small></p>
</div></div>
<script type="text/javascript" charset="utf-8">
var twttr = twttr || {};
twttr.form_authenticity_token = '015cfb03a75wdsfgdf6753dsfb0770c4dab7f3f89b';
if (self == top) {
document.documentElement.style.display = 'block';
}
</script>
<script src="https://abs.twimg.com/a/14353417125/javascripts/loadrunner.js" data-main="tfw/intents/main" data-path="https://abs.twimg.com/a/1373417125/javascripts/modules" type="text/javascript"></script>
</body>
</html>
In above line of code have a code tag <code>6107346</code> with some value and I need to get the numeric value in a variable.
If you use System.Windows.Controls.WebBrowser control then this should work, however it works on assumption that you only have one CODE tag:
var myTagValue = (wbBrowser.Document as mshtml.HTMLDocument)
.getElementsByTagName("CODE")
.OfType<mshtml.IHTMLElement>()
.First()
.innerText
You'll need to reference Internet Explorer's COM library: Microsoft HTML Object Library. getElementsByTagName returns you list of all matching tags, no matter where they are in HTML
I would like to write to the HTML head element independently via the page view, not through the _Layout.cshtml as each page will require different scripts, meta data, titles etc. Can this be done in ASP.NET MVC 3, with C# / Razor?
#using Test.Models;
#model IEnumerable<Player>
<!--
Put JavaScript, CSS etc... Into the page <head> here.
-->
<h2>Index</h2>
<table id="scores">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
#foreach(Player p in Model)
{
<tr>
<td>#p.name</td>
<td>#p.age</td>
<td>#p.gender</td>
</tr>
}
</table>
<canvas id="game" width="800" height="600">
<p>Download a modern browser.</p>
</canvas>
You can do this by using sections. Go to your _Layout.cshtml and add a new section called head like this:
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#RenderSection("head", false)
</head>
The new section is added with the #RenderSection. Now in your individual views you can add content to the head like this:
#section head
{
<script type="text/javascript">
//Your java script here
</script>
}
When the complete view is rendered the javascript would be rendered in the head section just below the link tag. You could put anything in there. For example, meta tags.
var newHeadElement = createSomeElementOrString;
document.getElementsByTag("head")[0].appendChild(newHeadElement);
Have you tried using razor sections?