Visual C# Technical Guru - April 2018

Another month as a judge in Microsoft TechNet Guru Awards under Visual C# category. The TechNet Guru Awards celebrate the technical articles on Microsoft TechNet.

Post in WikiNinjas Official Blog,

https://blogs.technet.microsoft.com/wikininjas/2018/05/28/microsoft-technet-wiki-technical-guru-awards-april-2018/

Visual C# Technical Guru - April 2018

Happy Coding.

Regards,

Jaliya

ASP.NET Core 2.1: ActionResult<TValue>

ASP.NET Core 2.1 is almost released, we now have access to ASP.NET Core 2.1 RC1. Among other nice features like SignalR (Yes, SignalR is included in ASP.NET Core 2.1) which is getting shipped with ASP.NET Core 2.1, one of my favorites is the introduction of ActionResult<TValue>.

Consider the following API action with ASP.NET Core prior to 2.1.

public Employee Get(int id)
{
    Employee employee = null;
 
    // TODO: Get employee by Id
 
    return employee;
}

So this is very simple, and we are searching for an Employee by Id and returning an Employee. Having Employee is the return type here is very useful for things like documenting the API using Swagger for instance.

But this looks like a bad code, what if there is no Employee by given Id. In that we don’t usually return null, we return HTTP Status Code: NotFound.

But if we are to return that, we no longer can return an Employee type, we are returning an IActionResult. And the code changes to following.

public ActionResult Get(int id)
{
    Employee employee = null;
 
    // TODO: Get employee by Id
 
    if (employee == null)
    {
        return NotFound();
    }
 
    return Ok(employee);
}

Now there is no easy way to know what the encapsulated type of the result.

But we don’t have to face this situation any longer. ASP.NET Core 2.1 introduces this new return type ActionResult<TValue>.

public ActionResult<Employee> Get(int id)
{
    Employee employee = null;
 
    // TODO: Get employee by Id
 
    if (employee == null)
    {
        return NotFound();
    }
 
    return employee;
}

So here ActionResult<Employee> will either wrap Employee or ActionResult based on the result at runtime.

I like this very much, hope you all do!

Happy Coding.

Regards,

Jaliya

Entity Framework Core 2.1: Lazy Loading

Last week (to be exact 7th of May, 2018) Entity Framework Core 2.1 RC 1 was released to the public. And one of the features that got released with EF Core 2.1 was Lazy Loading of related data.

In this post, let’s see how you can use that feature.

Consider I have the following code with an EF Core version prior to 2.1.

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public virtual Department Department { get; set; }
}
 
public class Department
{
    public int Id { get; set; }
    public string Name { get; set; }
    public virtual ICollection<Employee> Employees { get; set; }
}
 
public class MyDbContext : DbContext
{
    public DbSet<Employee> Employees { get; set; }
    public DbSet<Department> Departments { get; set; }
 
    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        optionsBuilder
            .UseSqlServer(@"Server=.;Database=EfCoreLazyLoadingDemo;Trusted_Connection=True;");
    }
}

And I have some Departments and Employees in the database.

Departments

Departments

Employees

Employees

And I have the following code to print out different Departments and Employees of each of the Department.

static void Main(string[] args)
{
    using (MyDbContext context = new MyDbContext())
    {
        foreach (var department in context.Departments)
        {
            Console.WriteLine(department.Name);
            if (department.Employees != null)
            {
                foreach (var employee in department.Employees)
                {
                    Console.WriteLine($"--{employee.Name}");
                }
            }
        }
    }
}

So if you run this, you should be seeing something like below.

Output

No Employees were loaded, and to fix that, you will need to do something like below which is known as Eager Loading.

foreach (var department in context.Departments.Include(d => d.Employees))

Basically, the virtual properties have no effect unlike EF.

And to make Lazy Loading work, we need to update EF Core references to 2.1.0-rc1-final. And in addition, we need to install another package, Microsoft.EntityFrameworkCore.Proxies.

After packages are updated/installed, we have two ways.

1. UseLazyLoadingProxies

This is the easiest way, you just need to add UseLazyLoadingProxies to OnConfiguring override (or within AddDbContext).

public class MyDbContext : DbContext
{
    public DbSet<Employee> Employees { get; set; }
    public DbSet<Department> Departments { get; set; }
 
    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        optionsBuilder
            .UseLazyLoadingProxies()
            .UseSqlServer(@"Server=.;Database=EfCoreLazyLoadingDemo;Trusted_Connection=True;");
    }
}

And now following should be loading each Departments Employees.

foreach (var department in context.Departments)

Output

You don’t have to explicitly Include the Employees. But remember, navigational properties should be virtual.

2. Lazy-loading without proxies

This includes polluting your entities with additional code.

