onclick in Core 3.1 Blazor app doesn't work - asp.net-core

I just installed Visual Studio 2019 (v16.4.3, immediately updated to 16.4.4). I have VS2017 on my system, but no prior versions of VS2019.
I created a new Blazor app project. It automatically created Index, Counter, and other pages. It created it as a .NET Core 3.1 app (as 3.1 is now installed automatically with VS2019 v16.4 and later, apparently).
I am literally following this "Get started" page:
https://learn.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio
I run the app with no changes from what was generated. Clicking the button on the Counter page does nothing. I don't see any messages in the Debug Output window that have any relations.
I did some searches and found reports of similar issues but the solutions don't seem to apply.
Any idea what is wrong? (it is SO annoying when a freshly generated, unmodified project does not work!)
The code for the Counter page was generated as:
#page "/counter"
<h1>Counter</h1>
<p>Current count: #currentCount</p>
<button class="btn btn-primary" #onclick="IncrementCount">Click me</button>
#code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
_Host.cshtml is:
#page "/"
#namespace ToDoList.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>ToDoList</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<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>
Update:
Per comment suggestions:
I rebooted my computer
Went straight into VS2019 and created a New Project. Selected Blazor App. Accepted all defaults. So, ended up with a project named BlazorApp1.
Hit F5 to start it up. Same results. Clicking the 'Click me' button the Counter does not do anything.
Entire contents of BlazorApp1.csproj:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp3.1</TargetFramework>
</PropertyGroup>
</Project>
Note that the Get Started link I am following specifically says to use .NET Core 3.1 (vs 2.1). It says to OPTIONALLY update to the 3.2 preview, but that's only needed if I want to do a Blazor WebAssembly (which I don't). I prefer to only have released code on my system, so I don't want to updated to 3.2 Preview for something that is supposed to work with 3.1.

VS2019 defaulted to launching the app in Internet Explorer.
I changed it to launch it in Edge. It works in Edge.
Final update:
I got it to work in IE11. To do so:
I downloaded the Daddoon Blazor Polyfill package from here:
https://github.com/Daddoon/Blazor.Polyfill
From the downloaded zip, I copied Publish\Blazor.Polyfill.Publish\blazor.polyfill.min.js to a subfolder that I created, named "js", under the wwwroot subfolder in my project folder. I.e. in ToDoList\wwwroot, I created a subfolder named 'js' and then copied the blazor.polyfill.min.js file into that subfolder.
Then, I edited the file _Host.cshtml. I added the first line here (in front of the second line, which was already there, generated by VS and the Blazor Server template):
<script src="js/blazor.polyfill.min.js"></script>
<script src="_framework/blazor.server.js"></script>
I found a bunch of things that said "use Polyfills", but I couldn't find anything that said "here is how you actually do that." So, hopefully this helps someone else. Also, if I did something in a way that is suboptimal, hopefully someone will see this and tell me how to do it in a better way.

I had the same problem
To solve it, go to your project's Properties >> Debug >> uncheck Enable SSL. Then run your project by clicking e.g. IIS Express.

Related

(0x800a138f) Unhandled exception in IE8 after adding BreezeJS to Durandal project

