ASP.NET Core: Register Angular2 routes with CORE MVC routes

Standard

In order to integrate your Angular2 routes within your ASP.NET application, register all angular2 routes as unified entity within Core MVC routes configuration.

Angular2 Routes:

import { NgModule } from '@angular/core';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { FooComponent } from './foo.component';
import { BarComponent } from './bar.component';

@NgModule({
    imports: [
        RouterModule.forRoot([
            {
                path: '',
                redirectTo: '/foo',
                pathMatch: 'full',
                data: { title: 'Dashboard' }
            },
            {
                path: 'foo',
                component: FooComponent,
                pathMatch: 'full',
                data: { title: 'Foo' }
            },
            {
                path: 'tweet',
                component: BarComponent,
                pathMatch: 'full',
                data: { title: 'Bar' }
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoutingModule { }

ASP.NET Core Startup.cs Routes:

public void Configure(IApplicationBuilder app)
        {
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");

                routes.MapRoute(
                    name: "foobar",
                    template: "{*url}",
                    defaults: new { controller = "Home", action = "Index" });
            });
        }

ASP.NET Core: Step by Step Guide to Access appsettings.json in web project and class library

Standard

In ASP.NET Core configuration API provides a way of configuring an app based on a list of name-value pairs that can be read at runtime from multiple sources.Its time to get over with web.config to store and access appSettings keys. Please note that class libraries don’t have an appsettings.json by default. The solution is simple to access appsettings.json key/value pairs in your project through Dependency Injection principle in ASP.NET Core. DI has been already part of Core framework, You just have to register your dependencies in startup.cs file under ConfigureService method.

My appsettings.json

{
  "ServiceSettings": {
    "NewsMainUrl": "https://newsapi.org",
    "NewsApiKey": "abc"
  },

  "BALSettings": {
    "Source": "xyz",
    "FilterTerms": "abc;def;"
  }
}

Step 1: Create Model/Entities classes that has properties that match the settings in a section in appsettings.json

Create a class for BALSettings

namespace Tweet.Entities
{
    public class BALSettings
    {
        public string Source { get; set; }
        public string FilterTerms { get; set; }
    }
}

Create a class for ServiceSettings

namespace Tweet.Entities
{
    public class ServiceSettings
    {
        public string NewsMainUrl { get; set; }
        public string NewsApiKey { get; set; }
    }
}

Please note that in case you want to access the section of appsettings.json in class library project, then create above entities class in separate class library project in order to avoid circular dependencies conflict between projects in one solution. There is strong chance your web project might be dependent on that class library project.

screenshot_2

Step 2: Register appsettings.json section with relevant model classes in DI container

You need to get the appsettings.json section and then bind it, It is done by populating relevant model classes and adding them to the IOptions collection in the DI container and then registering them in Configure() method of the Startup class of ASP.NET Core project

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
   services.Configure<BALSettings>(Configuration.GetSection("BALSettings"));
   services.Configure<ServiceSettings>(Configuration.GetSection("ServiceSettings"));
}

Step 3: Access appsettings.json section in MVC or WebAPI controller in ASP.NET Core Project

You can access that class from any method that the framework calls by adding it as a parameter in the constructor. The framework handles finding and providing the class to the constructor. Include Microsoft.Extension.Options in controller to work with IOption collection.

using Microsoft.Extensions.Options;

public class TestController: Controller
{  
    private readonly IOptions<BALSettings> _balSettings;
    private readonly IOptions<ServiceSettings> _serviceSettings; 

    public TestController(IOptions<BALSettings> balSettings,
                          IOptions<ServiceSettings> serviceSettings)
    {
        _balSettings = balSettings;
        _serviceSettings = serviceSettings;
    }
 
    public IActionResult About()         
    {
       ViewData["Source"] = _balSettings.Value.Source;
       ViewData["NewsMainUrl"] = _serviceSettings.Value.NewsMainUrl;
    }
}

 

Step 4: Access appsettings.json section in Class Library Project

Asp.Net Core DI resolve all dependencies before creating controller. As we have already registered our model classes which are containing relevant sections of appsettings.json in startup code.

I have a class library project and I am accessing appsettings.json section in it using below code.

screenshot_4

using Microsoft.Extensions.Options;

public class NewsService : INewsService
    {
        private readonly IOptions<ServiceSettings> _serviceSettings;

        public NewsService(IOptions<ServiceSettings> serviceSettings)
        {
            _serviceSettings = serviceSettings;
        }

        public string composeUrl()
        {
            return _serviceSettings.Value.NewsMainUrl + "&apiKey=" + _serviceSettings.Value.NewsApiKey;
        }
    }

 

Please Note:
If you wan to access appsettings.json key/value data in class library project then you have to add Microsoft.Extensions.Options from NUGET to your relevant class library project, otherwise IOptions collection wouldn’t be accessible to class library project.

Nuget package manager console command:

PM> Install-Package Microsoft.Extensions.Options 

or using nuget package manager

screenshot_5

ASP.NET Core: Error – InvalidOperationException Unable to resolve service for type foo while attempting to activate bar

Standard

DI is for objects that have complex dependencies. Controllers, services, adapters, and repositories are all examples of objects that might be added to DI. In order to implement Dependency Injection by constructor in ASP.NET core. We have to use DI Containers (Autofac, Ninject, StructureMap). I was working on side project in ASP.NET core, came across this particular issue relevant to DI.

An unhandled exception occurred while processing the request.  
InvalidOperationException: Unable to resolve service for type 'Tweet.BAL.INewsData'
while attempting to activate 'Tweet.Controllers.TweetController'.

screenshot_4

Solution:

Good news is that DI has been already part of Core framework, You just have to register your dependencies in startup.cs file under ConfigureService method.

services.AddTransient<IFoo, Foo>();
services.AddSingleton<IBar, Bar>();
services.AddScoped<IHello, Hello>();

The first generic type represents the type (typically an interface) that will be requested from the container. The second generic type represents the concrete type that will be instantiated by the container and used to fulfill such requests.

ASP.NET services can be configured with the following lifetimes:

Transient

Transient objects are always different; a new instance is provided to every controller and every service.

Scoped

Scoped objects are the same within a request, but different across different requests

Singleton

Singleton objects are the same for every object and every request (regardless of whether an instance is provided in ConfigureServices)

C#: Error – ‘System.Net.Http.HttpContent’ does not contain a definition for ‘ReadAsAsync’ and no extension method

Standard

I was working with HttpClient class to connect to external REST API’s from C# code and was implementing solution with asynchronous programming(Async / Await). Since class library project already have reference of System.Net.Http but I was having issue with extension method ReadAsAsync<T>()

'HttpContent' does not contain a definition for 'ReadAsAsync' and no extension method 
'ReadAsAsync' accepting a first argument of type 'HttpContent' could be found 
(are you missing a using directive or an assembly reference?)

screenshot_2

Solution:

ReadAsAsync is declared in the class HttpContentExtensions, which is in the namespace System.Net.Http in the library System.Net.Http.Formatting.

Right click on project and click Add a reference option, then go to Extensions from 
Assemblies tab and choose System.Net.Http.Formatting. If its not there then add 
manually this assembly, which is also available in the folder:
C:\Program Files\Microsoft ASP.NET\ASP.NET MVC 4\Assemblies 

screenshot_3

 

Alternate Solution:

Execute below command in NUGET console, make sure command is executed only relevant to that project

Install-Package Microsoft.AspNet.WebApi.Client

 

ASP.NET Core/MVC: Error – The name ‘angular’ does not exist in the current context on Compilation

Standard

In case you are integrating Angular2 and Angular Material 2 with your ASP.NET Core and ASP.NET MVC project, you might need to include css or js files explicitly in layout.cshtml.

screenshot_5

As you can see red squiggly line on @angular, simple reason is ‘@’ character is Razor server side symbol, so Razor View Engine is throwing up exception.

screenshot_4

Solution:

Declare @lib variable in razor view to handle @angular as part of value for href.

@{ var @lib= "@angular"; }

<environment names="Development">
   <link href="~/node_modules/@lib/material/core/theming/prebuilt/indigo-pink.css" />
</environment>

ASP.NET Core: Access node_modules folder inside ASP.NET Core Project

Standard

We are not supposed to access files from outside of wwwroot. The wwwroot folder is the public folder that’s accessible from outside, when you host it.

The typical publishing process is, that you have a gulp or grunt task that runs when your ASP.NET webproject is compiled or published, it would run the tasks there and copy over the necessary files inside wwwroot.

However In order to access node_module inside your ASP.NET Core project without involving Gulp tasks is to manually register node_modules folder inside Configure() method inside Startup.cs class

Include below namespaces inside Startup.cs class

using Microsoft.Extensions.FileProviders;
using System.IO;

Serve other folders by using app.UseStaticFiles.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    //rest of the code

    ServeFromDirectory(app, env, "node_modules");
    
    app.UseStaticFiles();

    //rest of the code
}

public void ServeFromDirectory(IApplicationBuilder app, IHostingEnvironment env, string path)
{
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, path)
        ),
        RequestPath = "/" + path
    });
}

C#: Parsing HTML Table and Loading HTML Webpage using Html Agility Pack

Standard

Include HTML Agility Pack in your application using nuget. To install it in your project, type the following command in the Package Manager Console.

> Install-Package HtmlAgilityPack

After adding the reference via Nuget, you need to include the reference in your page using the following.

> using HtmlAgilityPack;

Below function will convert webpage HTML table to C# readable code, just need to pass table class name and page URL.

public List<List<string>> ScrapHtmlTable(string className, string pageURL)
{
    HtmlWeb web = new HtmlWeb();
    HtmlDocument document = web.Load(pageURL);
    List<List<string>> parsedTbl = 
      document.DocumentNode.SelectSingleNode("//table[@class='" + className + "']")
      .Descendants("tr")
      .Skip(1) //To Skip Table Header Row
      .Where(tr => tr.Elements("td").Count() > 1)
      .Select(tr => tr.Elements("td").Select(td => td.InnerText.Trim()).ToList())
      .ToList();

    return parsedTbl;
}

Invoking function signature:

ScrapHtmlTable("className1 className2", "https://www.abc.xz");