Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

How can I add blazor server-sdie into an exists asp.net core project?

$
0
0

I have made a website by asp.net core 3.1 before.

Now I wanna add a feature of 'contact us'.

After the users input their name/phone and click the submit button, the blazor server-side will send an e-mail of the user information above to my mailbox.

In spite, I can achieve this by Ajax, but now I want to do this by Blazor server-side.

I don't want to migrate the whole project to Blazor server-side for this feature only available on some page but not all the pages.

In my opinion, I will add blazor server-side into the asp.net core project which is existed.

I tried this by myself by adding the services.AddServerSideBlazor(); in ConfigureServices and adding the MapBlazorHub to UseEndpoints in Configure.

I only add a h3 element to the component of Blazor server-side and add the it to an existing page like this:

<component type="typeof(Project.Pages.Contact)" render-mode="ServerPrerendered" />

After I ran the project, it reports these errors in Chrome DevTools:

[2020-03-26T09:01:16.249Z] Error: Failed to complete negotiation with the server: Error
[2020-03-26T09:01:16.249Z] Error: Failed to start the connection: Error
[2020-03-26T09:01:16.250Z] Error: Error
Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.
at e.send (blazor.server.js:1)
at e.sendMessage (blazor.server.js:1)
at e.sendWithProtocol (blazor.server.js:1)
at blazor.server.js:1
at new Promise (<anonymous>)
at e.invoke (blazor.server.js:1)
at e.<anonymous> (blazor.server.js:15)
at blazor.server.js:15
at Object.next (blazor.server.js:15)
at blazor.server.js:15

I googled and found it seems the SignalR of the project did not start correctly.

How can I solve this? Is there any tutorial about this? Thank you.


Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>