I'm hoping someone with some experience in Breeze/Durandal 2 on .NET 4.0 will be able to assist me with this error, as I'm pretty new to the mix.
I've been working on a Durandal 2/KO/Require SPA project that lately has been compiling fine and running on my IIS7. I need this app to be compatible with IE8, so I imported the shim and sham js libs as such:
<!-- ECMAScript 5 compatibility shims for IE8 -->
<!--[if lt IE 9]>
<script src="lib/ie8/html5shiv.min.js"></script>
<script src="lib/ie8/respond.js"></script>
<script src="lib/ie8/es5-shim.min.js"></script>
<script src="lib/ie8/es5-sham.min.js"></script>
<![endif]-->
<script src="lib/jquery/jquery-1.9.1.min.js"></script>
<script src="lib/knockout/knockout-3.1.0.js"></script>
<script src="/Scripts/q.min.js"></script>
<script src="/Scripts/breeze.debug.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
I also need to be able to access data from a DB so I tried adding BreezeJS to the mix. According to Breeze's documentation, in order for this to work I had to remake the project in VS as ASP.NET MVC4 Project using the Empty Template. After that I imported the Breeze files using NuGet:
Install-Package Breeze.WebApi
Then I added in my pre-existing views, controllers, libraries, css, etc. to the newly created project. Now when I compile using IE8 I get the following error. This error does not show up for Firefox or Chrome:
Unhandled exception at line 125, column 13 in
http://localhost:64185/lib/durandal/js/composition.js
(Edited for readability)
SourceMap D:\localdev\TestMVC4\TestMVC4\lib\ie8\es5-shim.map read failed:
Could not find file 'D:\localdev\TestMVC4\TestMVC4\lib\ie8\es5-shim.map'.
SourceMap D:\localdev\TestMVC4\TestMVC4\lib\ie8\es5-sham.map read failed:
Could not find file 'D:\localdev\TestMVC4\TestMVC4\lib\ie8\es5-sham.map'.
Unhandled exception at line 125, column 13 in http://localhost:64185/lib/durandal/js/composition.js
0x800a138f - Microsoft JScript runtime error: 'route' is null or not an object
I thought this might be a compatibility issue with JQuery so I attempted different versions there. I've made sure that my DocType is set to:
<!DOCTYPE html>
and that I have the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
However I doubt either of those would cause issues with IE8 and Durandal. Has anyone else experienced a similar issue to mine? Am I experiencing this error because I haven't configured something on the MVC4 side?
Any advice would be greatly appreciated.
Thank you
After further digging into the Durandal composition.js I found that the skipActivation parameter in the "tryActivate" function was undefined, which resulted in the error. I'm pretty sure this problem is a result of IE8 support from Durandal, so I went ahead and scrapped IE8 and I am now developing for IE9 and up.
This isn't a fix, but I've had enough headaches with this and I will be moving on ...

SEO plugin doesn't work in Hippo CMS

I'm using Hippo CMS and trying to implement SEO plugin. I did everything by manual but I don't see any changes and meta tags in rendered results.
My basic layout is:
<#include "/WEB-INF/freemarker/include/imports.ftl">
<html lang="en">
<head>
<meta charset="utf-8"/>
<#hst.headContributions/>
<link rel="stylesheet" href="<#hst.link path="/css/bootstrap.css"/>" type="text/css"/>
<#hst.defineObjects/>
<#if hstRequest.requestContext.cmsRequest>
<link rel="stylesheet" href="<#hst.link path="/css/cms-request.css"/>" type="text/css"/>
</#if>
</head>
And I just enable plugin over Hippo Setup -> features. And sure then rebuild and run all again.
Then I'm going to Channel Editor -> Edit Page -> Add Component. The drag n drop component on page.
I did all changes by clicking on component. But anyway I don't see any changes on published page.
I didn't find any documentation about that, but maybe somebody resolve this issue and can help to me!
Thanks
I tried it out as well. It indeed does not work out of the box as you would expect. The component uses a template specific of the Setup feature, the seo.ftl. This makes it work as a draggable component in the channel manager. What it does not do is add the configured data to the html head.
If you check the seohelper.ftl [1] of the forge plugin, there you see the code that does this job. What you can do to make it work in your project is add the headcontribution tags as in [1] to seo.ftl. Also make sure you have a <#hst.headcontributions/> tag in the html head section of the base-layout.ftl of your project.
I will create a jira issue for this so.
[1] http://forge.onehippo.org/gf/project/hst-seo-support/scmsvn/?action=browse&path=%2Fcheckout%2Fhst-seo-support%2Fbranches%2Fhst-seo-support-1.01.xx%2Fsrc%2Fmain%2Fjava%2Forg%2Fonehippo%2Fforge%2Fseo%2Fsupport%2Fseohelper.ftl&revision=157

"The following sections have been defined but have not been rendered for the layout page" after deployment

