GraphQL with ASP.NET Core (Part- II : Middleware)

Read the previous part - GraphQL with ASP.NET Core Part- I : Hello World If you are familiar with ASP.NET Core middleware[1], you may have noticed that in our previous post we already had a middleware. In the initial blank app, that middleware was responsible for throwing a Hello World response. Later we replaced it with our custom code so that it can respond back a result of some static GraphQL query. Middleware is software that's assembled into an application pipeline to handle requests and responses. Each component:…

Keep reading

GraphQL with ASP.NET Core (Part- I : Hello World)

Tired of REST? Let's talk about GraphQL. GraphQL provides a declarative[1] way in which you can fetch data from the server. You can read about every bit of goodness that is baked into GraphQL in the official site. However, in this series of blog posts, I'm going to deal with ASP.NET Core and will show how you can integrate GraphQL with it and use it as a query language for your API. Meaning that you only declare the properties you need (In contrast to restful API where you…

Keep reading

Migrating from the old ASP.NET Core Angular Spa template to the newer one

Client Side Changes: If you are using the ASP.NET Core Angular SPA template that has been shipped with the .NET Core 2.0 release of the framework, you will have the following project structure. Assuming that you put your application scripts under the ClientApp/app folder. So, before migrating, take a back up of the folder. Delete the ClientApp folder altogether. We will generate the folder with the Angular CLI. On the project root directory, open up a command prompt window and generate an Angular app by running the…

Keep reading

About The Updated SPA Templates From ASP.NET Core

Install the new spa templates by running the following dotnet cli command, dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-preview1-final More or less everyone working with ASP.NET Core, tried out the following SPA templates shipped with the framework, These templates are configured to use Angular/React/ReactRedux (based on your choice) on the client side and ASP.NET Core as back-end. Behind the scene a package Microsoft.AspNetCore.SpaServices is used as a middleware to provide different configurable options for your application such as HMR (Hot…

Keep reading

Story of File Uploading in ASP.NET Core (Part III - Streaming Files)

We must consider saving files in byte[] formats unless it is absolute necessary, because over the time it can affect the performance of any data storage system. With that being said, streaming can be a good idea in this scenario. We can configure a static files folder for storing the uploaded files. However, this part is optional. You can simply use the web root folder wwwroot instead. But let's just see how to create a separate static files folder on the content root and use it to serve the uploaded…

Keep reading

Story of File Uploading in ASP.NET Core (Part II - Angular/AJAX)

Uploading files from Angular end to an ASP.NET Core Web API can be done using the same IFormFile interface; introduced in the previous post. To keep things separated, a new API controller (UserController) has been created with the following POST action, [HttpPost] public async Task<IActionResult> PostUser([FromForm]UserVM vm) { if (!ModelState.IsValid) { return BadRequest(ModelState); } /* Use Automapper for mapping UserVM to User */ User user = new User { Name = vm.Name }; using (var memoryStream = new MemoryStream()) { await vm.Avatar.CopyToAsync(memoryStream); user.Avatar = memoryStream.ToArray(); } _context.Users.Add(…

Keep reading

Story of File Uploading in ASP.NET Core (Part I - MVC/Razor Pages)

The built-in IFormFile interface can be used to represent a file sent via some http request on the ASP.NET Core server side. Following is the skeleton of IFormFile: public interface IFormFile { // Gets the raw Content-Type header of the uploaded file. string ContentType { get; } // Gets the raw Content-Disposition header of the uploaded file. string ContentDisposition { get; } // Gets the header dictionary of the uploaded file. IHeaderDictionary Headers { get; } // Gets the file length in bytes. long Length { get; } // Gets the name from the Content-Disposition header. string Name { get; } // Gets the file name…

Keep reading

Angular Forms Validation, updateOn: 'blur' & updateOn: 'submit' (Angular 5 edition)

In my previous post, I wrote about Asynchronous Validation in Angular's Reactive Forms Control. But that was when we were in the age of Angular 4, now a new age is upon us: age of Angular 5. With the new version, we have some new ways of doing validations in Angular forms. Since I won’t talk about everything from the beginning (How to define a form model, how to add validators etc.), consider this post as a continuation of my previous one. I’ll just show you the two…

Keep reading

Asynchronous Validation in Angular's Reactive Forms Control

I've been playing around with Angular for some time now. When it comes to building forms, I tend to go with reactive forms. In short, while using reactive forms; you create a form model consists of different form controls directly in your component class. Once you are done, you bind them (form controls) to your native form control elements defined in the component's view. But that is all about reactive forms and the official documentation talks at length about it here, https://angular.io/guide/reactive-forms I'm assuming that you…

Keep reading

How Tree Shaking Works in ASP.NET Core Angular SPA

If you've been using ES2015 modules throughout your javascript codebase; in other words: import(ing) and export(ing) modules, there is a good news for you. You can eliminate unused modules (dead code) from your published script when using different module bundlers available online. And this process of dead code elimination is known as so called Tree Shaking. While rollup (a trending module bundler) being the first to introduce the concept and implement it, other module bundlers came to realize that this is a must have feature and soon they…

Keep reading