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

It's my domain and I can say whatever I like (Five year blog anniversary)

Five years back, at this very same day I started my journey in the world of blogging. I know it's nothing to brag about. However, since it's my own domain, I can say anything I want. But seriously, there have been many ups and downs. There were times when I literally wanted to stop blogging. Although the reasons were silly enough to make anyone say "This guy is a stupid". But again, aren’t we all stupid? Ask yourself why do you read blogs? Isn't it the very same reason…

Keep reading

Live Unit Testing in Visual Studio 2017 Enterprise

Live unit testing is only available in the Enterprise editions of Visual Studio 2017 Version 15.3.0 or later I used to hate writing tests for my projects. But not so long ago, I was forced to change my perspective on that once I start managing big enterprise level applications. As a newbie in the world of TDD (Test Driven Development) what I expect from any IDE is, Quickly show which parts of my application code is covered by unit testing and which are not. Yesterday, I saw the…

Keep reading

Faking with In Memory Database In ASP.NET Core 2.0

Alright, I messed up between the terms: faking and mocking when one of my friend asked me "How are you faking in .net core?". I told him with my little to no knowledge about faking that, "Use the Moq library". But later found that I was totally wrong. And mocking is not actually faking. Then I read a lot of articles/blogs on those topics and came across with this beautiful blog post by Martin Fowler on Mocks Aren't Stubs. Take your time and read it to get your facts…

Keep reading

Lazy-loading NgModules in ASP.NET Core AngularSPA

Angular has this cool feature of loading a module lazily. Modules that are set up to load lazily can significantly save application startup time. Lazy-load module set up is done in application's routing configuration section. As the title suggests we will be using the AngularSPA template shipped with Visual Studio 2017 Preview (2) for demonstration. Route that is configured to lazy-load a module sends an HTTP GET to the server which in turns return the module in a chunk of code block. This only happens when the router is activated…

Keep reading

Cache headers for MVC File Action Result (ASP.NET Core 2.0)

You typically work with one of the following action results when you want to write a file to the response. FileContentResult (writes a binary file to response) FileStreamResult (writes a file from a stream to the response) VirtualFileResult (writes a file specified using a virtual path to the response) These are all coming from ASP.NET Core's MVC package. In earlier version of ASP.NET Core (1.*); using these action results, you could have served files but there wasn't any way of configuring cache headers for the responses. I'm pretty…

Keep reading

Entity Framework Core Triggers in Action (Unofficial Package)

Recently I have had this problem of updating a field of an entity that is dependent on another field of another entity. Confused already? Let me give you an example: so, I've these Inventory and Item entities where there exists a many-to-many relation between them. So, of course there should also be a relation table between them i.e. InventoryItem. The problem I was having actually is I have had this one field called CurrentQuantity on the Item entity and other called IssuedQuantity on the relation table (InventoryItem). Thus, as…

Keep reading

Handling Boolean Types on Angular with Pipe

This post shows you how you can handle .NET Boolean types on Angular client using Pipe. The Pipe formerly known as Filter in AngularJs is an Angular (2,3,4) framework feature that helps transform data. Here goes a very simple pipe which converts a boolean value to a specific Yes/No string. import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'questionableBoolean' }) export class QuestionableBooleanPipe implements PipeTransform { transform(value: boolean): string { return value == true ? 'Yes' : 'No' }; } Next, make the questionableBoolean pipe globally available so that you can use it…

Keep reading

ASP.NET Core API Versioning in Simple Words (Update 1.2.0)

Few days ago, me and my friends developed an API using ASP.NET Core where from the GET method we returned some data to our client app. We did pagination in the front end. Means that first we sent all the data to the client and then did some data.length operation on that to get the items count for applying pagination logic. Then decided that we should do the logic in the back-end (server-side pagination) because it will decrease the payload of the HTTP request. In our case it…

Keep reading