Blazor Webassembly Database Notification - blazor-server-side

i am a little overwhelmed by all the Information about Blazor Wasm and Blazor Server.
Until now, I have a 5 years old ASP.NET MVC App with a SignalR Hub running to notify my View, when something changed in the Database.
Let's be clear here. I have an existing Database Record. I present this database record to useres in an MVC View. Users are watching this View, and when an external source does an update to this record in the DB, the Partial View refreshes without reloading the whole Website.
As of now, I have a Blazor Webassembly hosted by .NET Core API and could easily switch to Blazor Server.
is this currently possible in Blazor Server/Blazor WASM... I'd prefer WASM if in anyway possible :)
Thanks in advance <3

It's definitely possible with either WASM/Server! You will have to still use a SignalR hub though to tell the client's to refresh the component. However, can be as simple as calling StateHasChanged() when the event to reload the UI is emitted from SignalR Hub. Here's an example:
...
hubConnection.On("RefreshTable", _ =>
{
// Retrieve the updated list from the DB - or utilize SignalR?
StateHasChanged();
});
...
There is a great guide on Microsoft's website to get a basic SignalR chat app running using Blazor WASM: https://learn.microsoft.com/en-us/aspnet/core/tutorials/signalr-blazor?view=aspnetcore-5.0&tabs=visual-studio&pivots=webassembly#add-razor-component-code-for-chat

Related

Confused about Blazor server default project

I'm confused about Blazor server default project.
About two years ago, I tried Blazor server 5.0 template created by Microsoft in Visual Studio 2019.
I see project layout has a 3 subprojects:
Blazor.Client contains the client side code
Blazor.Server contains ASP.NET Core Web API
Blazor.Share contains all shared data in 2 project above.
Now I need to create Blazor server project (version 7.0). When I created a project, there was only one project left.
And now, if we want to write something, we can write it in the initializeAsync method (database operation, file access etc.)
I want to know if this way is correct or not?
I don't need to write logic in Web API and use httpClient to request data, right?
Thanks for your answer, and sorry for my English.
About two years ago, I tried Blazor server 5.0 template created by
Microsoft in Visual Studio 2019. I see project layout has a 3
subprojects:Blazor.Client, Blazor.Server, Blazor.Share
You might misunderstand, The Blazor Server App template will build only one Blazor project. But the Blazor WebAssembly App template with selected the ASP.NET Core Hosted checkbox will generate a solution includes the following ASP.NET Core projects:
"Client": The Blazor WebAssembly app.
"Server": An app that serves the Blazor WebAssembly app and weather data to clients.
"Shared": A project that maintains common classes, methods, and resources.
More detail information, see ASP.NET Core Blazor project structure.
if we want to write something, we can write it in the initializeAsync
method (database operation, file access etc.) I want to know if this
way is correct or not?
Yes, you can access the database or file in the OnInitializedAsync() method.
I don't need to write logic in Web API and use httpClient to request
data, right?
It depends on your choice, by using Web API, you can directly access the data from the API, instead of from the components/web page, if you don't want to provide this API, you can create service layer or directly access the database or file in the OnInitializedAsync() method. Refer to this article: Blazor Server App CRUD With Entity Framework Core In .Net 5.

Identity Server scaffolding and Blazor WebAssembly

I have a hosted Blazor WebAssembly App and I tried to scaffold identity server in the project App.Server. It's working but now I have a mix of cshtml view files in the App.Server (which was intended to be only a asp net core web api). I found hard to integrate the Blazor UI and cshtml files to have a nice user experience.
I was expecting to have a separate pure web api with identityserver api and Blazor taking care of the pages/views and api calls. Is it possible to move those cshtml to Blazor and manage the pages from there or the scaffolding has been done that way because is not?
No, you can't move those Razor Pages pages to your front-end Blazor. But you can design them in such a way as to create the impression that, when the user, for instance, is redirected to the Login page, the Login Razor Pages page is part of the Blazor front-end. I've seen an example of that, and must admit that I couldn't discern it without seeing the source code.
Having a dedicated Web Api project or having Web Api end points in your Blazor server project has nothing to do with the Identity UI not being part of the Blazor front-end.
I was expecting to have a separate pure web api with identityserver api and Blazor taking care of the pages/views and api calls.
You can create a Blazor WebAssembly stand alone project, add a Web Api project, and an IdentityServer4 project, in which case, the flow of OpenID Connect is such that your users wanting to log in are redirected to the Login page provided by the default template of the project, but you can still design the pages to look as though they are part of the Blazor front-end.
The only viable solution that can satisfy your whims is to use Bearer Authentication; that is your Web Api produces Jwt token for users, which are passed to your front-end, and stored in the local or session storage. In that case, your Login page can be a Razor component that gather credentials from the user, and pass them to the Web Api appropriate end points via the Fecth API (this is the HttpClient service in Blazor)... This was the method we adopted before the Blazor team have created the current authentication system of Blazor. Personally I wouldn't recommend one to do that unless he is proficient in Blazor and other fields, and he's ready to invest a great deal of time for developing it. I guess your solution should be deception: let the user think that he's never left the space of the Blazor SPA...

