I have been trying to implement a hCaptcha to my blazor-server project for the last couple days, but everything i tried failed in one way or another.
My most promising attempt was to just add the HTML-code from the hcaptcha website to the app.
I added
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
inside the <!head> element of the _Layout.cshtml, and
<div class="h-captcha" data-sitekey="10000000-ffff-ffff-ffff-000000000001"></div>
in my index.razor, to show the captcha there.
The odd thing is: Every time I load the site, the captcha is visible for about 0.2 seconds and then becomes invisible.
I also tried the same code in the w3schools.com HTML Simulator and it worked perfectly fine, so I assume this has something to do with blazor.
Here is my code
index.razor
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<p>Currently, the <code>ChildContext</code> is temporarily rendered by the week component, and the data-related operating components in all cells are not encapsulated and will be refined later</p>
<div class="h-captcha" data-sitekey="10000000-ffff-ffff-ffff-000000000001"></div>
#code {
protected override async Task OnInitializedAsync()
{
}
void CheckValidity()
{
//GeneralMethods.CheckCaptcha();
}
}
and _Layout.cshtml
#using Microsoft.AspNetCore.Components.Web
#namespace NixPfusch.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" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="NixPfusch.styles.css" rel="stylesheet" />
<!--Added Script for hCaptcha-->
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<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>
Any help would be apprechiated!
Related
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}"
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");
}
}
}
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 am trying to open a jQueryMobile datebox in a dialog mode. I am trying to set the datebox to a default value but it just won't take it for some reason. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#PageData["Title"]</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" href="#Href("/Styles/theme/mysite.min.css")" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>
</head>
<body>
<script type="text/javascript">
$('document').ready(function(){
//Setting start date value on pageload
$('#myqdate').value('2012-01-14');
$('#myqdate').datebox('refresh');
}
</script>
<form name="shiftform" id="shiftform" action="#Href("~/Account/QChanges.cshtml")" method="post">
<div data-role="fieldcontain">
<label for="myqdate">Date:</label>
<input name="myqdate" id="myqdate" type="date" value="" data-role="datebox" data-options='{"mode": "flipbox", "forceInheritTheme": true, "defaultDate":"2012-01-14"}'>
</div>
<input type="submit" value="Get Queue"/>
</form>
</body>
</html>
I would really appreciate help from experts.
Thanks
This should do it:
$('#myqdate').trigger('datebox', {'method':'set', 'value':'2012-01-14', 'date':new Date('2012-01-14')})
It seems that you should be using the "defaultValue" property instead of the "defaultDate" that is in the data-options of your posted code. No need for the script block.
try closing your function:
$('document').ready(function(){
//Setting start date value on pageload
$('#myqdate').value('2012-01-14');
$('#myqdate').datebox('refresh');
}
)};