public class Employee
{
    private ILazyLoader _lazyLoader { get; set; }
 
    public Employee(ILazyLoader lazyLoader)
    {
        _lazyLoader = lazyLoader;
    }
 
    public int Id { get; set; }
    public string Name { get; set; }
 
    private Department _department;
    public Department Department
    {
        get => _lazyLoader?.Load(this, ref _department);
        set => _department = value;
    }
}
 
public class Department
{
    private ILazyLoader _lazyLoader { get; set; }
 
    public Department(ILazyLoader lazyLoader)
    {
        _lazyLoader = lazyLoader;
    }
 
    public int Id { get; set; }
    public string Name { get; set; }
 
    private ICollection<Employee> _employees;
    public virtual ICollection<Employee> Employees
    {
        get => _lazyLoader?.Load(this, ref _employees);
        set => _employees = value;
    }
}

Now when using this, you don’t need to have UseLazyLoadingProxies and navigation properties doesn’t need to be virtual. EF Core will be injecting ILazyLoader where it’s required, and he is going to load the related data.

This will also give us the following output.

Output

And before winding up, note, Lazy Loading should be used with care. It doesn’t matter whether it’s EF or EF Core, it can affect the performance big time.

Happy Coding.

Regards,

Jaliya

Dependency Injection in Blazor

[Content in this post is based on Blazor 0.3.0]

In my last post, I wrote about how you can get yourself started on Blazor. If you are new to Blazor, maybe you can read it first, so you can easily catch along with this. In this post let’s see how we can use Dependency Injection within Blazor.

DI is a first class citizen is Blazor meaning Blazor has DI built in.

If you have a look at the Program.cs of an Blazor application, you should be seeing this.

public class Program
{
    static void Main(string[] args)
    {
        var serviceProvider = new BrowserServiceProvider(services =>
        {
                
        });
 
        new BrowserRenderer(serviceProvider).AddComponent<App>("app");
    }
}

Now we have the following Interface and the implementation.

IMyService.cs

interface IMyService
{
    string Echo();
}

MyService.cs

public class MyService : IMyService
{
    public string Echo()
    {
        return "Hello Blazor";
    }
}

And say, I want to be able to use MyService.Echo() method in any of my component.

First what we need to do is register the service.

Service Registration

Here you can see that we can use the ServiceDescriptor to register the service mainly in three different ways, Scoped, Singleton and Transient.

• Scope,d: Currently no scoping is supported. Behaves like Singleton.
• Singleton: Single instance. When requested, everyone gets the same instance.
• Transient: When requested, gets a new instance.

All these registrations are getting added into Blazor’s DI.

For the demo, I will use Singleton.

var serviceProvider = new BrowserServiceProvider(services =>
{
    services.Add(ServiceDescriptor.Singleton<IMyService, MyService>());
})

Now let’s see how we can make use of this. I am going to modify the index.cshtml file.

There is two ways to inject a service into a component.

1. Use @inject

@page "/"
 
@inject IMyService service
 
<h1>Hello, world!</h1>
<h3>@service.Echo()</h3>
 
Welcome to your new app.
 
<SurveyPrompt Title="How is Blazor working for you?" />

2. Use [Inject] attribute

@page "/"
 
<h1>Hello, world!</h1>
<h3>@service.Echo()</h3>
 
Welcome to your new app.
 
<SurveyPrompt Title="How is Blazor working for you?" />
 
@functions{     
   [Inject]     
   IMyService service { get; set; }
}

Both of the approaches will be giving us following.

Output

If you have a look at the FetchData.cshtml file which is getting added when we have created a Blazor project using Visual Studio, you must have noticed injecting of HttpClient.

@page "/fetchdata"
@inject HttpClient Http

Have you wondered where that is coming from. HttpClient  and IUriHelper (Service for working with URIs and navigation state) is by default configured for DI in Blazor.

Pretty straightforward, isn't it. Hope this helps!

Happy Coding.

Regards,

Jaliya

First Look at Blazor

Blazor is web UI framework based on C#, Razor, and HTML for building single-page applications. Yes, with Blazor, we can use C#, which is a server-side language and it’s going to be executed on the browser. That is done via WebAssembly (shortened wasm). Blazor provides all of the benefits of a client-side web UI framework using .NET on the client and optionally on the server.

As of today, Blazor is still in its experimental phase and the latest version is 0.3.0. Even though it’s in its early stages, you, of course, can create a basic to average size web application. So let’s see how you can get started with Blazor.

You need to have,

• Visual Studio 2017 (15.7 Preview 5 or later),
• .NET Core 2.1 SDK (2.1.300-preview2-008533 or later)
• Blazor Language Services extension from the Visual Studio Marketplace

Once you have them, you can just fire up Visual Studio, select Create new project and select ASP.NET Core Web Application as below.