Blazor WASM (Client Side Only) - How to make HTTP Request to different APIs?

So I'm coming from Xamarin world trying to build a Blazor App. And I'm struggling with a high level understanding of why Blazor Apps ( client side only ) cannot make a basic HTTP get call to say google.com or any other http get/post call to different resources/urls?
Can someone break it down for me, am i crazy? how would i ever implement maps.google.com or other http request I'm going to need to make.
I do notice anything with a package, like SendGrid or B2C or Cosmos Nuget Packages seem to work fine... how do they get around the different domain names ?
Can i simply say on my webserver : (in English) - allow requests to google.com and someoneElsesApi.com
or would i have to contact google and have them allow my Blazor app to make calls?
Just really struggling with how to use Blazor Client Only PWA app if it cant connect or call to anything else on the web... seems pointless if a Blazor app cannot make any http calls to other services.
Ok, so yes... I found an Public Open API to test a request against, and it does work from a Blazor WASM (Client only). More specifically the below works just fine..
#inject HttpClient HttpClient
...
string responsString = await HttpClient.GetStringAsync("https://rickandmortyapi.com/api/character/5");
The problem i was having which seems confusing:
Both
Blazor WASM
Xamarin Forms apps
can both call an open public Web API just fine from HTTP Client.
But...
When I create an ASP.NET core API and publish it allowing anonymous access in azure,
Xamarin Forms can call that API
Blazor WASM cannot call it unless i specify CORS correctly in the Web API
So with my inexperience with Blazor WASM i assumed it could not do this.. while Xamarin can. So this changes to ... how is it that the Web API i created in Azure + ASP.net Core Web API - just allows the Xamarin App to call it (without CORS specification)... while CORS Must be set correctly for a Blazor WASM?

How to use SqlDependency in ASP.NET Core 3?

I am building a web app that has a dashboard page in which data must be updated in real-time. I'm using ASP.NET Core 3.0, MVC, ADO.NET, SignalR, and SqlDependency in my project.
I chose SignalR and SqlDepdendency (first time i'm developing with those) because data is fed into my SqlServer database from other db sources, and data needs to be pushed to my web app and to my clients. I found a few websites to explain how to use SqlDependency but I found no code examples with ASP.NET Core 3.0.
https://learn.microsoft.com/en-us/sql/connect/ado-net/sql/detect-changes-sqldependency?view=sql-server-ver15
Where and how should I put the SqlDependency.Start() / SqlDependency.Stop() in the Startup.cs ? I currently have them inside my Repository DAL (Data Access Layer) class' method but I don't think it's correct to have the Start() and Stop() there because it doesn't make sense the SqlDependency is initiated and stopped on each call to that method is made by a client loading the dashboard page.
Also, any drawbacks or problems that you know with SqlDependency in terms of performance or bugs?

Blazor Server App or React for Interactive Web UI

Please I have an ASP.NET Core Web API project that I need to develop a front-end UI to consume it, taking advantage of the Single Page Application (SPA) and component model of Blazor, I am thinking of using Blazor Server app, but my application is going to be an enterprise app with at least 20,000 concurrent users or more in the future and my concern is obviously the SignalR connection.
I know React also uses the SPA and component model approach.
Am at a fix as to which one to choose and whether it can be scalable in the future.
Thank you for your kind response.