Build Scalable Web Apps and APIs with ASP.NET Core, Blazor, Angular for Modern Web Apps
I’m starting this discussion because many developers today need guidance on how to build modern, scalable web applications and APIs by combining ASP.NET Core, Blazor, and Angular—three powerful technologies within the .NET ecosystem. Whether you're focused on server-side development, creating dynamic client-side apps, or integrating both, these frameworks provide incredible capabilities to enhance your projects ASP.NET Core for API Development: ASP.NET Core is a robust, high-performance framework that allows you to create powerful APIs. Some of the best practices we’ll cover include: - Designing RESTful APIs with ASP.NET Core - Utilizing Entity Framework Core for efficient database access - Securing APIs with JWT and OAuth - Handling asynchronous requests for optimal performance - Implementing API versioning and changes over time Building Dynamic Web Apps with Blazor: Blazor enables you to create interactive web applications using C# instead of JavaScript. We will discuss: - Blazor Web Assembly vs. Blazor Server: Differences and use cases - Creating reusable Blazor components for UI - Integrating third-party JavaScript libraries with Blazor - Using SignalR for real-time features - Optimizing Blazor for performance Angular for Full-Featured Client-Side Development: Angular is a powerful, full-featured front-end framework that excels in creating dynamic and complex user interfaces. In this section, we'll dive into: - Why you might choose Angular over Blazor in certain cases - Using Angular CLI to scaffold, build, and maintain apps - Managing state in Angular with NgRx or RxJS - Connecting Angular with ASP.NET Core APIs for data handling - Working with Angular components, services, and routing for a seamless user experience Combining Angular and Blazor in a Single Application: You may have use cases where you want to combine both Blazor and Angular in one application to leverage the strengths of each framework: - When to use Angular for complex frontend features (e.g., dynamic forms, complex data visualization) and Blazor for simpler components or backend-heavy apps. - Managing communication between Angular and Blazor components in a single page (e.g., using - JavaScript Interop to pass data between the two). - Handling authentication and state management across both frameworks. Integration between Frontend (Blazor/Angular) and Backend (ASP.NET Core): No matter whether you're using Angular or Blazor for the frontend, integrating these with your backend API is key. We'll discuss: - Setting up HttpClient for making API calls from both Blazor and Angular - Working with SignalR to enable real-time features in both frontends - Managing authentication and authorization across both Angular and Blazor (JWT, OAuth) - Best practices for passing data and sharing state between the frontend and backend Scalable and Maintainable Web Apps: When building full-stack web applications, it's important to focus on scalability and maintainability. Here are some practices for achieving this: - Structuring your application code to separate concerns (e.g., services, components, repositories) - Utilizing Dependency Injection for flexible and testable code - Modularizing your codebase for easier updates and maintenance - Using Lazy Loading for Angular and Blazor components to improve performance - Leveraging Caching strategies to enhance response times Testing and Continuous Deployment: For any modern application, testing and deployment are crucial. We’ll discuss: - Unit and integration testing in ASP.NET Core, Blazor, and Angular - Automated end-to-end testing (e.g., with Cypress for Angular, bUnit for Blazor) - Continuous Integration/Continuous Deployment (CI/CD) strategies for seamless deployment to cloud platforms like Azure or AWS When to Choose Angular, Blazor, or Both: It’s essential and interesting to know when to use each of these frameworks depending on your project’s needs. Some scenarios we’ll explore: - When to go for Blazor for a unified C# experience in both frontend and backend - Why you might opt for Angular when building highly interactive, feature-rich web applications - Hybrid approaches where you can use Blazor and Angular together for a robust full-stack solution SO: Combining ASP.NET Core, Blazor, and Angular allows developers to choose the right tool for the right job, creating flexible, scalable, and maintainable web applications. Whether you’re leveraging Blazor for its deep integration with .NET or Angular for its powerful frontend capabilities, these technologies offer a powerful suite of tools to build modern web applications. What are your thoughts? How have you integrated Angular or Blazor with ASP.NET Core in your projects? Share your experiences and challenges, and let's collaborate on solutions!Upgrading ASP.NET Core to .NET 6 & C# 10
Check out my series of videos where I try upgrading an ASP.NET Core project template to .NET 6 & C# 10. We looked at the following new features: - Source generated Log messages. - Hot reload. - New launchSettings.json settings. - Validating configuration on startup. - New Strongly typed HTTP header properties. https://www.youtube.com/watch?v=T6iP7QPWmPI In part two, I continue upgrading an ASP.NET Core project template to .NET 6 & C# 10. In this show we looked at: - Open Telemetry in ASP.NET Core. - New hidden features in ASP.NET Core hosting. - New DI method CreateAsyncScope. - New Configuration method GetRequiredSection. - New ArgumentNullException.ThrowIfNull API. - Record classes. https://www.youtube.com/watch?v=mcC9jFLoOlM
Help with my ASP.NET API Application
I have been developing API for a full stack application with React FrontEnd in ASP.NET for my Internship project which is an Asset Management System. I have successfully implemented API Endpoints for CRUD with Authentication with JWT. What topic should I learn next ? Should I start providing API Documentation or is there something else I need to learn ? I have also uploaded the Schema the project is using. I am using ADO.NET instead of Entity Framework for quering with the database. The link to my Repository Source Code: https://github.com/bibashmanjusubedi/Internship
Open Source Materio Asp.NET Core MVC Admin Dashboard Template
https://themeselection.com/item/materio-free-aspnet-core-mvc-admin-template/ Hi All, Sharing here https://themeselection.com/item/materio-free-aspnet-core-mvc-admin-template/ If you’re a developer looking for the latest Free ASP.NET Core 8, MVC 5 Admin Panel Template that is developer-friendly, rich with features, and highly customizable look no further than Sneat. Incredibly versatile, this https://themeselection.com/item/category/asp-net-dashboard/ also allows you to build any type of web application. For instance, you can create: SaaS platforms Project management apps E-commerce backends CRM systems Analytics apps Banking apps Education apps Fitness apps & many more. Features: Based on ASP.NET Core 8, MVC 5 UI Framework Bootstrap 5 Vertical layout 1 Unique Dashboard 1 Chart library SASS Powered Authentication Pages Fully Responsive Layout Organized Folder Structure Clean & Commented Code Well Documented You can check the GitHub repo as well: https://github.com/themeselection/sneat-bootstrap-html-aspnet-core-mvc-admin-template-free
Open Source ASP.NET 8 MVC 5 Admin Template - Sneat
Hi All, Sharing here https://themeselection.com/item/sneat-free-aspnet-core-mvc-admin-template/ If you’re a developer looking for the latest Free ASP.NET Core 8, MVC 5 Admin Panel Template that is developer-friendly, rich with features, and highly customizable look no further than Sneat. Incredibly versatile, this https://themeselection.com/item/category/asp-net-dashboard/ also allows you to build any type of web application. For instance, you can create: SaaS platforms Project management apps E-commerce backends CRM systems Analytics apps Banking apps Education apps Fitness apps & many more. Features: Based on ASP.NET Core 8, MVC 5 UI Framework Bootstrap 5 Vertical layout 1 Unique Dashboard 1 Chart library SASS Powered Authentication Pages Fully Responsive Layout Organized Folder Structure Clean & Commented Code Well Documented You can check the GitHub repo as well: https://github.com/themeselection/sneat-bootstrap-html-aspnet-core-mvc-admin-template-free Hope you all like it.
Resouces / Samples / Ideas for CRUD operations for nested forms (3 or more layers down)
Does anyone know any resources / sample projects / templates for creating, reading, updating and deleting nested forms in Blazor? Preferably using Dapper but even some inspirations for UI would be really helpful. An example would be creating a quote. A quote (id, customer name, etc) can have one have one or more options. Each option (id,option name, total price, etc) can have one or more products (id, name, quantity, price, etc)ASP.NET Core 8 Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.
I created a PATCH method in an ASP.NET Core Web API like this: #region Patch /// <summary> /// Patch TableName by id. /// </summary> // PATCH BY ID: /TableName/patch/{id} [HttpPatch("[action]/{id}", Name = "PatchTableNameById")] [ProducesResponseType(StatusCodes.Status200OK)] [ProducesResponseType(StatusCodes.Status404NotFound)] [ProducesResponseType(StatusCodes.Status400BadRequest)] [SwaggerOperation( Summary = "Patch Table Name by id", Description = "This can be used to modify any table name record", OperationId = "PatchTableNameById", Tags = new[] { "Patch" } )] public async Task<IActionResult> Patch(string id, [FromBody] JsonPatchDocument<TableName> patchDoc) { if (patchDoc != null) { var tablename = await context.TableName.SingleOrDefaultAsync(x => x.Id.ToString() == id); if (tablename == null) return NotFound(); patchDoc.ApplyTo(tablename); context.Entry(tablename).State = EntityState.Modified; if (!ModelState.IsValid) { return BadRequest(ModelState); } await context.SaveChangesAsync(); return new ObjectResult(tablename); } else { return BadRequest(ModelState); } } This works perfectly fine when I call it using Postman or directly using Swagger. However in my Blazor client I get an error when it is called. I have tried using httpclient, RestSharp and now Flurl. The error returned when using the Developer Tools console to review the log is: Access to fetch at 'http://localhost:5259/SharedServices/Commands/TableName/patch/2bd4e0f3-974a-4794-bb63-b0ce00ba5147' from origin 'http://localhost:5265' has been blocked by CORS policy: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response. Here is my CORS policy in the Web API. It is called before anything else adding services. builder.Services.AddCors(options => { options.AddPolicy("AllowSpecificOrigins", builder => { builder.WithOrigins("http://localhost:56075", "http://localhost:5265", "https://localhost:7235").AllowAnyHeader().WithMethods("PATCH"); }); }); I have tried various combinations here including of allowing all methods, headers, and origins. In other words opening it wide up which isn't a great security tactic anyways. Here is my client side code for the call. public async Task Patch(string id, JsonPatchDocument<TableName> patchDoc) { var url = "http://localhost:5259/SharedServices/Commands/TableName/patch/" + id; var resultStr = await url.WithHeader("Content-Type", "application/json-patch+json").PatchJsonAsync(patchDoc) .ReceiveString(); } I have tried about every online suggestion to fix this. One problem is there are a lack of issue reports for later versions of asp.net -- post addition of addCORS. I have tried various browsers thinking this maybe a browser issue but no luck there either. Is this possibly a bug in asp.net core cors? I am also using Steeltoe. Is it possible it is interfering with this? Is there any way to turn off a preflight request or modify it? I tried to use various clients such as httpclient, restsharp, flurl. Also tried using a PUT and got the same issue. I have also tried various browsers. The expected result is a successful unblocked call to my web api method. Thanks for any help you can give!
Compatibility issue with NuGet package created in .net standard 2.0 and consumed in .net 6.0 web app
I have created NuGet package with .net Standard 2.0 and consuming it in .net 6.0 web project but after installation of this Nuget, I am getting below warning Nuget package was restored using '.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8, .NETFramework,Version=v4.8.1' instead of the project target framework 'net6.0'. This package may not be fully compatible with your project. Any lead to fix this issue
ASP.Net Core 6 Web App - Fails to connect to database after published to on-prem IIS
Dear Community, I started to learn .Net core and entity framework, and its great. I built a small webapp as a test with a database (SQL LocalDB) and locally on my dev machine, it works fine. I publish to a folder location, then copy locally to a Windows 2019 Server and added a website on the server's IIS. The app will run the razor pages without a model, but the page that serves the model to add data or view data from the SQL database fails and the error is weird and it says there is no server found and cannot authenticate NT Authority\System. I made sure that SQL server express is installed and I can connect, I made sure localDB was added as a feature to the sqlexpress instance, etc., etc., My question is, do I have to do anything funky like wear a foil paper hat, to get this to work? I cant seem to find any documentation at all and youtube tutorials go through all the motions except publishing the app. Any help will be greatly appreciated.Exploring distributed tracing with ASP NET Core 6
With ASP.NET Core 6 just around the corner and things like OpenTelemetry .NET being stably released not too long ago, it's cool to see all the things working together, without requiring an overly complex setup. https://www.youtube.com/watch?v=l1_i8p2hVlE