ASP.NET Core Web Application

Now you should be seeing something like below, two Blazor related templates. You can select either ASP.NET Core 2.0 or ASP.NET Core 2.1.

New Application

First template here is a standalone Blazor app which will run on the client side on the browser and it has no dependency on .NET Core in server side. Second is for running on top of ASP.NET Core host.

For this post, let’s go ahead with Blazor template. Once the project is created, you should see something like below in the Solution Explorer.

Solution Explorer

1: index.html

This is the only html page (That’s any way the nature of single-page applications). All the other content get rendered on this page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>FirstBlazorApp</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app>
 
    <script type="blazor-boot"></script>
</body>
</html>

2: Program.cs

Blazor apps are built with components. This is where we are creating the root component.

using Microsoft.AspNetCore.Blazor.Browser.Rendering;
using Microsoft.AspNetCore.Blazor.Browser.Services;
 
namespace FirstBlazorApp
{
    public class Program
    {
        static void Main(string[] args)
        {
            var serviceProvider = new BrowserServiceProvider(services =>
            {
                // Add any custom services here
            });
 
            new BrowserRenderer(serviceProvider).AddComponent<App>("app");
        }
    }
}

Here we are creating the root component of type App.

3: App.cshtml

This is the root component. A component is a piece of UI, such as a page, dialog, or data entry form. Components can be nested, reused, and shared between projects.

<!--
    Configuring this here is temporary. Later we'll move the app config
    into Program.cs, and it won't be necessary to specify AppAssembly.
-->
<Router AppAssembly=typeof(Program).Assembly />

Next let's have a look at the content on Pages folder. This is where we have the pages. Pages are also components. First let’s examine _ViewImports.cshtml  file inside Pages folder.

_ViewImports.cshtml

@layout MainLayout

Here What it says is, we are using MainLayout for all the pages inside Pages folder. Technically layouts are also components. Alternatively you can specify the @layout in individual pages as well. And if you have another folder inside Pages folder, you can have a _ViewImports.cshtml  file there and place a @layout, so for all the pages in that folder, that particular @layout is being used. Basically _ViewImports.cshtml is used to place common usings.

So here the MainLayout is residing inside Shared –> MainLayout.cshtml.

MainLayout.cshtml

@inherits BlazorLayoutComponent
 
<div class="sidebar">
    <NavMenu />
</div>
 
<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>
 
    <div class="content px-4">
        @Body
    </div>
</div>

You can see it uses NavMenu component which is residing in Shared folder. When this layout is being used in pages, pages’ content will get rendered where we have @Body.

Let’s open up Index.cshtml.

Index.cshtml

@page "/"
 
<h1>Hello, world!</h1>
 
Welcome to your new app.
 
<SurveyPrompt Title="How is Blazor working for you?" />

So this is the page, which will get rendered when we hit “http://{url}/” on the browser. And you can see the page contains another component SurveyPrompt. And this component has a Parameter named Title.

SurveyPrompt.cshtml

<div class="alert alert-secondary mt-4" role="alert">
    <span class="oi oi-pencil mr-2" aria-hidden="true"></span> 
    <strong>@Title</strong>
 
    <span class="text-nowrap">
        Please take our
        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=873042">
            brief survey
        </a>
    </span>
    and tell us what you think.
</div>
 
@functions {
    [Parameter]
    string Title { get; set; } // Demonstrates how a parent component can supply parameters
}

Note how the Title is exposed as a property within @functions.

Now if we examine the Counter.cshtml page, you can see the content which is getting displayed when we hit “http://{url}/counter”.

Counter.cshtml

@page "/counter"
 
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
 
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
 
@functions {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
}

And here we have a good use of property binding as well as calling a method. We have a C# method, and it’s getting called by HTML buttons’ onclick event.

Lastly let's look at csproj file.

csproj

<Project Sdk="Microsoft.NET.Sdk.Web">
 
  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <RunCommand>dotnet</RunCommand>
    <RunArguments>blazor serve</RunArguments>
    <LangVersion>7.3</LangVersion>
  </PropertyGroup>
 
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.3.0" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.3.0" />
    <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.3.0" />
  </ItemGroup>
 
  <ItemGroup>
    <BlazorGenerate Remove="Pages\Index.cshtml" />
  </ItemGroup>
 
  <ItemGroup>
    <BlazorGenerate Remove="App.cshtml" />
  </ItemGroup>
 
</Project>

Take a look at RunCommand and RunArguments. So when we run this, what's getting executed is dotnet blazor serve. Kind of Angular.

Isn’t this all nice, I just can’t wait to see what Microsoft will bring with Blazor in upcoming releases.

Head on to https://blazor.net/ and read more.

Happy Coding.

Regards,

Jaliya