I think i have already read all the related questions here, but sadly i couldn't find an answer yet.
My problem is, locally everything runs fine without errors but when i deploy my website to my server, i'm getting there the following error:
The following sections have been defined but have not been rendered for the layout page >"~/Views/Shared/_Layout.cshtml": "styles"
I'm using Asp.Net MVC 4 with the Razor engine and .Net 4.5.
In _Layout.cshtml i have the following block defined:
<head>
....
#Styles.Render("~/Content/Css")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("styles", required: false)
</head>
And in Index.cshtml the following block:
#section styles{
<link rel="stylesheet" href=... />
#Scripts.Render("~/bundles/js/somejs")
}
This is driving me crazy. If this error would also occur on my development machine, i could debug it. But it only happens on my server, locally everything runs fine.
Even other projects with similar code pieces run fine on my server.
Maybe someone has any hints for me?
I suspect that the contents of the _Layout.cshtml or Index.cshtml on your server is not what you think it is. Maybe the deployed version is different than what you have locally. Deployment went wrong?

IBM Worklight with Dojo Toolkit | dojo/main.js 404 not found issue

I have recently started exploring IBM Worklight which looks really promising to build hybrid mobile apps, in order to do so, created a Worklight project while choosing Dojo Toolkit as a default framework choice and got to see the missing dojo/main.js issue.
Here is the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>TD_Mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="dojo/dojo.js" data-dojo-config="isDebug: false, parseOnLoad: true, async: false"></script>
<link rel="stylesheet" href="css/TD_Mobile.css">
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0"
data-dojo-props="selected:true"></div>
TD_Mobile
<!--application UI goes here-->
<script src="js/initOptions.js"></script>
<script src="js/TD_Mobile.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
When I do build and deploy and run the project from worklight console as a common resource, got to see the main.js not found issue at the following path http://localhost:8080/apps/services/preview/TD_Mobile/common/1.0/default/dojo/main.js
And to my surprise further, I was able to search the reference folder at C:\Users\marif\workspace\WorklightServerHome\TD Mobile New\widget-resources\TD_Mobile-common-e6cd3d9088c88e96df743ed1c9a1b584a90da8c9\preview\default\dojo and don't see main.js and some more JS files there.
Looks like final deployed build somehow not working properly, would appreciate for any quick pointer.
Not all files are included in the dojo build, there is a file called build-dojo.xml in your project.
Add main.js to it.
Under <patternset id="dojo.resources.loose-modules"> add the modules you want to use.
This sounds like a write permissions issue.
Can you please create a new project and see if it happens there as well?
If it does not then the issue is solved, else it might be a plugin issue.
Do you get any error message is the Worklight console in the build process?

Why would Resharper enter "foo foo" whenever I hit "Enter" from within a script tag

I am currently using ReSharper build 6.0.2202.688 and have come across a very strange issue. When I hit the "Enter" key to add a line break from within a Script tag, ReSharper is automatically adding the line "foo foo".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="senchatouch.2/sencha-touch-all-debug.js" type="text/javascript"></script>
<link href="senchatouch.2/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
foo foo
foo foo
foo foo
foo foo
foo foo
foo foo
foo foo
foo foo
});</script>
</body>
</html>
I tried to find this in the LiveTemplates but dont see any that would apply.
I did not see any ReSharper configuring that would cause this issue either. Also, it just randomly started happening as I was going through some Sencha Touch tutorials.
Any idea what would cause this?
Thanks
Please install the latest ReSharper 6.1.1
This bug was fixed since the release of version 6.0 that you're currently using.
I also had this problem and upgraded to ReSharper 6.1.1. However, it didn't fix it. In fact, according to the YouTrack page for this bug, it wasn't fixed until version 7.0.43.13
http://youtrack.jetbrains.com/issue/RSRP-291030
It was happening to me in 7.0.1 (7.0.1098.2760)
I've found the fault to be within a malformed script block whereby a server-side script block was embedded inside a client-side one. e.g.
<script type="text/javascript" language="javascript">
<script runat="server" language="C#">
string ServerString = "this breaks things";
</script>
var clientString="<%=ServerString() %>";
</script>
<script type="text/javascript" language="javascript">
// try typing something here and hitting enter for "foo"
</script>
The fix for me was to move the nested server side script block outside of the client side script block.
Note: Blame removal - this wasn't my code! I was getting random foo inserted into my code and wanted it to stop!
I've opened a new support ticket with JetBrains as it seems odd to want to insert "foo" and delete other characters from source, even if I have malformed html/script.