When I want to use a variable in a link (parameter) all js files throw console errors
When I remove the parameter from the link everything works fine
Page:
#page "/PollShow/{id:int}"
#code{
[Parameter]
public int Id { get; set; } = 1;
}
this is my _host.cshtml
#page "/"
#namespace Polls.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Dashboard</title>
<link href="~/css/sb-admin-2.css" rel="stylesheet" />
<link href="~/css/StyleSheet.css" rel="stylesheet" type="text/css" />
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<!-- Custom styles for this page -->
<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body id="page-top">
<component type="typeof(App)" render-mode="ServerPrerendered" />
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/datatables-demo.js"></script>
<script src="~/_framework/blazor.server.js"></script>
</body>
</html>
error console when i use link with parameter
enter image description here
You'll need to use the exacte same name for the parameter. Its case sensitive
#page "/PollShow/{Id:int}"
Related
Ok, so I recently had an SEO audit done on my site and per the recommendations I added the Geo.txt, robots.txt, Schema.txt and sitemap.xml files to my root directory (not sure exactly if this is where these files go...) And now for some reason my page displays like there is no CSS file at all. Could adding one of these files affect that? Do I need to add the path to my CSS to one of the files? I will add my header section below.
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-L6BBJ36NQR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-L6BBJ36NQR');
</script>
<asp:ContentPlaceHolder ID="contentHead" runat="server">
</asp:ContentPlaceHolder>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="Web Development Erie PA Application Custom Software Northwest PA" />
<link rel="manifest" href="site.webmanifest" />
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- CSS here -->
<link href="" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/owl.carousel.min.css" />
<link rel="stylesheet" href="assets/css/slicknav.css" />
<link rel="stylesheet" href="assets/css/flaticon.css" />
<link rel="stylesheet" href="assets/css/progressbar_barfiller.css" />
<link rel="stylesheet" href="assets/css/gijgo.css" />
<link rel="stylesheet" href="assets/css/animate.min.css" />
<link rel="stylesheet" href="assets/css/animated-headline.css" />
<link rel="stylesheet" href="assets/css/magnific-popup.css" />
<link rel="stylesheet" href="assets/css/themify-icons.css" />
<link rel="stylesheet" href="assets/css/slick.css" />
<link rel="stylesheet" href="assets/css/nice-select.css" />
<link rel="stylesheet" href="assets/css/style.css" />
</head>
The page is supposed to look like this:
Proper site look
But instead it looks like this:
Wrong site look
I have a solution made up of the above technologies. I am using knockout components made up of .html and .ts files. When trying a simple <script> tag on the .html file, nothing happens.
The component is payment-details.html and the code is as simple as follows:
<h1>Payment details</h1>
<script type="text/javascript">
alert("test");
</script>
The underlying payment-details.ts is:
import * as ko from 'knockout';
class PaymentDetailsViewModel {
constructor() {
}
}
export default { viewModel: PaymentDetailsViewModel, template: require('./payment-details.html')};
and the _Layout.cshtml file is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] Contactless Check In</title>
<base href="~/" />
<environment exclude="Development">
<link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
</environment>
</head>
<body>
#RenderBody()
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#RenderSection("scripts", required: false)
</body>
</html>
I'm not sure what the issue is or where to start looking. There's something in the solution somewhere that is stopping script execution. Nor does it render in the html.
Thank you!
I am trying to use JQuery datatable in my blazor project. I am using the CDN files to load the framework. This is my _Host.cshtml file:
#page "/"
#namespace Blazor.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor</title>
<base href="~/" />
<environment include="Development">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="css/bootstrap/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link href="css/site.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.css" />
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>
())
</App>
<script src="_framework/blazor.server.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
<script>
$(document).ready(function () {
$('#carTable').DataTable();
});
</script>
</body>
</html>
And in my CarData.razor file I connect the ID like this:
<table id="carTable" class="display" style="width:100%">
When I run the application it doesn't load the framework. I get no error in my console.
I have read about Javascript interop in this documentation:
https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0
Somehow it doesn't read my CDN files from the JQuery datatable.
Can someone point me in the right direction?
I have figured it out:
In my _Host.cshtml I have this code:
<script>
function DataTable() {
$(document).ready(function () {
$('#carTable').DataTable();
});
}
</script>
Then in my CarData.razor I call this method like this:
protected override async Task OnInitAsync()
{
await JSRuntime.InvokeAsync<object>("DataTable");
}
Don't forget to inject the library in your page:
#inject IJSRuntime JSRuntime
There might be some DataTable elements left over when you leave your page. You need to remove all elements with IDispose.
For a complete tutorial, have a look at this post:
How to add Data Tables to Blazor
Sine ASP.NET Core 5.0 you can directly access jQuery plugins like DataTables without having to define a wrapper-function globally:
#code {
[Inject]
protected IJSRuntime JSRuntime { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
var jQuery = await JSRuntime.InvokeAsync<IJSObjectReference>("$", "table");
await jQuery.InvokeVoidAsync("DataTable");
}
}
}
// Navigate to Account Managemnt window
Thread.Sleep(10000);
chrome_driver.FindElement(By.XPath("//*[#id='module-menu']/div/button")).Click();
Thread.Sleep(10000);
chrome_driver.FindElement(By.XPath("//*[#id='module-menu']/div/div/button[2]")).Click();
//*[#id="module-menu"]/div/div/button[2]
Thread.Sleep(20000);
IWebElement body = chrome_driver.FindElement(By.TagName("body"));
var result = chrome_driver.FindElement(By.TagName("body")).Text;
Console.WriteLine(result);
IWebElement Single_Acc_Add = chrome_driver.FindElement(By.XPath("//*[#id='single-add-button']/button/span"));
//chrome_driver.FindElement(By.LinkText("+ Add")).Click();
action.MoveToElement(Single_Acc_Add).Build().Perform();
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>PCR Universe</title>
<link href="/static/css/main.ed365ca1.css" rel="stylesheet">
</head>
<body>
<div
id="GLOBAL_INFO"
data-envvar="-siteminder"
data-clientname="universal-dashboard"
data-clientid="3027d708-26a2-4b63-a131-d672617f46f4"
data-domain="azurewebsites.net"
data-apienvvar="-siteminder"
data-apiname="universalwidgetservice"
data-apidomain="azurewebsites.net"
data-LOGINURL="https://universal-dashboard-siteminder.azurewebsites.net/authorize"
data-LOGOUTURL= './Logout.html'
data-ERRORPAGE= './LoginError.html'
data-ENCODEDCOOKIE= 'false'
data-USETOKENAUTH= 'false'
>
</div>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.84c386bd.js"></script>
</body>
</html>
I am working with selenium and came across a website which is not created with java script but react elements, how can i detect IWebElement when there are no html tags. Not able to detect them with link Text as well.
I would like to replace http://www.somewebsite.com programmaticaly when page loads.
Is it possible to do?
<head runat="server">
<title></title>
<link href="http://www.somewebsite.com/App_Themes/Blue/StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="www.somewebsite.com/inc/styles_ie.css" />
<![endif]-->
<link href="http://www.somewebsite.com/App_Themes/RedBlack/StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
Here I found a really good example how to do it http://www.codeproject.com/Tips/523983/Adding-Styles-Dynamically-to-ASP-NET-Page-Header
Literal cssFile = new Literal()
{
Text = #"<link href=""" + Page.ResolveUrl(styleFilePath) +
#""" type=""text/css"" rel=""stylesheet""/>"
};
Page.Header.Controls.Add(cssFile);