How to add controller support in a Blazor WASM project - asp.net-core-webapi

I want to have a server web app that serves the code for a Blazor WebAssembly app and also uses controllers to serve data.
So, in a single server app (and in a single executable file), I want to pack the Blazor code that ships to the browser and also have the controllers to respond to HTTP requests.
I was expecting this to be easy to do, but I am honestly lost trying to find how to do this.
The Blazor WASM templates in Visual Studio don't seem to allow this out-of-the-box (the hosting model and what you can do with it is completely different from what you have in web apps) and searching online did not provide any helpful samples on how to do this.
Has anyone done this before?
Note:
I have started with a Blazor app and tried adding controller support to it. Not sure if starting with a web app and trying to add Blazor WebAssembly functionality to it would be easier, but I doubt it...

Related

Best practices for using components with a Blazor WebAssembly app if it is ASPNET Core Hosted?

I have a functioning Blazor WebAssembly (WASM) component which is ASP.NET Core Hosted and contains three projects: client, server, and shared. The client-side component connects to a SQL Server database using Web API endpoints contained in a controller file within the server-side app.
I would now like to share this component with multiple apps. Would the best practice be to use a Razor Class Library (RCL) or to just keep the component in project format and directly add/reference it within projects that will use it? If an RCL is recommended, how do I handle the controller?
I found a partial answer to my question. It appears that prior to .NET 6 it was possible to share Blazor components by sharing their projects. However, with .NET 6 this now generates an error and Razor Class Library's (RCLs) are the recommended method for sharing WebAssembly components. Source: GitHub aspnetcore issue #36732
I also posted to MSDN and to date have been unable to find a way to combine client-side WASM classes and server-side controller classes into a single RCL. From what I have learned so far, I can see two options:
Use an RCL for the client-side component and a regular class library (or second RCL) for the server-side controller. (I have not tested this).
Convert to a server-side Blazor project. This is the solution I ended up using. It does not require a Web API/controller and sharing components via RCL works well. Bonus, coding/debugging is easier and the project loads faster. This solution is working well for my present needs.

Convert Blazor Server App to Blazor Web-assembly approach

I want to develop an SPA project by Blazor technology.
Due to complexity of debugging the Blazor Web-assembly application, I would like to first create it as a server-side app, and then later change it to a Web-assembly application app.
Is this possible? If so, after I have successfully gotten the Server-side Blazor project to work, what changes will I need to make, to get the same functionality working with the WebAssembly project?
Also, are there any particular approaches or technologies I should avoid in my Server-side Blazor project, because they have no equivalent when using WebAssembly?
For the most part, your Blazor components should be able to migrate from Server to Webassembly with few or no changes.
If your Blazor Server application doesn't require data from outside your application (e.g. database calls), and it doesn't use any APIs that aren't supported in the browser (e.g. System.Security.Cryptography), then you may be able to migrate to Blazor Webassembly without any changes to your components.
If your Blazor Server application does require data from outside the browser, then those services will need to be hosted elsewhere and called from your components via Http requests (see Call a web API from ASP.NET Core Blazor).
There are a couple of good options for your Blazor Webassembly back-end, the most common of which is the Blazor Webassembly hosted template.
If you'd rather serve your Webassembly app as a static web application, you can instead move your back-end services to a serverless function application. There are a variety of options for that, the most convenient of which (in my opinion) is using Azure Static Web Apps with .NET and Blazor

Integrate Angular JS project into Web Api project

I currently have a Play project where Angular Front-end is integrated into it with Gulp. Now I need to re-use the angular code into a .Net Web-Api project. Having APP and API as separate project will work. But to avoid dealing with different ports and CORS only option is to have one project that is deployed to one port where AngularJs project gets integrated along with Web Api project.
I have checked many question only this Stack-overflow answer seems relatable to my scenario but no luck with that solution too.
Does anyone know how to do that kind of integration. And is it possible to have integrated both into one project
Create ASP.NET MVC application.
Change default Index.cshtml with your index.html from Angular application. (You'll maybe need to correct paths to other files).
Now ASP.NET runs your application so you can add WebAPI Controllers instead of MVC Controllers inherit from ApiController.

Web.Api 2 and Asp.Net core in one solution

Currently we use ASP.NET core project for our UI. There is need to add an OData service to it. As far as I understand it is not supported well enough yet, so it was decided to implement it in a separate Web.Api 2 project.
Is there someone who has such an experience?
Is it a way to go?
May I encounter troubles with deployment to Azure?
Any ideas and thoughts would be appreciated.
If you hosted the web site on a different web application, then you have to enable CORS on the web API, and you have to test it during development to avoid any issues.
You can overcome this issue by deploying both the UI and API to the same Azure Web App. you can have the UI under the root and the API under a virtual directory, ex: apis

How to integrate .NET web application project (API) with Apache Cordova Project?

So this is the issue:
I have a .NET project that includes 5 Web Application Layers.
One of them is API.
I Recently added a Cordova project as well and I'd like it to communicate with the API Layer.
Is there anyone who knows what to do?
P.S.:
I use visual studio 2013.
You can use normal jQuery Ajax calls to make requests to the API. http://api.jquery.com/jquery.ajax/ or just normal JavaScript ajax https://stackoverflow.com/a/8567149/487940.
I hope that answers your question.
If you're talking about calling into Web API web services from a Cordova app, you may find the Breeze.JS framework useful to help you. You can either just used the client library or use some server side code in addition to client code to help get you up and running and exposing new web services as well.
Otherwise it is simply a matter of making web service calls to the server from your JavaScript code but the specifics will depend on exactly what you're trying to do and what client UI/utility framework you are using.

Resources