DEV Community: EzzyLearning.net

Display Live Sports Updates using ASP.NET Core SignalR

EzzyLearning.net — Thu, 21 Oct 2021 16:54:47 +0000

Innovations like Google Live Search and real-time updates from social media apps e.g. Facebook or Twitter have changed the user’s expectations from the traditional apps to real-time apps. People want to see everything happening live and real-time updates to the web and mobile apps become the norm now. There are many technologies that facilitate this real-time communication between the server and the client and for .NET developers, the most popular choice is to use ASP.NET Core SignalR. Surprisingly, most of the online articles use the chat or messaging app example and I was so fed up seeing those same examples everywhere so I decided to write an article with a more interesting and real-world example related to live sports updates. In this tutorial, I will build a live football match centre application where users will be able to see the football match scores updated in real-time as soon as any particular football team will score a goal.

Download Source Code

What is a Real-Time Application (RTA)?

A real-time application is a type of application that performs time-critical operations. Application has to perform certain functions within a time frame (usually seconds or milliseconds) so that users sense them as immediate or current. In the past, the developers used techniques such as HTTP Long Pooling, Server Side Events (SSE) to implement real-time applications and each one of these techniques had its pros and cons. The modern way of developing a real-time communication system is to use the protocol called Web Sockets that enables two-way communication between the server and the clients for sending and receiving messages and is widely supported by all modern browsers.

Following are some of the common examples of real-time applications

Videoconference Apps
VoIP Apps
Online Gaming Apps
Chatting or Instant Messaging Apps
Collaboration Apps
Social Media Apps
GPS Tracking Apps
Voting Apps
Auction Apps
Alerts or Notification Apps
Dashboards and Monitoring Apps
Stock Ticker Apps

Overview of ASP.NET Core SignalR?

ASP.NET Core SignalR is an open-source library for adding real-time functionality in ASP.NET web applications. It allows us to send server-side push notifications and contents to the client instantly. It provides an API to facilitate server-to-client remote procedure calls (RPC) and using this API, we can call JavaScript functions on clients from the server-side .NET code.

Following are some of the common features of ASP.NET Core SignalR.

Handles connection management automatically
Sends messages to all connected clients simultaneously. For example, live match updates
Sends messages to specific clients or groups. For example, a specific chat room or a specific user
Scales to handle increasing traffic

To handle real-time communication in a wide range of browsers and devices, SignalR supports the following transport methods and it automatically chooses the best transport method that is within the capabilities of the server and client.

WebSockets
Server-Sent Events
Long Polling

The WebSocket object provides the API for creating and managing a WebSocket connection to a server, as well as for sending and receiving data on the connection.

SignalR for ASP.NET Core supports any server platform that ASP.NET Core supports and the following table shows the browser support for SignalR.

Browser	Version
Apple Safari, including iOS	Latest Version
Google Chrome, including Android	Latest Version
Microsoft Edge	Latest Version
Mozilla Firefox	Latest Version

What is a SignalR Hub?

The SignalR Hub is a high-level API that enables us to call methods on connected clients from the server. In the server code, we define methods that are called by the client. In the client code, we define methods that are called from the server. SignalR takes care of everything behind the scenes that makes real-time client-to-server and server-to-client communications possible.

Hubs call client-side code by sending messages that contain the name and parameters of the client-side method. Objects sent as method parameters are deserialized using the configured protocol. The client tries to match the name to a method in the client-side code. When the client finds a match, it calls the method and passes to it the deserialized parameter data.

To create a hub in your code, you need to create a class that inherits from the Hub class and then you can create public methods in the Hub. These public methods can be called from connected clients. In the example below when any connected client will call the SendMessage method then the method will broadcast the user and message parameters values to all the clients connected to this Hub.

public class ChatHub : Hub
{
    public Task SendMessage(string user, string message)
    {
        return Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

If we don’t want to broadcast messages to all connected clients, then we also have other options. The following table shows the available methods.

Method	Description
All	Calls a method on all connected clients
Caller	Calls a method on the client that invoked the hub method
Others	Calls a method on all connected clients except the client that invoked the method
AllExcept	Calls a method on all connected clients except for the specified connections
Client	Calls a method on a specific connected client
Clients	Calls a method on specific connected clients
Group	Calls a method on all connections in the specified group
GroupExcept	Calls a method on all connections in the specified group, except the specified connections
Groups	Calls a method on multiple groups of connections
OthersInGroup	Calls a method on a group of connections, excluding the client that invoked the hub method
User	Calls a method on all connections associated with a specific user
Users	Calls a method on all connections associated with the specified users

Overview of Football Match Centre Application

I covered some of the basic concepts of ASP.NET Core SignalR. It is now time to build a real-world application that will cover everything we have learned so far. The application will consist of the following two pages

Admin Page – This page will display the list of football matches and will allow the admin to update football match scores. Whenever any team will score a goal, an admin will click the Add Goal button to add one goal for any particular team.

Match Centre Page – This page will display the list of matches to all live users. Every time, an admin will add a goal to any team from the admin page, the match results will update for all online users in real-time.

Create Database and EF Core DBContext

Before we start building the application, I created a database named FootballDb in SQL Server 2016 and the database has the following two tables.

The Teams table will store minimum team information and the Matches table will store the information about the matches scheduled to be played between two Teams. Both Team1 and Team2 columns in the Matches table will be foreign keys and they will store the primary key value from the Teams table. I also added the following information about some English Premier League football teams and matches.

Let’s start by creating an ASP.NET Core MVC Web Application in Visual Studio 2019. We need to connect the database to display match information and for this tutorial, I will use Entity Framework Core (Database First) approach. If you don’t know how to use Entity Framework Core, then you can read my post Data Access in ASP.NET Core using EF Core (Database First). We need to install the following packages to use Entity Framework Core in our application so add these packages using the NuGet package manager.

Add the following connection string in appsettings.json file and don’t forget to replace the DB_SERVER with your database server name in the connection added in asppsettings.json file

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=DB_SERVER; Database=FootballDb; Trusted_Connection=True; MultipleActiveResultSets=true"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Next, add a Data folder in the project and run the following command in Package Manager Console to generate the entity models and the DbContext class with the name FootballDbContext.

Scaffold-DbContext -Connection "Server=DB_SERVER; Database=FootballDb; Trusted_Connection=True; MultipleActiveResultSets=true;" -Provider Microsoft.EntityFrameworkCore.SqlServer -OutputDir "Models" -ContextDir "Data" -Context "FootballDbContext" -NoOnConfiguring

Final step is to configure the Entity Framework provider for SQL Server in the ConfigureService method of the Startup.cs file as follows:

services.AddDbContext<FootballDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

Implement Application Services and Web APIs

Our application will call Web APIs from both admin and match centre pages and those Web APIs will call the backend application services to communicate with the database. Create a Services folder in the project and create the following IFootballService interface.

IFootballService.cs

public interface IFootballService
{
    Task<IEnumerable<MatchViewModel>> GetMatchesAsync();
    Task UpdateMatchAsync(MatchUpdateModel model);
}

Our application only needs two methods to perform its operations.

GetMatchesAsync method will return the list of matches to be displayed on both pages
UpdateMatchAsync method will update the match information in the database whenever the admin will click the “Add Goal” button on the admin page.

Both of the methods above are using two View Model classes and you can declare these classes in the Models folder. Here is the definition of MatchViewModel class.

MatchViewModel.cs

public class MatchViewModel
{
    public int Id { get; set; }
    public DateTime? Date { get; set; }

    public int Team1Id { get; set; }
    public int Team2Id { get; set; }

    public string Team1Name { get; set; }
    public string Team2Name { get; set; }

    public string Team1Logo { get; set; }
    public string Team2Logo { get; set; }

    public int? Team1Goals { get; set; }
    public int? Team2Goals { get; set; }
}

Following is the definition of MatchUpdateModel class

MatchUpdateModel.cs

public class MatchUpdateModel
{
    public int? MatchId { get; set; }
    public int? TeamId { get; set; }
}

Next, create the following FootballService class in the Services folder and implement the IFootballService interface on the class. We need to define both methods declared in the IFootballService interface. Notice, how the FootballDbContext is injected into the service constructor to make sure we can connect the FootballDb database and perform database operations.

FootballService.cs

public class FootballService : IFootballService
{
    private readonly FootballDbContext _context;

    public FootballService(FootballDbContext context)
    {
        _context = context;
    }

    public async Task<IEnumerable<MatchViewModel>> GetMatchesAsync()
    {
        var query = from m in _context.Matches
            join t1 in _context.Teams on m.Team1 equals t1.Id
            join t2 in _context.Teams on m.Team2 equals t2.Id
            select new MatchViewModel()
            {
                Id = m.Id,
                Team1Id = t1.Id,
                Team2Id = t2.Id,
                Team1Name = t1.Name,
                Team2Name = t2.Name,
                Team1Logo = t1.Logo,
                Team2Logo = t2.Logo,
                Team1Goals = m.Team1Goals ?? 0,
                Team2Goals = m.Team2Goals ?? 0
            };
        return await query.ToListAsync();
    }

    public async Task UpdateMatchAsync(MatchUpdateModel model)
    {
        var match = _context.Matches.FirstOrDefault(x => x.Id == model.MatchId);
        if (match != null)
        {
            if (model.TeamId == match.Team1)
            {
                match.Team1Goals = (match.Team1Goals ?? 0) + 1;
            }

            if (model.TeamId == match.Team2)
            {
                match.Team2Goals = (match.Team2Goals ?? 0) + 1;
            }

            _context.Matches.Update(match);
            await _context.SaveChangesAsync(); 
        }
    }
}

The GetMatchesAsync method is using LINQ to join both Teams and Matches table using the Team1 and Team2 foreign keys and then returns the list of MatchViewModel class objects. The UpdateMatchAsync method will first query particular match information from the database and then it will add 1 goal in either Team1 or Team2 depending upon the TeamId value passed to it from the front end. If the admin will add a goal in Team 1 then the Team1 goals will be incremented by 1 and if the admin will add a goal in Team 2 then the Team 2 goals will increment by 1.

To inject and use the above FootballService in controllers, we need to register it with ASP.NET Core dependency injection container and you can do this by adding the following line in the ConfigureService method of the Startup.cs file

services.AddScoped<IFootballService, FootballService>();

To create the Web API, add the following MatchController class in the Controllers folder. The class inherits from the ControllerBase class and the IFootballService interface is injected in the class using the constructor. The methods of the class are pretty straightforward as they are simply calling the corresponding methods we defined in the FootballService above.

MatchController.cs

[ApiController]
public class MatchController : ControllerBase
{
    private readonly IFootballService _footballService;  

    public MatchController(IFootballService footballService)
    {
        _footballService = footballService; 
    }

    // GET: api/Matches
    [HttpGet]
    [Route("api/Matches")]
    public async Task<IEnumerable<MatchViewModel>> GetMatchesAsync()
    {
        return await _footballService.GetMatchesAsync();
    }

    // PUT: api/Matches
    [HttpPut]
    [Route("api/Matches")]
    public async Task UpdateMatchAsync(MatchUpdateModel model)
    {
        await _footballService.UpdateMatchAsync(model); 
    }
}

We are defining the API URLs using the [Route] attribute so we have to add MapControllers method call in Startup.cs file.

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");

    endpoints.MapControllers(); 
});

To make sure everything is working as expected, run the project by pressing F5 and open the following URL in the browser address bar. Please note that the port number shown in the following URL can be different in your case.

http://localhost:58316/api/Matches

You should be able to see the matches information returned from the Web API in JSON format

If you want to learn more about ASP.NET Core Web APIs then read my post A Developer’s Guide for Creating Web APIs with ASP.NET Core 5

Creating Admin Page to Update Football Match Scores

Once our database, services, and Web APIs are ready, it is now time to develop the Admin Page that will allow admin to update match scores. Create the following AdminController class in the Controllers folder and add an Index action method in it.

AdminController.cs

public class AdminController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

The Index method will display the Index.cshtml Razor View available in Views/Admin folder. Open the Index.cshtml file and add the following code to it.

@{
    ViewData["Title"] = "Admin Area";
}

<table class="table match-center">
    <tbody id="listMatches">
    </tbody>
</table>

@section Scripts{
    <script src="~/js/admin.js"></script>
}

There isn’t too much going on in the view. I declared an HTML table with an empty <tbody> element. The important thing to note is that the <tbody> element has been given an id listMatches. This is because I will fetch the list of matches from the Web API using JQuery AJAX get method and will generate the table rows dynamically. In the end, I included a JavaScript file admin.js which we need to add next in wwwroot/js folder.

admin.js

$(document).ready(function () {
    loadMatches(); 
});

function loadMatches() {
    $.get("/api/Matches", null, function (response) {
        bindMatches(response);
    });
}

function bindMatches(matches) {
    var html = "";
    $("#listMatches").html("");
    $.each(matches,
        function(index, match) {
            html += "<tr data-match-id='" + match.id + "'>";

            html += "<td>";
            html += "<img class='team-logo' src='/images/" + match.team1Logo + "'/>";
            html += "<span class='team-name'>" + match.team1Name + "</span>";
            html += "</td>";

            html += "<td>";
            html += "<span data-team-id='" + match.team1Id + "' class='team-goals'>" + match.team1Goals + "</span>";
            html += "<input type='button' class='btn btn-success' value='Add Goal' data-match-id='" + match.id + "' data-team-id='" + match.team1Id + "' onclick='addGoal(this);' />";
            html += "</td>";

            html += "<td>";
            html += "<span class='team-separator'> — </span>";
            html += "</td>";

            html += "<td>";
            html += "<span data-team-id='" + match.team2Id + "' class='team-goals'>" + match.team2Goals + "</span>";
            html += "<input type='button' class='btn btn-success' value='Add Goal' data-match-id='" + match.id + "' data-team-id='" + match.team2Id + "' onclick='addGoal(this);' />";

            html += "</td>";

            html += "<td>";
            html += "<img class='team-logo' src='/images/" + match.team2Logo + "'/>";
            html += "<span class='team-name'>" + match.team2Name + "</span>";
            html += "</td>";

            html += "</tr>";
        });
    $("#listMatches").append(html);
}

In the admin.js file, I am calling a loadMatches function that will make an AJAX call to our Web API endpoint api/Matches, and once we have the API response available it will simply pass the response to bindMatches function that will generate the HTML table rows with matches information.

If you will run the project now and will navigate to /Admin page, you will see output similar to the following.

Note that I am loading the team logos from the wwwroot/images folder and I have downloaded the team logos from a stock photos website. You will be able to get the logos with the article source code that I will upload to GitHub and will make available for you to download.

Another important thing to notice is that all button elements have some dynamic attributes data-match-id and data-team-id which are set using the match and teams Ids we are receiving in API response. Finally, we have onclick event handler which is bind with the addGoal function.

To complete this page, we need to implement addGoal method. This method will first get the matchId and teamId values from the data-match-id and data-team-id attributes we added to each element and then it will send these parameters to api/Patches API using the HTTP PUT method. If the AJAX call is successful, we will once again call the loadMatches method to refresh the page

function addGoal(element) {
    var data =
    {
        matchId: $(element).attr("data-match-id"),
        teamId: $(element).attr("data-team-id")
    }

    $.ajax({
        type: 'PUT',
        url: 'api/Matches',
        contentType: 'application/json',
        data: JSON.stringify(data)
    }).done(function() {
        loadMatches(); 
    });
}

Press F5 to run the project and try updating some matches information by adding some Goals. If you will open the database, you will also see that the goals information is also updating in the Matches table in the database. We will come back to this page later when we will add SignalR related functionality in our project. It is now time to build the Match Centre page for public users.

Creating Match Centre Page for Public Users

The layout and the look and feel of our Match Centre page are almost the same as the admin page. The only difference is that the Match Centre page doesn’t have the “Add Goal” buttons available. Let’s quickly create the HomeController with the following Index action.

#### HomeController.cs

public class HomeController : Controller
{ 
    public IActionResult Index()
    {
        return View();
    } 
}

Following is the code for Index.cshtml view and it is also almost the same as the Index.cshtml view of AdminController we created earlier. The only difference is that it is including the home.js file.

Index.cshtml

@{
    ViewData["Title"] = "MATCH CENTER LIVE";
}

<table class="table match-center">
    <tbody id="listMatches">
    </tbody>
</table>

@section Scripts{  
    <script src="~/js/home.js"></script>
}

Following is the code for home.js file which is almost same as admin.js file we created earlier but this time it doesn’t have the Add Goal buttons in it.

home.js

$(document).ready(function () {
    loadMatches(); 
});

function loadMatches() {
    $.get("/api/Matches", null, function (response) {
        bindMatches(response);
    });
}

function bindMatches(matches) {
    var html = "";
    $("#listMatches").html("");
    $.each(matches,
        function(index, match) {
            html += "<tr data-match-id='" + match.id + "'>";

            html += "<td>";
            html += "<img class='team-logo' src='/images/" + match.team1Logo + "'/>";
            html += "<span class='team-name'>" + match.team1Name + "</span>";
            html += "</td>";

            html += "<td>";
            html += "<span data-team-id='" + match.team1Id + "' class='team-goals'>" + match.team1Goals + "</span>";
            html += "</td>";

            html += "<td>";
            html += "<span class='team-separator'> — </span>";
            html += "</td>";

            html += "<td>";
            html += "<span data-team-id='" + match.team2Id + "' class='team-goals'>" + match.team2Goals + "</span>";
            html += "</td>";

            html += "<td>";
            html += "<img class='team-logo' src='/images/" + match.team2Logo + "'/>";
            html += "<span class='team-name'>" + match.team2Name + "</span>";
            html += "</td>";

            html += "</tr>";
        });
    $("#listMatches").append(html);
}

Press F5 to run the project and you will see a page similar to the following

Try to open both pages side by side and then click the Add Goal button for any match and team. You will see that the Match Centre page is not updating. This is because the Match Centre page has no idea that the match information is updated in the database and it needs to fetch the updated information from the server. If you will refresh the Match Centre page, then the match scores will update. We don’t want the user to keep refreshing the page to see live match updates. We want to update the Match Centre page in real-time without any user interaction and this is where we will use SignalR that will allow us to send real-time notifications from server to client so that we can update the pages on the client instantly.

Getting Started with ASP.NET Core SignalR

SignalR supports bi-directional communication between the server and the client which means we need to have SignalR libraries at both ends. The SignalR server library is included in ASP.NET Core shared framework so we don’t need to install any package or library on the server. However, we need to install the client library and the easiest way to add the client library to our project is to use the LibMan tool. Follow the steps below to add the SignalR client library to the project.

Right-click on the project in Solution Explorer
Choose Add > Client-Side Library menu option.
In the Add Client-Side Library dialog, for Provider select unpkg.
For Library, enter @microsoft/signalr@latest.
Select Choose specific files, expand the dist/browser folder, and select signalr.js and signalr.min.js.
Set Target Location to wwwroot/lib/microsoft/signalr/, and select Install.
LibMan will create a wwwroot/lib/microsoft/signalr folder and will copy the selected files in it.

If you want to learn more about managing server and client libraries in ASP.NET Core projects then you can read my post Working with Packages and Libraries in ASP.NET Core

Once the SignalR libraries are available, we need to create SignalR hub class. The hub class is a high-level abstraction and it handles the client-server communication. It manages connections, groups, and messaging and provides an easy-to-use API to facilitate advanced real-time scenarios. Create a Hubs folder in the project and define the following MatchCentreHub class inherited from the Hub class.

public class MatchCentreHub : Hub
{
    public async Task SendMatchCentreUpdate()
    {
        await Clients.All.SendAsync("RefreshMatchCentre");
    }
}

There is just one method SendMatchCentreUpdate in MatchCentreHub class and this method can be called by a connected client to send notifications to other connected clients. I am sending notifications to All connected clients and you can also see the client-side method name RefreshMatchCentre mentioned as a parameter in the SendAsync method. We will define this method in our client-side code later in this tutorial.

The next step is to configure server-side SignalR and we can do this by calling the AddSignalR method in the ConfigureService method of the Startup.cs file.

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();

    services.AddControllersWithViews();

    services.AddDbContext<FootballDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection")));

    services.AddScoped<IFootballService, FootballService>();
}

We also need to add SignalR to the routing systems so that we can expose the hub endpoint for the clients who want to connect to the hub and we can do this using the MapHub method shown below.

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");

    endpoints.MapControllers();

    endpoints.MapHub<MatchCentreHub>("/matchcenterhub");
});

Working with SignalR JavaScript Client Library

We need to connect Match Centre Page with the MatchCentreHub at the server so that when the MatchCentreHub sends notifications to Match Centre Page and call a client-side function RefreshMatchCentre we can receive the notifications on the client and instantly refresh the Match Centre Page to give users the feeling that the page is updating in real-time.

Include the SignalR JavaScript library in the Index.cshtml page using the standard script element:

@section Scripts{ 
    <script src="~/lib/microsoft/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/home.js"></script>
}

Next, create the connection object in the home.js file by adding the following line at the top of the file. Notice that the connection is built with the same URL we defined at the server using the MapHub configuration above.

var connection = new signalR.HubConnectionBuilder().withUrl("/matchcenterhub").build();

We want Match Centre Page to connect to server side hub as soon as the page is loaded so call the start function as soon as the document is ready.

$(document).ready(function () {
    loadMatches();
    connection.start();
});

You can confirm if the WebSockets connection is established successfully by refreshing the page and seeing the following lines in the browser console window.

The last piece of code we need is to define the RefreshMatchCentre function which will be called from the server whenever the server will send notifications to the client. I am just calling the loadMatches function in RefreshMatchCentre to refresh the matches on the page.

connection.on("RefreshMatchCentre", function (match) {
    loadMatches();
});

Match Centre Page is now complete and ready to receive notifications from the server and as soon as it will receive the notification, it will refresh the page and show the live match updates to the users.

We need to repeat almost same steps for Admin page as well so let’s include the SignalR client library on Index.cshtml view of AdminController.

@section Scripts{
    <script src="~/lib/microsoft/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/admin.js"></script>
}

Build the connection object by adding the following line on top of the admin.js file

var connection = new signalR.HubConnectionBuilder().withUrl("/matchcenterhub").build();

Call the start function as soon as the document is ready

$(document).ready(function () {
    loadMatches();
    connection.start();
});

Next, we need to write the most important line of this application. This line will invoke the method SendMatchCentreUpdate defined in the MatchCentreHub class available on the server. We already know that whenever any client will call the SendMatchCentreUpdate method, the notification will be sent to all connected clients automatically. The best place to invoke the SendMatchCentreUpdate method is when the admin updated the match by clicking the Add Goal button.

function addGoal(element) {
    var data =
    {
        matchId: $(element).attr("data-match-id"),
        teamId: $(element).attr("data-team-id")
    }

    $.ajax({
        type: 'PUT',
        url: 'api/Matches',
        contentType: 'application/json',
        data: JSON.stringify(data)
    }).done(function() {
        loadMatches();

        connection.invoke("SendMatchCentreUpdate").catch(function (err) {
            return console.error(err.toString());
        });
    });
}

It is now time to see the complete application in action. Press F5 and once again open both pages side by side. Try to click the Add Goal button on the Admin page and you will notice that the Match Centre Live Page will update in real-time.

Following is the visual representation of client-server communication happening in this application using SignalR.

Broadcasting from Server using ASP.NET Core SignalR

In the above example, we were invoking the SendMatchCentreUpdate method of MatchCentreHub class from the client side using the SignalR client library invoke function which we added inside addGoal function.

connection.invoke("SendMatchCentreUpdate").catch(function (err) {
    return console.error(err.toString());
});

Sometimes, our scenario is such that we want to invoke hub methods from server-side .NET code and we want to broadcast messages and push notifications from the server to clients when some server-side event occurred. We can easily achieve this using SignalR server-side APIs. In this section of this tutorial, I will show you how you can broadcast messages from the server to clients using SignalR. Before we start, first remove all the client-side code we added in our admin page above and also remove the line where we included the signalr.js file in our admin page.

We are already calling the server-side Web API method UpdateMatchAsync to update the goals in the database so this method is the ideal candidate to invoke the SendMatchCentreHub method which will automatically send notifications to all connected clients.

public async Task UpdateMatchAsync(MatchUpdateModel model)
{
    await _footballService.UpdateMatchAsync(model);
}

Open the MatchController class declare the following object of IHubContext type.

private readonly IHubContext<MatchCentreHub> _hub;

IHubContext allows us to send messages from different areas of the application and we can inject IHubContext in controllers and services using dependency injection. Inject the IHubContext in MatchController as shown below.

public MatchController(IFootballService footballService, IHubContext<MatchCentreHub> hub)
{
    _footballService = footballService;
    _hub = hub;
}

As we now have access to an instance of IHubContext, we can call hub methods as if we are in the hub itself.

// POST: api/Matches
[HttpPut]
[Route("api/Matches")]
public async Task UpdateMatchAsync(MatchUpdateModel model)
{
    await _footballService.UpdateMatchAsync(model);

    await _hub.Clients.All.SendAsync("RefreshMatchCentre");
}

Run the application again and it should work similarly as before and the Match Centre page should update in real-time.

Summary

SignalR is one of the coolest technology available to .NET developers. Its ability to perform tasks in real-time has made this a game-changer technology. I hope in this article, you have learned how to use SignalR and you will now use it in your projects with more confidence. If you enjoyed reading this article, please share this with your friends and colleagues.

A Guide for Building Angular SPA with ASP.NET Core 5 Web API

EzzyLearning.net — Wed, 20 Oct 2021 18:42:12 +0000

These days, it is a common trend to build a single page application (SPA) using a modern front-end web framework such as Angular, React, Vue, etc., and a server-side backend Web API. In this tutorial, I will walk you through a complete example of creating a single page application using Angular that will connect a server-side ASP.NET Core 5 Web API to fetch data from a SQL Server database using Entity Framework Core (Code First). At the end of this tutorial, you will be able to display some useful stats related to football players.

Download Source Code

What is a Single Page Application (SPA)

A single page application (SPA) is a type of web application that doesn’t load entire new pages from the server in an old and traditional way but instead loads data and contents from the server dynamically. SPA loads all necessary HTML, JavaScript, and CSS with a single page load, and the remaining resources are loaded dynamically usually from a backend Web API, and added to the page on different user actions. This technique results in an improved user experience because the user stays on the same page and control is never transferred to another page. Some popular examples of SPAs are Gmail, Facebook, Google Maps, Twitter, Pinterest, etc. There are many front-end frameworks to build SPAs and the most popular ones are React by Facebook and Angular by Google. Angular is the go-to option for developers who want to develop cross-platform, efficient, and sophisticated single-page apps using HTML, CSS, and TypeScript.

Creating Angular SPA in Visual Studio 2019

Open Visual Studio 2019 and create a standard ASP.NET Core Web Application project. Make sure ASP.NET Core 5.0 version is selected and you are choosing ASP.NET Core with Angular template as shown in the following screenshot.

The above project template will generate a standard ASP.NET Core Web Application and a folder called ClientApp that contains the Angular client-side application.

You will also notice that a default Web API controller named WeatherForecastController is also created for us in the Controllers folder that simply returns a list of WeatherForecast objects that contains some random forecast information.

[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        var rng = new Random();
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateTime.Now.AddDays(index),
            TemperatureC = rng.Next(-20, 55),
            Summary = Summaries[rng.Next(Summaries.Length)]
        }).ToArray();
    }
}

Before we start our implementation, the first thing we need to make sure is that we can run our Angular App in the browser and the app can load weather forecast information on the page. To do this, you need to install Angular CLI and need to run some commands.

Right-click on the ClientApp folder and choose the Open in Terminal command from the context menu.

Visual Studio will open the Developer PowerShell window that can be used to run basic npm package manager commands. Let’s install the Angular CLI with the following command.

npm install -g @angular/cli

Next, run the following command that will serve the Angular SPA in the browser.

npm run ng serve

Press F5 to start debugging and now you should be able to see the Angular SPA app opening in the browser. The default Angular App has three pages Home, Counter, and Fetch data. You can click the links shown on the navigation bar to navigate to these pages and notice that when you are navigating from one page to another page, there is no full page load from the server and the app is loading pages very quickly without a full postback to the server. Open the Fetch data page and you will notice that this page is calling the back end ASP.NET Core Web API and displaying weather information.

So far, we haven’t written a single line of code and we are just running the default Angular SPA app created by Visual Studio. It is now time to implement our custom feature in this application. I will create a new page that will display the following information about some Football players.

Setting Up Database with Entity Framework Core (Code First)

We need to set up a database to store the player’s information and I have decided to use Entity Framework Code First approach for this tutorial. Install Microsoft.EntityFrameworkCore.SqlServer, Microsoft.EntityFrameworkCore.Design and Microsoft.EntityFrameworkCore.Tools NuGet packages in the project to perform some EF Core related development tasks.

Next, we need to create our entity models and we normally put our models in the Models folder by convention so let’s create a Models folder in the project root folder and create the following Player model class. Notice, how I used [NotMapped] attributes with some computed properties as I don’t want EF Core to generate database columns for those properties. The values of these properties can be calculated at runtime using the data available in other properties that’s why we normally don’t save such properties in the database.

public class Player
{
    [Key]
    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    public int ShirtNo { get; set; }
    public int Appearances { get; set; }
    public int Goals { get; set; }
    public PlayerPositions Position { get; set; }

    [NotMapped]
    public string PositionName => Position.ToString();

    [NotMapped]
    public decimal GoalsPerMatch => Math.Round((decimal)Goals / (decimal)Appearances, 2);
}

The Player class also has a property Position which is an Enum type property so create the following enum in the Models folder.

public enum PlayerPositions
{
    Goalkeeper,
    Defender,
    Midfielder,
    Forward
}

Next, create a Data folder in the project and create the DbContext class named FootballDbContext in this folder. The DbContext is the most important class of Entity Framework because an instance of DbContext represents a session with the database which can be used to query and save instances of our entities to a database. I am also overriding the OnModelCreating method to seed some player's information into the database table.

public class FootballDbContext : DbContext
{
    public FootballDbContext(DbContextOptions<FootballDbContext> options)
        : base(options)
    {

    }

    public DbSet<Player> Players { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<Player>().HasData(
            new Player() { Id = 1, Name = "Juan Mata", ShirtNo = 8, Appearances  = 268, Goals = 54, Position = PlayerPositions.Forward},
            new Player() { Id = 2, Name = "Paul Pogba", ShirtNo = 6, Appearances  = 130, Goals = 28, Position = PlayerPositions.Midfielder},
            new Player() { Id = 3, Name = "David de Gea", ShirtNo = 1, Appearances  = 335, Goals = 0, Position = PlayerPositions.Goalkeeper},
            new Player() { Id = 4, Name = "Phil Jones", ShirtNo = 4, Appearances  = 200, Goals = 2, Position = PlayerPositions.Defender }
        );
    }
}

Next, we need to define our database connection string and we can save the connection string in the appsettings.json file. Please note that you need to specify your database server name instead of DB_SERVER in the following connection string.

"ConnectionStrings": {
    "DefaultConnection": "Server=DB_SERVER; Database=FootballDb; Trusted_Connection=True; MultipleActiveResultSets=true"
}

Next, we need to register the SQL Server database provider in Startup.cs file using the UseSqlServer method. The UseSqlServer method requires a database connection string and we can pass this information using the GetConnectionString method.

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();

    // In production, the Angular files will be served from this directory
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });

    services.AddDbContext<FootballDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
}

Finally, we are ready to generate our database with the help of EF Core migrations. Migrations allow us to easily create a new database and then incrementally update the database schema to keep it in sync with the application models. You can run migrations using .NET Core CLI tools outside Visual Studio or you can use Package Manager Console tools available in Visual Studio. For this tutorial, I will use Package Manager Console tools so let open Package Manager Console and add the following migration.

Add-Migration InitialDbCreateAndSeedData

EF Core will create a directory called Migrations in the project and will also generate some files in the folder. We are now ready to create our database and Player table using the migrations code generated by EF Core. This can be done by running the following command in Package Manager Console.

Update-Database

Open SQL Server database and you should see a new database FootballDb in the list of databases and if you will open the Players table you will see all of our data is seeded in the table.

If you want to learn EF Code First in detail then you can read my post Data Access in ASP.NET Core using EF Core (Code First). I also have a post about EF Core Database First Data Access in ASP.NET Core using EF Core (Database First) in case you are interested.

Creating ASP.NET Core Web API for Angular SPA

Angular apps can make Ajax based server-side calls and load and display data from backend APIs. We need to create an ASP.NET Core Web API to return Player's data that can be consumed by the Angular front-end app. Let’s create an API Controller PlayerController in the Controllers folder and inject FootballDbContext in the constructor.

[ApiController]
[Route("api/[controller]")]
public class PlayerController : ControllerBase
{
    private readonly FootballDbContext _context;

    public PlayerController(FootballDbContext context)
    {
        _context = context;
    }
}

Next, implement the following GetPlayers method which is simply returning all players from the Player table we created above.

[HttpGet]
public async Task<ActionResult<IEnumerable<Player>>> GetPlayers()
{
    return await _context.Players.ToListAsync();
}

Open the browser and test the API by adding api/Player in the URL as shown below. You should be able to see the player's data in JSON format.

If you want to learn more about ASP.NET Core Web APIs then read my tutorial A Developer’s Guide for Creating Web APIs with ASP.NET Core 5

Creating Angular Component to Consume ASP.NET Core Web API

Angular is a modular framework which means modules are the basic building block of the angular app. Each app must have at least one module which is called the root module and by default, it is defined in the app.module.ts file available in ClientApp/src/app folder

Angular modules can define both the components and services in them. Components are used to define different parts of the application. For example, in the above screenshot, you can see that all three pages of our Angular App Home, Counter, and Fetch data are defined as components and all of these components have their folders within the app folder with the names home, counter, and fetch-data.

A component consists of a view and a TypeScript class where the view defines the look and feel of the component using HTML and CSS and the class defines the functionality/behavior of the component using TypeScript. Every app must have at least one component also called root components and usually available in app.component.ts file also shown in the above screenshot.

For our app, we want to add another component player that will display all players coming from a backend Web API. You can add a new component from the command prompt using the following Angular CLI command

ng generate component player

If you don’t want to use Angular CLI you can also add a player folder in the app folder and add the following two files manually.

player.component.ts
player.component.html

Open the player.component.ts file and define your component as follows.

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html'
})
export class PlayerComponent {
  public players: Player[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<Player[]>(baseUrl + 'api/Player').subscribe(result => {
      this.players = result;
    }, error => console.error(error));
  }
}

interface Player {
  id: number;
  name: string;
  shirtNo: number;
  appearances: number;
  goals: number;
  positionName: number;
  goalsPerMatch: number;
}

The PlayerComponent class is calling our api/Player Web API using HttpClient and initializing the player's property of the class with the data loaded from the backend. We can now use this player's property in the view file player.component.html attached with the component using the templateUrl option.

<h1 id="tableLabel">Football Players</h1>
<p *ngIf="!players"><em>Loading...</em></p>
<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="players">
   <thead>
      <tr>
         <th>Shirt No</th>
         <th>Name</th>
         <th>Position</th>
         <th>Appearances</th>
         <th>Goals</th>
         <th>Goals per match</th>
      </tr>
   </thead>
   <tbody>
      <tr *ngFor="let player of players">
         <td>{{ player.shirtNo }}</td>
         <td>{{ player.name }}</td>
         <td>{{ player.positionName }}</td>
         <td>{{ player.appearances }}</td>
         <td>{{ player.goals }}</td>
         <td>{{ player.goalsPerMatch }}</td>
      </tr>
   </tbody>
</table>

The above view code is also pretty straightforward. I am using ngif directive to render Loading… if players' property is not yet initialized. The ngif directive conditionally includes a template based on the value of an expression. If the expression evaluates to true, Angular renders the template.

<p *ngIf="!players"><em>Loading...</em></p>

The next important piece of code is where I am using ngFor to iterate all the players and displaying each player property in standard HTML td element.

<tr *ngFor="let player of players">
   <td>{{ player.shirtNo }}</td>
   <td>{{ player.name }}</td>
   <td>{{ player.positionName }}</td>
   <td>{{ player.appearances }}</td>
   <td>{{ player.goals }}</td>
   <td>{{ player.goalsPerMatch }}</td>
</tr>

Once our player component is complete, we need to register it in app.module where all application modules are declared.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { PlayerComponent } from './player/player.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    PlayerComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'player', component: PlayerComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Finally, you need to add a new menu item on top of the page so that you can navigate to the players component and see list of players. Open the nav-menu.component.html file and declare the Players menu item as shown below:

<ul class="navbar-nav flex-grow">
    <li class="nav-item" [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{ exact: true }"> <a class="nav-link text-dark" [routerLink]="['/']">Home</a> </li>
    <li class="nav-item" [routerLinkActive]="['link-active']"> <a class="nav-link text-dark" [routerLink]="['/counter']">Counter</a> </li>
    <li class="nav-item" [routerLinkActive]="['link-active']"> <a class="nav-link text-dark" [routerLink]="['/fetch-data']">Fetch data</a> </li>
    <li class="nav-item" [routerLinkActive]="['link-active']"> <a class="nav-link text-dark" [routerLink]="['/player']">Players</a> </li>
</ul>

We have written lots of code and it is now time to see everything in action. Run the application using the method specified at the start of this tutorial and click the Players menu item shown on top of the page. You should see the page similar to the following with all player’s information.

Summary

Angular is a powerful front-end framework for building interactive model applications and when you combine this with the ASP.NET Core Web APIs backend, you can build some seriously amazing apps. In this tutorial, I have just covered the basics of combining Angular with ASP.NET Core. There is a lot more to explore and I will try to write more useful posts on these two technologies. If you have enjoyed this post, please share it with others and spread the knowledge.

How to Use JQuery DataTables with ASP.NET Core Web API

EzzyLearning.net — Sat, 18 Sep 2021 17:16:02 +0000

JQuery DataTables plugin is one of the most powerful and famous plugins for creating tabular data grids. It has built-in support for searching, sorting, and pagination without any configuration and there are so many ways to customize this data grid as per your requirements. It also has some advanced features such as support for AJAX, server-side processing, and styling according to some of the popular frameworks e.g. Bootstrap, Material Design, etc. In one of my old tutorials Using JQuery DataTables with ASP.NET Web API, I demonstrated how to connect DataTables with ASP.NET Web API. Many of my readers requested me to write an updated version of that tutorial for ASP.NET Core so in this tutorial, I will show you how you can use JQuery DataTables with ASP.NET Core Web API.

Configure Entity Framework Core to Fetch Data

Let’s start by creating a new ASP.NET Core MVC Web Application project in Visual Studio 2019 using the standard File > New > Project menu option. I have decided to use Microsoft’s popular AdventureWorks sample database for this tutorial and you can download this database from the Microsoft website. I will be using the following Product table from the AdventureWorks database and we will load its data using ASP.NET Core Web API and then finally we will display it on a page using the DataTables plugin.

I will be using Entity Framework Core (Database First) approach to quickly generate entity model class for the above Product Table and DbContext object. For this purpose, we need to install Microsoft.EntityFrameworkCore.SqlServer NuGet package as well as Microsoft.EntityFrameworkCore.Design and Microsoft.EntityFrameworkCore.Tools NuGet packages to perform some Entity Framework Core design-time development tasks. If you don’t know how to install NuGet packages then read my tutorial Working with Packages and Libraries in ASP.NET Core.

Once the above NuGet packages are installed, generate the entity model class and DbContext using the following Scaffold-DbContext command in Package Manager Console.

Scaffold-DbContext -Connection "Server=DB_SERVER; Database=AdventureWorks; Trusted_Connection=True; MultipleActiveResultSets=true;" -Provider Microsoft.EntityFrameworkCore.SqlServer -OutputDir "Models" -ContextDir "Data" -Context "AdventureWorksDbContext" -Tables "Product" -NoOnConfiguring

The command has the connection string information and some other parameters and it will generate the Product class in the Models folder and AdventureWorksDbContext class in the Data folder. I also used –Tables option with the value Product because for this tutorial, I only want to generate a Product table entity class.

Next, we need to specify the connection string in appsettings.json file as follows:

{
   "ConnectionStrings":{
      "DefaultConnection":"Server=DB_SERVER; Database=AdventureWorks; Trusted_Connection=True; MultipleActiveResultSets=true"
   },
   "Logging":{
      "LogLevel":{
         "Default":"Information",
         "Microsoft":"Warning",
         "Microsoft.Hosting.Lifetime":"Information"
      }
   },
   "AllowedHosts":"*"
}

Entity Framework provider can be configured in ConfigureServices method of Startup.cs file as shown below:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();

    services.AddDbContext<AdventureWorksDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
}

If you want’ to learn more about using Entity Framework, then you can read my tutorials Data Access in ASP.NET Core using EF Core (Database First) and Data Access in ASP.NET Core using EF Core (Code First).

Loading Data using ASP.NET Core Web API

JQuery DataTables can make Ajax based server-side calls and load and display data from backend APIs. We need to create a Web API in ASP.NET Core and need to return data in the format that is acceptable by the DataTables plugin. Let’s create an API Controller ProductsController in the Controllers folder and inject AdventureWorksDbContext in the constructor.

[Route("api/[controller]")]
[ApiController]
public class ProductsController : ControllerBase
{
    private readonly AdventureWorksDbContext _context;

    public ProductsController(AdventureWorksDbContext context)
    {
        _context = context;
    }
}

Next, we will implement the following GetProducts method which is simply returning all products from the Product table available in AdventureWorks database

// GET: api/Products
[HttpGet]
public async Task<ActionResult<List<Product>>> GetProducts()
{
    return await _context.Products.ToListAsync();
}

Open the browser and test the API by adding api/Products in the URL as shown below. You should be able to see the product data available in JSON format.

If you want to learn more about ASP.NET Core Web APIs then read my tutorial A Developer’s Guide for Creating Web APIs with ASP.NET Core 5

Installing JQuery DataTables Plugin in ASP.NET Core

It is now time to download the JQuery DataTables plugin and include it in our project. At the time of writing this tutorial, the latest version of the plugin is 1.10.21 and it can be downloaded from the DataTables website and added to wwwroot folder of the project manually. You can also use the LibMan tool to install and add the DataTables plugin in the project without leaving the Visual Studio. If you want to learn more about installing client-side libraries in ASP.NET Core applications then read my tutorial Working with Packages and Libraries in ASP.NET Core.

Right-click the project name in solution explorer and choose Add > Client-Side Library… menu option. Type datatables@ in the Library field and you should see all the available versions. Select datatables@1.10.21 version and keep Include all library files option selected to download all files related to DataTables plugin. Clicking the Install button will download the plugin files and they will be added in a new datatables folder in wwwroot/lib folder.

Please keep in mind that DataTables is a JQuery plugin and we need JQuery library to use DataTables. Luckily, Visual Studio automatically adds JQuery library in every new ASP.NET Core MVC Web application so we don’t need to download it again using the LibMan tool.

To use DataTables plugin, we need to include plugin related CSS stylesheets and the best place to add these stylesheets is the element of the _Layout.cshtml file. Include jquery.dataTables.css and dataTables.bootstrap4.css stylesheets as shown below.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>

    <link href="~/lib/datatables/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="~/lib/datatables/css/dataTables.bootstrap4.css" rel="stylesheet" />

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>

The file jquery.dataTables.css is the main plugin file and the dataTables.bootstrap4.css file will be used to apply bootstrap 4 look and feel to the generated data grid. You also have the options to choose the look and feel of some popular CSS frameworks such as Foundations, SemanticUI, Material Design, etc.

We also need to add the plugin related JavaScript files such a jquery.dataTables.min.js and these files can be added just before the closing element in the _Layout.cshtml file.

<script src="~/lib/jquery/dist/jquery.js"></script>

    <script src="~/lib/datatables/js/jquery.dataTables.js"></script>
    <script src="~/lib/datatables/js/dataTables.bootstrap4.js"></script>

    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>

Configuring JQuery DataTables Plugin in ASP.NET Core

We are finally ready to use the JQuery DataTables plugin on our page. The plugin normally works with HTML tables so add the following table markup in Index.cshtml file. The markup is using basic bootstrap table classes such as table-bordered, table-striped, etc. I want to display five columns of the Product table so I only included those column headers in the table.

@{
    ViewData["Title"] = "Home Page";
}
<h2>Products</h2>
<table id="example" class="table table-sm table-bordered table-striped" style="width:100%">
    <thead>
        <tr>
            <th>Product Id</th>
            <th>Name</th>
            <th>Product Number</th>
            <th>Color</th>
            <th>List Price</th>
        </tr>
    </thead>
</table>

The next step is to initialize the DataTables plugin on the page with some basic configurations. Add the following script in the site.js file and make sure that the id in our script matches the table id example in the HTML. The important setting in the following code snippet is the ajax which specifies the URL of the Web API we just created above. This setting will be used by the DataTables plugin to fetch and bind data. We also used that columns setting that specifies which data fields to use to generate the columns of the grid. You can read about all the available settings in the plugin manual here.

$(document).ready(function () {
    $('#example').DataTable({
        processing: true,
        ordering: true,
        paging: true,
        searching: true,
        ajax: "api/Products",
        columns: [
            { "data": "productId" },
            { "data": "name" },
            { "data": "productNumber" },
            { "data": "color" },
            { "data": "listPrice" }
        ]
    });
});

DataTables can be used in two different modes:

Client-side – Filtering, paging, and sorting are done in the web-browser.
Server-side – Filtering, paging, and sorting calculations are performed on the server.

By default, the DataTables operates on client-side processing mode, but can it be configured to operate in server-side processing mode. When operating in server-side mode, the DataTables plugin sends some parameters to the server indicating what data it needs, what page number to read, what filters to apply on data, etc. and also expects data to come back in a specific format so that it has all the information to display the table. We need to make sure that our ASP.NET Web API method GetProducts send all the parameters understood by the DataTables plugin. If you will run your project now, you will see that no data is displayed on the page and there is also the following error shown in the browser console.

To fix the above error we need to send data in plugin readable format. Following is the list of parameters DataTables expects will return from the server-side. More detail about these parameters can be found in the DataTables manual.

We need to make sure our product data is wrapped and returned in the data parameter specified above. Let’s create a model class DataTableResponse in the Models folder and declare all of the above parameters as properties in the class.

public class DataTableResponse
{
    public int Draw { get; set; }
    public long RecordsTotal { get; set; }
    public int RecordsFiltered { get; set; }
    public object[] Data { get; set; }
    public string Error { get; set; }
}

Next, we need to adjust the code of the GetProducts method and need to return the DataTableResponse objects instead of the List of Product objects. The code snippet below shows how to wrap the products in the DataTableResponse object along with other properties.

// GET: api/Products
[HttpGet]
public async Task<ActionResult<DataTableResponse>> GetProducts()
{
    var products = await _context.Products.ToListAsync();

    return new DataTableResponse
    {
        RecordsTotal = products.Count(),
        RecordsFiltered = 10,
        Data = products.ToArray()
    };
}

Build and run the project again and this time you will see the following grid rendered in the browser.

Summary

JQuery DataTables is a highly flexible and feature-rich plugin with hundreds of features. The Datatables also supports additional plugins that can be plugged with the DataTables and add even more functionality. There is also a powerful and feature-rich API available which can provide you even more ways to use DataTables plugins programmatically. It is impossible to discuss all plugin features in a single tutorial but I hope this tutorial will put you on the right track.

Data Access in ASP.NET Core using EF Core (Database First)

EzzyLearning.net — Mon, 13 Sep 2021 17:55:07 +0000

In my previous tutorial Data Access in ASP.NET Core 5 using EF Core 5 (Code First), I covered the basics of Entity Framework and DbContext and showed you how to use the Code First technique to generate a new database using the entity models. You can use Code First approach if you are starting a new project but it is not always the case in the real world. Sometimes you already have a database and you have to use Entity Framework with an existing database. Entity Framework Core support this approach as well and in this tutorial, I will demonstrate different techniques for generating DbContext and model classes from an existing database.

Download Source Code

Getting Started with EF Core using Existing Database

For this tutorial, I will be using the following database that has the Customers, Products, Orders, and ProductOrders table with a standard parent-child relationship.

Create a standard ASP.NET Core 5 MVC Web Application and install Entity Framework Core and SQL Server Data Provider by installing Microsoft.EntityFrameworkCore.SqlServer NuGet package. We also need to install Microsoft.EntityFrameworkCore.Design and Microsoft.EntityFramewo r kCore.Tools to perform some Entity Framework Core design-time development tasks such as generating the DbContext and Entity Models from an existing database.

Generating Models from an Existing Database using EF Core

Entity Framework Core doesn’t support the visual designer (.edmx file) for creating models which we were using in the old version of Entity Framework (EF 6). In Entity Framework Core, we need to generate Model classes from an existing database using the following two options.

If you are using Visual Studio, you can use the Package Manager Console (PMC) tools for Entity Framework Core
If you are not using Visual Studio, you can use the cross-platform EF Core Command-line Tools from a command prompt

For this tutorial, I am using Package Manager Console Tools so the main command you need to reverse engineer the models from the existing database schema is Scaffold-DbContext. Please note that for Scaffold-DbContext to generate an entity type, the database table must have a primary key. This command has many options to customize the generated code. The following table shows all available parameters for Scaffold-DbContextcommand.

Parameter	Description
-Connection	This parameter specifies the connection string to the database. If you are using ASP.NET Core 2.x or higher version, then you can also give the value as name= in which case the name comes from the configuration sources that are set up for the project. This is a positional parameter and is required.
-Provider	This parameter specifies the database provider we want to use. We normally provide the name of the NuGet package, for example, Microsoft.EntityFrameworkCore.SqlServer can be used for the SQL Server database. This is a positional parameter and is required.
-OutputDir	This command specifies the directory to put the generated files in. This path is relative to the project directory.
-ContextDir	This parameter specifies the directory to put the DbContext file in. This path is also relative to the project directory.
-Namespace	The parameter is added in Entity Framework Core 5.0 and it specifies the namespace to use for all generated classes. By default, the root namespace and the output directory will be used.
-ContextNamespace	The parameter is also added in Entity Framework Core 5.0 and it specifies the namespace to use for the generated DbContext class. This parameter overrides –Namespace which means you can have a different namespace for DbContext generated class than the generated models.
-Context	This parameter specifies the name of the DbContext class to generate.
-Schemas	The schemas of tables to generate entity types for. If this parameter is omitted, all schemas are included.
-Tables	The tables to generate entity types for. If this parameter is omitted, all tables are included. The example for generating code of specific tables is –Tables “Product, Customer”
-DataAnnotations	This parameter specifies whether we want to use Data Annotation attributes to configure the models. If this parameter is omitted, the generated code will use fluent API to configure models.
-UseDatabaseNames	Use table and column names exactly as they appear in the database. If this parameter is omitted, database names are changed to more closely conform to C# name style conventions.
-Force	Overwrite existing files.
-NoOnConfiguring	The parameter is added in Entity Framework Core 5.0 and it specifies whether we want to generate DbContext.OnConfiguring method in our generated DbContext class or not.
-NoPluralize	The parameter is added in Entity Framework Core 5.0 and it specifies if we want to pluralize the DbSet classes e.g. Product or Products

Let’s try to use some of the parameters from the above table. Open the Package Manager Console of the project and copy/paste the following command and press Enter.

Scaffold-DbContext -Connection "Server=DESKTOP-6SDKTRC; Database=OnlineShopDb; Trusted_Connection=True; MultipleActiveResultSets=true;" -Provider Microsoft.EntityFrameworkCore.SqlServer -OutputDir "Models" -ContextDir "Data" -Context "OnlineShopDbContext"

I am providing connection string as per my database so you need to change the server and database name in the connection string as per your machine. I also specified SQL Server provider because I am using SQL Server database. I want to generate all my model classes in the Models folder and I want my DbContext to be generated in the Data folder with the name OnlineShopDbContext. Once the command will execute you will see the generated classes in Solution Explorer.

The generated model classes such as Product, Customer, etc. are simple C# classes with the properties mapped to database table columns. Here is the example of a Customer class generated from the Customer table in the database.

public partial class Customer
{
    public Customer()
    {
        Orders = new HashSet<Order>();
    }

    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Phone { get; set; }
    public string Email { get; set; }
    public string Mobile { get; set; }

    public virtual ICollection<Order> Orders { get; set; }
}

The code generated in the OnlineShopDbContext class is more interesting. The class is inheriting from DbContext class as expected and it has DbSet properties for each table in the database.

public partial class OnlineShopDbContext : DbContext
{
    public OnlineShopDbContext()
    {
    }

    public OnlineShopDbContext(DbContextOptions<OnlineShopDbContext> options)
        : base(options)
    {
    }

    public virtual DbSet<Customer> Customers { get; set; }
    public virtual DbSet<Order> Orders { get; set; }
    public virtual DbSet<Product> Products { get; set; }
    public virtual DbSet<ProductOrder> ProductOrders { get; set; }

    ...
}

There is also an overridden method OnConfiguring which is configuring the Entity Framework using the UseSqlServer method. You can see that a warning is also generated telling you that you should not save sensitive information such as connection string in the code.

protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
    if (!optionsBuilder.IsConfigured)
    {
        #warning To protect potentially sensitive information in your connection string, 
        you should move it out of source code. You can avoid scaffolding the connection 
        string by using the Name= syntax to read it from configuration - see 
        https://go.microsoft.com/fwlink/?linkid=2131148. For more guidance on 
        storing connection strings, see http://go.microsoft.com/fwlink/?LinkId=723263.

        optionsBuilder.UseSqlServer("Server=DESKTOP-6SDKTRC; Database=OnlineShopDb; Trusted_Connection=True; MultipleActiveResultSets=true;");
    }
}

Let’s first fix this issue as we want to follow the best practices. Run the following command with two additional parameters –NoOnConfiguring and –Force and you will see that this time OnConfiguring method will not be generated.

Scaffold-DbContext -Connection "Server=DESKTOP-6SDKTRC; Database=OnlineShopDb; Trusted_Connection=True; MultipleActiveResultSets=true;" -Provider Microsoft.EntityFrameworkCore.SqlServer -OutputDir "Models" -ContextDir "Data" -Context "OnlineShopDbContext" -NoOnConfiguring –Force

You can specify the connection string in appsettings.json file as follows

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=DESKTOP-6SDKTRC; Database=OnlineShopDb; Trusted_Connection=True; MultipleActiveResultSets=true"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "\*"
}

Entity Framework provider can be configured in ConfigureServices method of Startup.cs file as shown below:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();

    services.AddDbContext<OnlineShopDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
}

If you want to learn more about ASP.NET Core Configuration then read my post A Step by Step Guide for ASP.NET Core Configuration.

The next overridden method in the OnlineShopDbContext class is OnModelCreating which is using the Fluent API to configure and map database tables and columns with classes and properties. If you want Entity Framework to configure mappings using DataAnnotations then you can use the –DataAnnotations parameter of Scaffold-DbContext command.

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
    modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");

    modelBuilder.Entity<Customer>(entity =>
    {
        entity.Property(e => e.FirstName).IsRequired();

        entity.Property(e => e.LastName).IsRequired();
    });

    ...

    OnModelCreatingPartial(modelBuilder);
}

Extending EF Core Generated DbContext Class

In a real project, you would probably add more database tables or columns during development and every time you will generate model classes and DbContext class using Scaffold-DbContext, you will lose all your custom changes and configurations you have done in the OnModelCreating method. It is not recommended to add custom code in overridden method OnModelCreating and that’s why the Scaffold-DbContext command generates a partial method for us.

partial void OnModelCreatingPartial(ModelBuilder modelBuilder);

You can also see that this method is called from inside OnModelCreating method as follows:

OnModelCreatingPartial(modelBuilder);

To extend generated DbContext class, you can create a partial class in your project with the same name and define your custom configurations inside the overridden OnModelCreatingPartial method. Add a file named _OnlineShopDbContext.cs in the Data folder and inside the file define the partial OnlineShopDbContext class by inheriting the same DbContext class. Inside OnModelCreatingPartial you can specify the custom configurations as shown in the code snippet below:

public partial class OnlineShopDbContext : DbContext
{
    partial void OnModelCreatingPartial(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<Customer>(entity =>
        {
            entity.Property(e => e.Phone).IsRequired();
        });
    }
}

Displaying Data in ASP.NET Core using EF Core

In this final section of the tutorial, I will show you how you can use the generated OnlineShopDbContext in ASP.NET Core MVC to display data from the existing database. This is the same technique I have demonstrated in my previous tutorial Data Access in ASP.NET Core using EF Core (Code First)

First of all, we need to inject OnlineShopDbContext class in our HomeController constructor and then we can call the ToListAsync method on Products DbSet. This will automatically fetch data from the existing database. Once the data is available, we will pass the data to Razor View.

public class HomeController : Controller
{
    private readonly OnlineShopDbContext _context;

    public HomeController(OnlineShopDbContext context)
    {
        _context = context;
    }

    public async Task<IActionResult> Index()
    {
        return View(await _context.Products.ToListAsync());
    }
}

The Index Razor View declares the model as IEnumerable and then it has a standard foreach loop that will iterate over the list of Products and will generate an HTML table on the page.

@model IEnumerable<Product>

@{
    ViewData["Title"] = "Home Page";
}
<h2>Products</h2>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
            </tr>
        }
    </tbody>
</table>

If you will run the project now, you will see the following page showing all the products from the database.

Summary

In this tutorial, I have shown you how to generate model classes and DbContext from an existing database using Entity Framework commands and tools. I have also covered how to generate code with Fluent API or Data Annotations and finally, I gave you an example of extending the generated DbContext. If you like this post, please share it with your friends or colleagues to spread the knowledge further.

Data Access in ASP.NET Core using EF Core (Code First)

EzzyLearning.net — Sun, 12 Sep 2021 17:47:04 +0000

No matter, what type of application you are developing, it is most likely that your application needs some sort of data access for the purpose of reading and writing data to and from the database. Back in the day, the developers often used to write ADO.NET code to communicate with the database but in 2008, Microsoft introduced an ORM framework called Entity Framework to bridge the gap between the relational databases and object-oriented programming languages such as C#. Entity Framework is still the most popular and widely used data access technology for .NET developers and its latest version is Entity Framework Core 5. In this tutorial, I will give you an overview of using Entity Framework Core 5 with ASP.NET Core 5 and we will focus on Code First technique that will allow you to create and manage database using code.

Download Source Code

Introduction to Entity Framework Core

Entity Framework (EF) Core is a lightweight, extensible, open-source, and cross-platform version of the popular Entity Framework data access technology. Like other ORM frameworks, EF Core also enables .NET developers to work with a relational database using .NET classes and objects. Developers don’t need to worry about opening database connections, executing SQL commands or stored procedures, and so on. They can simply create and save objects to create rows in database tables and they can also run queries and fetch data from the database and load into .NET objects without writing any SQL queries ever.

Entity Framework Database Providers

EF Core can access many different databases using database providers. There are providers available for almost all popular databases such as SQL Server, MySql, Oracle, PostgreSQL, etc. Some of these providers are maintained as part of the Entity Framework Core Project but others are available from third-party software vendors. Most of these database providers are available as NuGet packages and they are easy to install using the NuGet package manager. Make sure you review each provider's documentation for detailed information about configuring and using the provider.

Following are some of the popular database providers for Entity Framework Core.

Data Provider	Package
SQL Server 2012 onward	Microsoft.EntityFrameworkCore.SqlServer
SQLite	Microsoft.EntityFrameworkCore.Sqlite
MySQL	MySql.Data.EntityFrameworkCore
Oracle	Oracle.EntityFrameworkCore
Db2	IBM.EntityFrameworkCore

If you want to learn how to use NuGet to download packages then read my post Working with Packages and Libraries in ASP.NET Core

What is Entity Model?

Entity Framework supports data access using C# classes called data or entity models. These entity models are then used by a DbContext object that represents a session with the database. This DbContext object allows querying and saving data. There are different ways to create entity models in .NET projects.

Code First: We can hand code a model as a C# class and then use EF Migrations to create and update a database from the model. EF Migrations help us to create, update our database and keep the database synced with our model classes. This tutorial will cover this approach in detail.
Database First: We can generate a model from an existing database. You can learn more about this approach in my other tutorial Data Access in ASP.NET Core using EF Core (Database First)

This article will help you to understand the Code First approach in an ASP.NET Core MVC application using Entity Framework Core migrations. We will create entities such as Product, Customer, Order, and ProductOrder and will create the following tables and relationships in the database.

Getting Started with Entity Framework Core

Let’s create a new ASP.NET MVC Web Application in Visual Studio 2019 using the File > New > Project menu. The first thing we need is to install Entity Framework Core and because we are using SQL Server database so we also need to install SQL Server Data Provider. Open the NuGet package manager and search for the following packages and install them in your project.

NuGet Package	Description
Microsoft.EntityFrameworkCore.SqlServer	Microsoft SQL Server database provider for Entity Framework Core.
Microsoft.EntityFrameworkCore.Design	This package has some shared design-time components for Entity Framework Core Tools
Microsoft.EntityFrameworkCore.Tools	Entity Framework Core Tools will help us in running Migrations related commands e.g. Add-Migration, Remove-Migration, Update-Database directly from NuGet Package Manager Console in Visual Studio.

Product Model

Next, we need to create our entity models and we normally put our models in the Models folder by convention so let’s create a Models folder in the project root folder and create our first model class called Product in it. I am adding the [Key] attribute with the Id property to make sure that the Id column is defined as the primary key column of the table. The [Required] attribute with the Name property will make it a Non-Nullable column. Finally, we have a [Column] attribute with the Price property that specifies the data type and the length in the database to be 18 and 2 decimal point precision.

public class Product
{
    [Key]
    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }
}

Customer Model

Next, we need to create a Customer class that is slightly different than the Product class. We have basic properties such as Id, FirstName, LastName, etc., and a Navigation property Orders which is a Collection of Order entities we will create shortly. When Entity Framework Core will generate database table Customers, it will automatically create a one to many relationships between the Customer and the Orders which means one customer can have many orders in the database.

public class Customer
{
    [Key]
    public int Id { get; set; }

    [Required]
    public string FirstName { get; set; }

    [Required]
    public string LastName { get; set; }

    public string Phone { get; set; }

    public ICollection<Order> Orders { get; set; }
}

Order Model

Next, we need to create an Order entity that has some basic properties as well as a navigation property ProductOrders that will automatically generate an intersection table in the database for the Products and Orders table. The Order class also has another navigation property called Customer that specifies that a customer can be associated with a single order. Note that I am also defining a CustomerId property that will become the foreign key of Customer table.

public class Order
{
    [Key]
    public int Id { get; set; }

    public DateTime? OrderDate { get; set; }

    public int CustomerId { get; set; }

    public Customer Customer { get; set; }

    public ICollection<ProductOrder> ProductOrders { get; set; }
}

ProductOrder Model

Finally, we need to create a ProductOrder entity that will map to our intersection table ProductOrders in the database. There are two navigation properties Product and Order in this class along with two foreign key properties OrderId and ProductId.

public class ProductOrder
{
    [Key]
    public int Id { get; set; }

    public int Quantity { get; set; }

    public int ProductId { get; set; }

    public int OrderId { get; set; }

    public Product Product { get; set; }

    public Order Order { get; set; }
}

Creating Database Context in Entity Framework Core

The DbContext is the most important class of Entity Framework. An instance of DbContext represents a session with the database which can be used to query and save instances of your entities to a database. It can be used to perform the following operations:

Manage database connection
Configure model & relationship
Querying database
Saving data to the database
Configure change tracking
Caching
Transaction management

Let’s create a folder called Data in our project and create a new class called OnlineShopDbContext in this folder. We need to derive this class from the Entity Framework DbContext class. Next, I created four properties of type DbSet where each DbSet represents a table in the database.

public class OnlineShopDbContext : DbContext
{
    public OnlineShopDbContext(DbContextOptions<OnlineShopDbContext> options) 
        : base(options)
    {

    }

    public DbSet<Product> Products { get; set; }
    public DbSet<Customer> Customers { get; set; }
    public DbSet<Order> Orders { get; set; }
    public DbSet<ProductOrder> ProductOrders { get; set; }
}

Next, we need to define our database connection string and we can save the connection string in the appsettings.json file as shown below:

{
   "ConnectionStrings":{
      "DefaultConnection":"Server=DESKTOP-6SDKTRC; Database=OnlineShopDb; Trusted_Connection=True; MultipleActiveResultSets=true"
   },
   "Logging":{
      "LogLevel":{
         "Default":"Information",
         "Microsoft":"Warning",
         "Microsoft.Hosting.Lifetime":"Information"
      }
   },
   "AllowedHosts":"*"
}

Finally, we need to register the SQL Server database provider in Startup.cs file using the UseSqlServer method. The UseSqlServer method requires a database connection string and we can read and pass this information using the GetConnectionString method.

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();

    services.AddDbContext<OnlineShopDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

}

Using Entity Framework Core Migrations

We have created entity models and DbContext object above so it is now time to generate our database with the help of migrations. Migrations allow us to easily create a new database and then incrementally update the database schema to keep it in sync with the application models. You can run migrations using .NET Core CLI tools which will work on all platforms but if you want to stay within Visual Studio then you can also use Package Manager Console tools. For this tutorial, I will use Package Manager Console tools so let open Package Manager Console and add our first migration using the following Add-Migration command.

Add-Migration InitialDatabaseCreate

Our first migration will be used to create a new SQL Server database that’s why I named it InitialDatabaseCreate but you are free to use any name you want. Press Enter and you will see Build started and succeeded messages as follows.

EF Core will create a directory called Migrations in the project and will also generate some files in this folder. Every time you will add a new migration using the Add-Migration command, a new file will be created in the Migrations folder.

If you will open the generated file, you will see that the generated class InitialDatabaseCreate is derived from the Migration class, and two methods Up and Down are overridden in the class. The code inside these methods is self-explanatory. There are CreateTable and CreateIndex method calls in the Up method and there are DropTable calls in the Down method. Up method upgrades our database from its current state to the new state expected by us. The Down method will do the reverse. It will revert our database to the state expected from the previous migration. We are free to add/update code in the files generated by migration commands such as Add-Migration.

public partial class InitialDatabaseCreate : Migration
{
   protected override void Up(MigrationBuilder migrationBuilder)
   {
        migrationBuilder.CreateTable(
            name: "Customers",
            columns: table => new
            {
                Id = table.Column<int>(type: "int", nullable: false)
                    .Annotation("SqlServer:Identity", "1, 1"),
                FirstName = table.Column<string>(type: "nvarchar(max)", nullable: false),
                LastName = table.Column<string>(type: "nvarchar(max)", nullable: false),
                Phone = table.Column<string>(type: "nvarchar(max)", nullable: true)
            },
            constraints: table =>
            {
                table.PrimaryKey("PK_Customers", x => x.Id);
            });

       ...
       ...
   }

   protected override void Down(MigrationBuilder migrationBuilder)
   {
        ...
        ...
        migrationBuilder.DropTable(name: "Customers");
   }
}

We are now ready to create our database and tables using the migration code generated for us. This can be done by running Update-Database command in Package Manager Console within Visual Studio.

Update-Database

Let’s take a look at the database and tables created automatically for us without writing a single line of SQL. Open SQL Server database and you will see a new database OnlineShopDb is now available in the list of Databases. If you will expand the Tables node, you will also see that the Products, Orders, etc. tables are created for us.

If you will open the Products table design view, then you will see the table has the same fields and data types we specified in our Product model above.

Now open the Customer table and you will notice that it is also created exactly how we expected.

You may be wondering from where that __EFMigrationsHistory table came from because we haven’t created any model for this table. This table is a special table, auto created by Entity Framework to keep track of all the migrations already ran against the database. If you will open the table, you will see that it has our first migration InitialDatabaseCreate entry saved in it.

Let’s say you have a new requirement and you want to save customer Emails in the database. You first need to create a new property Email in the Customer model class.

public class Customer
{
    [Key]
    public int Id { get; set; }

    [Required]
    public string FirstName { get; set; }

    [Required]
    public string LastName { get; set; }

    public string Phone { get; set; }

    public string Email { get; set; }

    public ICollection<Order> Orders { get; set; }
}

Next, you need to add a new migration to sync your model with the database. I have given it the name AddEmailInCustomers.

Add-Migration AddEmailInCustomers

Entity Framework will generate another class in the Migrations folder for our migration and you can update your database using the same Update-Database command

Update-Database

Go to database and open the Customers table in design view and you will see a new column Email added in the table as expected. A new migration entry will also be added in __EFMigrationsHistory table.

Seeding Data using EF Core Migrations

So far, we have learned how to create database and tables using EF Migrations and how to keep our database synched with the entity model. Now, let’s say you want to add some initial data in the Products table. You can do this easily by overriding the OnModelCreating method of DbContext in our project OnlineShopDbContext class.

public class OnlineShopDbContext : DbContext
{
    public OnlineShopDbContext(DbContextOptions<OnlineShopDbContext> options) 
        : base(options)
    {
    }

    public DbSet<Product> Products { get; set; }
    public DbSet<Customer> Customers { get; set; }
    public DbSet<Order> Orders { get; set; }
    public DbSet<ProductOrder> ProductOrders { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<Product>().HasData(
            new Product() { Id = 1, Name = "Apple iPad", Price = 1000 },
            new Product() { Id = 2, Name = "Samsung Smart TV", Price = 1500 },
            new Product() { Id = 3, Name = "Nokia 130", Price = 1200 });
    }
}

We want to see some products in the Products table that’s why I am adding the migration with SeedProductsData name

Add-Migration SeedProductsData

As soon as the above command will execute, a new migration class will be added in the Migrations folder and if you will open the class you will see code similar to the following. You can see how the code is calling the InsertData method of MigrationBuilder class add adding the same data we seeded above in the Products table.

public partial class SeedProductsData : Migration
{
    protected override void Up(MigrationBuilder migrationBuilder)
    {
        migrationBuilder.InsertData(
            table: "Products",
            columns: new[] { "Id", "Name", "Price" },
            values: new object[] { 1, "Apple iPad", 1000m });

        migrationBuilder.InsertData(
            table: "Products",
            columns: new[] { "Id", "Name", "Price" },
            values: new object[] { 2, "Samsung Smart TV", 1500m });

        migrationBuilder.InsertData(
            table: "Products",
            columns: new[] { "Id", "Name", "Price" },
            values: new object[] { 3, "Nokia 130", 1200m });
    }
}

Finally, run the Update-Database command and then open the Products table

Displaying Data in ASP.NET Core using EF Core

In this final section of the tutorial, I will show you how you can use the Entity Framework Core in ASP.NET Core MVC to display data from the database. First of all, we need to inject OnlineShopDbContext class in our HomeController constructor and then we can simply call the ToListAsync method on Products DbSet as shown below. This will automatically fetch data from the database and we are then returning the data to Razor View.

public class HomeController : Controller
{
    private readonly OnlineShopDbContext _context;

    public HomeController(OnlineShopDbContext context)
    {
        _context = context;
    }

    public async Task<IActionResult> Index()
    {
        return View(await _context.Products.ToListAsync());
    }
}

The Index Razor View will first declare the model as IEnumerable because our Home Controller is passing a list of products to our Razor View. Finally, I have a standard foreach loop that will iterate over the list of Products and will generate an HTML table on the page.

@model IEnumerable<Product>

@{
    ViewData["Title"] = "Home Page";
}
<h2>Products</h2>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
            </tr>
        }
    </tbody>
</table>

If you will run the project now, you will see the following page showing all the products from the database.

Summary

In this tutorial, I have covered the basics of Entity Framework Core and gave you an overview of Entity Models. I have also covered how to use Entity Framework Code First technique to create a database from scratch using EF Core Migrations. I hope this tutorial will help you at your work or in your projects. Please leave your comments so that I can improve my posts based on your feedback. If you like this post, please share it with your friends or colleagues to spread the knowledge further.

ASP.NET Core Bundling and Minification Using Gulp

EzzyLearning.net — Sun, 29 Aug 2021 09:39:11 +0000

In my previous post A Step by Step Guide to Bundling and Minification in ASP.NET Core, I gave you an overview of the different tools and strategies we can use to implement bundling and minification in ASP.NET Core. I also covered the Visual Studio extension called Bundler & Minifier. These basic tools and extensions are only useful for basic workflows and if your requirements are more complex or you need more than bundling and minification or you want to automate some of these tasks to make your life easier then you have to use task runners such as Gulp, Grunt or Webpack. In this tutorial, I will show you how to use Gulp in Visual Studio and how to use Gulp tasks to automate bundling and minification in Visual Studio.

Download Source Code

What is Gulp?

Gulp is one of the most popular and cross-platform streaming task runners that provide you all the tools and plugins to automate slow and repetitive development routines and workflows and compose them into efficient build pipelines. At a high level, gulp reads files as streams and pipes these streams to different tasks. The main part of the development with gulp is creating tasks using JavaScript. These tasks can use thousands of npm packages to perform different tasks. There are also other popular task runners such as Grunt and Webpack and Visual Studio has native support for these task runners. In this tutorial, we will use the latest version of Gulp 4.0 that is rewritten from the ground-up and will allow us to compose tasks using new series() and parallel() methods. There are also many more advancements added in version 4.0 and you can read about all the new features here.

The gulp tasks we needed to perform bundling and minification are as follows:

We need a gulp task that will delete existing bundled or minified files.
We need a gulp task that will read JavaScript files from a source folder and will bundle them together, minifies the bundled file, and finally save it to a target folder.
We need a gulp task that will read CSS files from a source folder and will bundle them together, minifies the bundled file, and finally save it to a target folder.

We will use the following plugins to perform the above tasks.

del – Deletes files and directories
gulp-concat – Concatenates files
gulp-cssmin – Minifies CSS files
gulp-uglify – Minifies JavaScript files
merge-streams – Merges multiple streams

There are thousands of plugins available to perform all types of routine tasks using gulp. You can search these plugins in npm packages repository. If you are not comfortable in using client-side packages and libraries, I will recommend you read my post Working with Packages and Libraries in ASP.NET Core

What is Gulpfile.js?

So far, we have learned that we need to define gulp tasks using JavaScript and we have to use different plugins to perform different routine tasks now the last question is where we will define these tasks. This is where Gulpfile.js comes in. A Gulpfile.js or gulpfile.js is a file in your project directory that automatically loads when we run the gulp command. In this file, we often define tasks and use gulp APIs like src(), dest(), series(), parallel() etc. We will also create this file shortly to define our gulp tasks. You can read more about this file here.

Converting bundleconfig.json to Gulp

In my last tutorial A Step by Step Guide to Bundling and Minification in ASP.NET Core, we created a bundleconfig.json file for bundling and minification and we also installed a Visual Studio extension called BundlerMinifier. We can reuse the same bundleconfig.json file from Gulp but you have to remove some extra options from the bundleconfig.json file. The following bundleconfig.json file is a trim down version we need in this tutorial. It is simply defining some CSS and JavaScript bundles with source and destination paths.

[
   {
      "outputFileName":"wwwroot/css/main.min.css",
      "inputFiles":[
         "wwwroot/lib/bootstrap/dist/css/bootstrap.css",
         "wwwroot/css/site.css"
      ]
   },
   {
      "outputFileName":"wwwroot/js/main.min.js",
      "inputFiles":[
         "wwwroot/lib/jquery/dist/jquery.js",
         "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
         "wwwroot/js/site.js"
      ]
   }
]

The first step to start using Gulp in your ASP.NET Core project is to install Gulp and related npm modules and create a Gulpfile.js. We can do all this easily by using Bundler & Minifier "Convert To Gulp" option. Right-click on the bundleconfig.json file, choose Bundler & Minifier, and then choose "Convert To Gulp…" option from the menu as shown below.

You will see the following confirmation message asking you about generating gulpfile.js and installing npm packages. You can press OK to proceed.

After few minutes of downloading, you will see the following new items in your solution explorer.

A gulpfile.js
A package.json
Some npm packages are added in Dependencies
A node_modules folder is added in which many node packages are downloaded and installed

A package.json file is a JSON file that is normally available at the root of a project and it contains the metadata information related to the project. It is used to manage the project’s dependencies, scripts, versions, etc. If you will open the generated package.json file you will notice that it has project name, version, and some development related dependencies which are mainly npm packages we will use in gulpfile.js file shortly.

{
   "name":"AspNetCoreBundlingWithGulpDemo",
   "version":"1.0.0",
   "private":true,
   "devDependencies":{
      "del":"^6.0.0",
      "gulp":"^4.0.2",
      "gulp-concat":"^2.6.1",
      "gulp-cssmin":"^0.2.0",
      "gulp-uglify":"^3.0.2",
      "merge-stream":"^2.0.0"
   }
}

How to Define Tasks in Gulp

If you will open gulpfile.js, you will notice that the Bundler & Minifier extension has already generated all the gulp tasks for you. The problem with this generated code is that it is not using Gulp 4.0 even though the package.json file is showing gulp version 4.0.2 in it. This means you have two options now.

You can downgrade your Gulp version in package.json and continue using the generated gulp tasks available in gulpfile.js file
You can use the latest Gulp version 4.0.2 and update gulpfile.js code to use the latest Gulp features.

I have chosen option 2 above as it's always a good option to use the latest version of any tool or framework.

It is now time to update gulpfile.js and learn more about gulp. First of all, we need to specify/import all the required npm packages. These packages can be loaded either by path or name and each of them will be assigned to a variable. This is similar to importing NuGet packages in C# files while working on the server-side.

We are loading the main ‘gulp’ package that contains all gulp related methods and features. Next, we are loading all npm packages I mentioned at the start of this tutorial. Finally, we are saving the reference of bundleconfig.json file in a local variable bundleconfig so that we can read input and output file paths from bundleconfig.json file.

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    merge = require("merge-stream"),
    del = require("del"),
    bundleconfig = require("./bundleconfig.json");

Next, we have a regex variable that will keep both css and js files regex which are used in getBundles function to filter and fetch files matching with a specific regex pattern.

var regex = {
    css: /\\.css$/,
    js: /\\.js$/
};

function getBundles(regexPattern) {
    return bundleconfig.filter(function (bundle) {
        return regexPattern.test(bundle.outputFileName);
    });
}

Clean Task

Next, we need to define the ‘clean’ gulp task. The clean task will remove the existing minified files so that they can be regenerated with the updated code or functionality. Notice that the gulp tasks are simply JavaScript functions. We create JavaScript functions and then registered them by using gulp.task() method as we did with our clean function below.

function clean() {
    var files = bundleconfig.map(function (bundle) {
        return bundle.outputFileName;
    });

    return del(files);
}
gulp.task(clean);

Minify JS Task

To minify JavaScript files, I am creating minJs task. This task

Load all JavaScript files
Concatenates or bundle all files using ‘concat’ module
Minify the bundled file using ‘ugligy’ module
Place the resulting minified file at the root location

function minJs() {
    var tasks = getBundles(regex.js).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
}
gulp.task(minJs);

Minify CSS Task

To minify CSS files, I am creating minCss task. This task

Load all CSS files
Concatenates or bundle all files using ‘concat’ module
Minify the bundled file using 'cssmin' module
Place the resulting minified file at the root location

function minCss() {
    var tasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
}
gulp.task(minCss);

In the end, I created a named task with the name ‘min’ and combine all task functions using gulp.series() method. The gulp.series() method executes multiple tasks one after another in a series. There is also another method called gulp.parallel() that can be used to execute multiple tasks simultaneously.

gulp.task("min", gulp.series(clean, minJs, minCss));

Following is the complete gulpfile.js file with all the tasks

"use strict";

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    merge = require("merge-stream"),
    del = require("del"),
    bundleconfig = require("./bundleconfig.json");

var regex = {
    css: /\\.css$/,
    js: /\\.js$/
};

function getBundles(regexPattern) {
    return bundleconfig.filter(function (bundle) {
        return regexPattern.test(bundle.outputFileName);
    });
}

function clean() {
    var files = bundleconfig.map(function (bundle) {
        return bundle.outputFileName;
    });

    return del(files);
}
gulp.task(clean);

function minJs() {
    var tasks = getBundles(regex.js).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
}
gulp.task(minJs);

function minCss() {
    var tasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
}
gulp.task(minCss);

gulp.task("min", gulp.series(clean, minJs, minCss));

Running Gulp Tasks in Visual Studio

We are now ready to run our gulp tasks using Visual Studio. Open the Task Runner Explorer window and you will notice that it is reading Gulpfile.js and showing all gulp tasks.

You can run the ‘min’ task by right-clicking it and selecting "Run". The ‘min’ task will be shown on the right-hand side and you can also view the logs which display when a particular task is finished and how much time a particular task took to complete.

You will see that the main.min.css and main.min.js files will be generated in Solution Explorer. You can also run individual tasks to perform a specific function. For example, you can run the ‘clean’ task to delete the minified files.

Binding Gulp Tasks with Visual Studio Events

Running gulp tasks from Task Runner Explorer every time you make some changes in JavaScript of CSS files during development seems a non-productive method. You can automate this process by binding these tasks with certain Visual Studio events. You can

Bind any task with any event
Bind one task with multiple events
Bind multiple tasks with a single event

We can bind Gulp.js tasks with the following Visual Studio events:

Before Build
After Build
Clean Build
Project Open

To bind a task with an event, right-click on a task in Task Runner Explorer and choose any event from the child menu of the “Bindings” menu as shown below:

We can also define this binding directly in the gulpfile.js using the following syntax. The following line states that the 'min’ task should run when Visual Studio executes the AfterBuild event.

/// <binding AfterBuild='min' />

Summary

In this tutorial, I have shown you how to write and integrate Gulp tasks in Visual Studio to manage the Bundling and Minification of JavaScript and CSS files automatically. You can create all sorts of tasks by using thousands of modules available in the online npm repository. I hope you have learned something new in this tutorial and you will start doing more and more automation to make yourself more productive as a developer.

7 Productivity Tips for Developers (Infographic)

EzzyLearning.net — Sun, 29 Aug 2021 09:28:56 +0000

A Step by Step Guide to Bundling and Minification in ASP.NET Core

EzzyLearning.net — Sun, 29 Aug 2021 09:26:02 +0000

It is the dream of every web developer to build blazing fast and high-performance web applications but this is not easy to accomplish unless we implement some performance optimizations. Web pages have evolved from static HTML pages to complex and responsive pages with a lot of dynamic contents and plugins which require a large number of CSS and JavaScript files to be downloaded to the clients. To improve the initial page request load time, we normally apply two performance techniques called bundling and minification. In this tutorial, I will give you a step by step overview of different tools and techniques we can use to apply bundling and minification in ASP.NET Core 5 applications.

Download Source Code

Introduction To Bundling and Minification

Bundling and minification are two distinct performance optimizations we can use in our web apps to improve the performance of our apps and to reduce the number of requests from the browser to server and to reduce the size of data transferred from server to browser. If these two techniques are used together they improve the load time of our page on the first request. Once the page has been requested and loaded into the browser, the browser caches the static files e.g. JavaScript, CSS, and images so this improves the overall user experience.

Bundling

Bundling is a process of combining multiple files into a single file. The benefit is that the browser needs to make fewer requests for all those separate files and needs to load just a single file from the server. We can have separate bundles for CSS and JavaScript files and we can even have separate bundles for third-party plugins, scripts, and styles.

Minification

Minification is the process of removing unnecessary comments, spaces, and extra characters from the code without altering any functionality. This means we can reduce the file size significantly which increases the file load time from server to client.

The following table (available at the official docs page) outlines the differences between individually loading assets and using bundling and minification on a local machine. You can expect even greater performance gains when bundled and minified assets are transferred over the network.

Action	With Bundling and Minification	Without Bundling and Minification	Change
File Requests	7	18	157%
KB Transferred	156	264.68	70%
Load Time (ms)	885	2360	167%

Bundling and Minification Strategies in ASP.NET Core

In old days, we were using a different technique to register all our bundles in BundleConfig.cs file available in App_Start folder. A method called RegisterBundles in ASP.NET was used to create, register, and configure bundles as follows:



public static void RegisterBundles(BundleCollection bundles)
{   
    bundles.Add(new ScriptBundle("~/bundles/js").Include(
      "~/Scripts/bootstrap.js",
      "~/Scripts/jquery-3.3.1.js"));
}

We were including above bundles in our Web pages, Views and Layout Pages as follows:



<head>
    <title>@ViewBag.Title</title>

    @Scripts.Render("~/bundles/js")
</head>

While this approach looks easy to use, it’s no longer applicable in ASP.NET 5. The new ASP.NET Core project templates in Visual Studio provide a solution for bundling and minification using a JSON configuration file called bundleconfig.json. There are also some NuGet Packages and Visual Studio extensions that can help us in bundling and minification. If you need a more advanced bundling and minification solution or your workflow requires processing beyond bundling and minification then you have the option of using third-party tools or task runners such as Gulp, Grunt or Webpack, etc.

Another important aspect is to decide whether you want to do bundling and minification at design time or run time. Design time bundling and minification will allow you to create minified files before application deployment which will reduce server load time. However, the downside is that the design time bundling and minification only work with static files and it will also increase the build complexity.

Configure Bundles using bundleconfig.json File

In ASP.NET Core we typically add our static files in the wwwroot folder. There is a folder css for CSS files, a folder js for JavaScript files, and a third folder lib for external libraries such as JQuery, bootstrap, etc. To start bundling and minification, the first you need is a bundleconfig.json file so let’s add this file using the standard Add New Item dialog in Visual Studio.

Typically, we add this file to our project root folder.

Here's an example of how the contents of bundleconfig.json look like in the default template:



[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/dist/css/bootstrap.css",
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

It is not very difficult to understand the JSON available in the bundleconfig.json file. There is a JSON object for each bundle we want to configure and there are some options available related to each bundle e.g. outputFileName, inputFiles etc. The default template has a single bundle configuration for custom JavaScript wwwroot/js/site.js and a single bundle configuration for custom stylesheet wwwroot/css/site.css files.



{
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/dist/css/bootstrap.css",
      "wwwroot/css/site.css"
    ]
}

Some of the common options available are the following:

outputFileName: This is a required option and this specifies the name of the output bundle file. It can contain a relative path from the bundleconfig.json file.

inputFiles: This is an array of files we want to bundle together and it can also contain relative paths from the bundleconfig.json file. This option is not required so if you will not specify any input file, an empty output file will be generated.

minify: This is another optional setting and it specifies whether we want to enable minification or not. The default value is enabled: true.

sourceMap: This option indicates whether a source map for the bundled file should be generated or not. The default value is false.

includeInProject: This option specifies whether to add generated files to the project file. The default value is false. Let’s modify the default template and include both bootstrap and jquery into the generated bundle files. I have also renamed the output file name from site to main.



[
  {
    "outputFileName": "wwwroot/css/main.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/dist/css/bootstrap.css",
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/main.min.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

Bundling and Minification using BuildBundlerMinifier Package

In the previous section, we added the bundleconfig.json file and configure our bundles in this JSON file. If you will build your project in Visual Studio, nothing will happen and no bundles will be generated. This is because you need to install a NuGet package called BuildBundlerMinifier to let Visual Studio and .NET know that they need to build your bundles. You can install this package from the NuGet package manager available within Visual Studio.

Once the package is installed, build your project and you will now see your bundled and minified files generated in the folder specified in bundleconfig.json.

Environment-based Bundling and Minification

I am sure you would like to use the non-bundles and non-minified files in the development environment because they will make your life much easier during debugging. As a best practice, you should use the bundled files only in the production environment. You can specify which file to use in which environment by using Environment Tag Helper. If you want to learn more about Tag Helpers then you can read my post A Developer Guide to ASP.NET Core Tag Helpers.

The Environment Tag Helper only renders its contents when the application is running in specific environments. The following code snippet shows how to use environment tag helper to render non-bundled files in the Development environment and bundled files when the environment is not Development such as Production or Staging. You can add the following environment tag helper in _Layout.cshtml file.



<environment include="Development">
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="~/css/site.css" />
</environment>

<environment exclude="Development">
  <link rel="stylesheet" href="~/css/main.min.css" asp-append-version="true" />
</environment>

We can use same environment tag helper to render our JavaScript files as follows:



<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

<environment exclude="Development">
    <link rel="stylesheet" href="~/js/main.min.js" asp-append-version="true" />
</environment>

If you will build and run your project now, you will see the following CSS and JavaScript files will be included on your website. This is because you are currently in the Development environment.



<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/css/site.css" />
...
...
...
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8"></script>

You can change your environment from Development to Production using the project properties dialog as shown in the following screenshot.

If you will run your project again, you will see the following bundled and minified files are included on your web page.



<link rel="stylesheet" href="/css/main.min.css?v=GEO9YOMPwE4" />

...

...

...

<link rel="stylesheet" href="/js/main.min.js?v=AHmIHyQd" />

Using Bundler & Minifier Visual Studio Extension

If you are using Visual Studio, it is a good idea to automate the bundling and minification process using a Visual Studio extension Bundler & Minifier developed by Mads Kristensen. This extension allows us to select and bundle files without writing a single line of code. You can download and install this extension from Visual Studio Marketplace. You may be asked to close Visual Studio and re-open it during the installation of the extension.

Please note that if you want to use this extension then you don’t need the BuildBundlerMinifier NuGet package anymore. You can uninstall the BuildBundlerMinifier package from your project.

If you will right-click on the bundleconfig.json file, you will see some new “Bundler & Minifier” related options available to you. You can Delete Bundle Output Files, Update Bundles, etc.

Similarly, if you will select and right-click on a single bundled file such as main.min.css, you should see the option to “Re-minify File” or an option to remove the file from bundling.

This extension will also make your bundleconfig.json file recognizable in Task Runner Explorer. This will allow us to run bundling from Task Runner Explorer manually or we can trigger bundling when certain Visual Studio events occur such as Before or After Build.

To execute the bundle from Task Runner Explorer, right-click on “Update all files” option and click “Run” option and you will see the bundled files are generated in your project Solution Explorer.

Summary

In this tutorial, I have given you a basic overview of bundling and minification. I have also shown you some packages, tools, and extensions available for handling bundling and minification in our projects. If you need more than bundling and minification such as linting, image optimization, cache busting, CDN, and so on then you can use task runners such as Gulp, Grunt, or Webpack. I will show you how to Gulp for bundling and minification in my next post.

How to Consume Third-party Web APIs in ASP.NET Core

EzzyLearning.net — Sat, 28 Aug 2021 09:41:27 +0000

In modern web applications, it is very common to call third-party Web APIs to enhance the functionality of the application. There are thousands of free and commercial APIs available and if you know how to consume those APIs in your ASP.NET Core Applications, you can build very powerful business applications. In my previous post A Developer’s Guide for Creating Web APIs with ASP.NET Core 5, I covered ASP.NET Core Web APIs in detail. In this post, I will explain how you can consume third-party Web APIs in ASP.NET Core applications.

Download Source Code

Overview of Third Party API

We will develop an application that will allow the user to input a country code and a year and then we will call a third party API to fetch the list of public holidays of that particular country in that particular year. The third-party API we will consume is called Nager.Date which is a worldwide public holidays API.

It is a very simple API and you can easily test this API in Postman by entering the following URL.

https://date.nager.at/api/v2/PublicHolidays/2020/US

The response of this API is the list of public holidays in JSON format as shown below:

Understanding HttpClient Object

The most common and well knows class that allows us to consume third-party APIs in ASP.NET Core application is HttpClient class. This class gives us the ability to send HTTP requests to third-party APIs and receive HTTP responses returned from those APIs. Every instance of HttpClient maintains its own connection pool that allows it to isolate its requests from requests executed by other instances of HttpClient. This class also acts as a base class for more specific HTTP clients. For example, you can create FacebookHttpClient or TwitterHttpClient as child classes of base HttpClient and can communicate with Facebook and Twitter APIs using these specific HTTP clients.

It is recommended to create one instance of HttpClient and reuse it throughout the application lifetime. This is because instantiating a new instance of HttpClient for every request can easily exhaust the number of sockets available under heavy loads. This is mainly because when the HttpClient object is disposed of the underlying socket is not immediately released. You can read this wonderful blog post You're using HttpClient wrong and it's destabilizing your software to get more information about the problem I just mentioned.

Using HttpClient in ASP.NET Core

As I mentioned above that we will create an application that will allow the user to view the list of public holidays in any country. Let’s create an ASP.NET Core MVC Web Application and create the following interface. This interface has just one method GetHolidays which has two parameters countryCode and year which we will receive from the user shortly.

public interface IHolidaysApiService
{
    Task<List<HolidayModel>> GetHolidays(string countryCode, int year);
}

The GetHolidays method above is returning a list of HolidayModel which is a model class that has the properties mapped with the response of Nag e r.Date API.

public class HolidayModel
{
    public string Name { get; set; }
    public string LocalName { get; set; }
    public DateTime? Date { get; set; }
    public string CountryCode { get; set; }
    public bool Global { get; set; }
}

Next, we need to implement a HolidaysApiService class that will implement the IHolidaysApiService declared above. Note how I have declared a private and static HttpClient variable in the class and how it is defined in the static constructor of the class. It is the recommended way of creating HttpClient instances as mentioned on Microsoft official docs.

public class HolidaysApiService : IHolidaysApiService
{
    private static readonly HttpClient client;

    static HolidaysApiService()
    {
        client = new HttpClient()
        {
            BaseAddress = new Uri("https://date.nager.at")
        };
    }
}

Next we need to define GetHolidays method as shown below:

public async Task<List<HolidayModel>> GetHolidays(string countryCode, int year)
{
    var url = string.Format("/api/v2/PublicHolidays/{0}/{1}", year, countryCode);
    var result = new List<HolidayModel>();
    var response = await client.GetAsync(url);
    if (response.IsSuccessStatusCode)
    {
        var stringResponse = await response.Content.ReadAsStringAsync();

        result = JsonSerializer.Deserialize<List<HolidayModel>>(stringResponse,
            new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });
    }
    else
    {
        throw new HttpRequestException(response.ReasonPhrase);
    }

    return result;
}

A lot is happening in the above method so let me explain it all in detail:

The first line is building the Url of Nager.Date API and using the year and countryCode parameters

var url = string.Format("/api/v2/PublicHolidays/{0}/{1}", year, countryCode);

Next, we are making an API call using the GetAsync method that sends a GET request to the specified Uri as an asynchronous operation. The method returns System.Net.Http.HttpResponseMessage object that represents an HTTP response message including the status code and data.

var response = await client.GetAsync(url);

Next, we are calling ReadAsStringAsync method that serializes the HTTP content to a string

var stringResponse = await response.Content.ReadAsStringAsync();

Finally, we are using JsonSerializer to Deserialize the JSON response string into a List of HolidayModel objects.

result = JsonSerializer.Deserialize<List<HolidayModel>>(stringResponse,
    new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });

That’s all we need to consume a third part Public Holidays API. To use our HolidaysApiService, we need to first register our service in Startup.cs class.

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddSingleton<IHolidaysApiService, HolidaysApiService>();
}

Next, we can inject our HolidaysApiService in our HomeController and call the GetHolidays method by passing the countryCode and year parameter we will receive inside the Index action method.

public class HomeController : Controller
{
    private readonly IHolidaysApiService _holidaysApiService;

    public HomeController(IHolidaysApiService holidaysApiService)
    {
        _holidaysApiService = holidaysApiService;
    } 

    public async Task<IActionResult> Index(string countryCode, int year)
    {
        List<HolidayModel> holidays = new List<HolidayModel>();
        holidays = await _holidaysApiService.GetHolidays(countryCode, year);

        return View(holidays);
    }
}

Finally, we need a Razor View to create a form where the user will input country code and year. The form will be submitted to the above Index action which will then call the GetHolidays method. Here is the code of Index.cshtml Razor view showing an HTML form and a table to display the public holidays.

@model List<HolidayModel>
@{
    ViewData["Title"] = "Home Page";
}
<div>
    <h3 class="display-4">Public Holidays Finder</h3>
    <center>
        <form asp-controller="Home" asp-action="Index">
            <table>
                <tr>
                    <td>Country Code: </td>
                    <td><input type="text" id="txtCountryCode" name="CountryCode" /></td>
                    <td>Year: </td>
                    <td><input type="text" id="txtYear" name="Year" /></td>
                    <td><input type="submit" value="Submit" /></td>
                </tr>
            </table>
            <hr />
        </form>
    </center>
    @if (Model != null && Model.Count > 0)
    {
        <table class="table table-bordered table-striped table-sm">
            <thead>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Local Name</th>
                <th>Country Code</th>
                <th>Global</th>
            </tr>
            </thead>
            <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.Date.Value.ToShortDateString()</td>
                    <td>@Html.DisplayFor(modelItem => item.Name)</td>
                    <td>@Html.DisplayFor(modelItem => item.LocalName)</td>
                    <td>@Html.DisplayFor(modelItem => item.CountryCode)</td>
                    <td>@Html.DisplayFor(modelItem => item.Global)</td>
                </tr>
            }
            </tbody>
        </table>
    }

</div>

It is now time to test our application and see if we will be able to consume the third Party API. Press F5 in Visual Studio and you will see a page similar to the following. You can input a country code e.g. US, DE, etc., and a year e.g. 2021, and click the “Submit” button and if everything goes well you will see our code calling a third-party API, fetching a list of Public Holidays from the API and displaying it on the page.

Managing HttpClient objects with IHttpClientFactory

To make HttpClient instances manageable, and to avoid the socket exhaustion issue mentioned above, .NET Core 2.1 introduced the IHttpClientFactory interface which can be used to configure and create HttpClient instances in an app through Dependency Injection (DI). To make use of IHttpClientFactory, we can register it in Startup.cs file by calling AddHttpClient(IServiceCollection).

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();

    services.AddSingleton<IHolidaysApiService, HolidaysApiService>();

    services.AddHttpClient("PublicHolidaysApi", c => c.BaseAddress = new Uri("https://date.nager.at"));
}

It is possible to register multiple HTTP clients with different names using the AddHttpClient method. The first parameter of the AddHttpClient method is the name of the client and the second parameter is the Lamba expression that will configure the HttpClient. In the above example, I am setting the BaseAddress property with the Url of the third-party API I want to call using this particular HTTP client.

Once the HTTP Client is registered, we can inject IHttpClientFactory in our controllers and services and call its CreateClient method to create a specific HTTP Client object we want to use in our code. The CreateClient method needs the name of the HTTP Client you want to create as shown below:

public class HolidaysApiService : IHolidaysApiService
{
    private readonly HttpClient client;

    public HolidaysApiService(IHttpClientFactory clientFactory)
    {
        client = clientFactory.CreateClient("PublicHolidaysApi");
    }

    public async Task<List<HolidayModel>> GetHolidays(string countryCode, int year)
    {
        var url = string.Format("/api/v2/PublicHolidays/{0}/{1}", year, countryCode);
        var result = new List<HolidayModel>();
        var response = await client.GetAsync(url);
        if (response.IsSuccessStatusCode)
        {
            var stringResponse = await response.Content.ReadAsStringAsync();

            result = JsonSerializer.Deserialize<List<HolidayModel>>(stringResponse,
                new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });
        }
        else
        {
            throw new HttpRequestException(response.ReasonPhrase);
        }

        return result;
    }
}

Summary

In this article, I have given you an overview of HttpClient and also gave you examples of creating HttpClient objects directly or using IHttpClientFactory. I also showed you an example of invoking a third part Web API using HttpClient. I hope you are now familiar with the HttpClient object and its usage and will start using it in your projects with confidence.

7 Best News Websites Developers Should Follow in 2021

EzzyLearning.net — Sat, 28 Aug 2021 08:51:27 +0000

The tech industry is changing very rapidly and it is important for programmers and developers to stay up to date on the latest technologies, frameworks and advancements. It is important to know where the industry is going, what is trending and what is become obsolete, what will be popular in future and what are the latest tools and trends others are adopting to become more productive. While this all seem like a daunting task especially if you don’t know where to start and where to look for this all this interesting information. It is also important to know that we have access to best and most reliable information sources. I have decided to share a list of some of the best news websites for programmers and developers. I regularly visit these websites and believe me I always learn something new and interesting every time I visit these websites.

DEV

https://dev.to/

DEV is a community of amazing software developers where coders share, stay up-to-date and grow their careers. The software industry relies on collaboration and sharing of information and DEV is the place where developers get together and contribute for the overall growth of the industry. The website is very well organized and you can browse news feed by time period e.g. Week, Month etc. or you can also find news by tags e.g. #javascript, #python etc. There are also separate sections for Podcasts and Videos which are always favorite type of content for developers.

Lobsters

https://lobste.rs/

Lobsters is a computing-focused community centered around link aggregation and discussion. They have a tagging system to categorize and filter stories by tags e.g. Programming, JavaScript etc. The stories and comments can be ranked by users which is very useful to find the top ranked stories in different areas. They also have a concept of user tree which shows who is invited by whom. Other useful features are mailing list mode, integrated search engine and story merging and flag explanations.

Hashnode

https://hashnode.com/

Hashnode is a global dev community with the mission of connecting world’s developers and help them share their knowledge. Many developers around the world have their blogs on Hashnode platform and you can easily find fresh content on any topic you are interested in. You can also follow the tag you are interested in and filter the blogs and posts by those tags. You can also explore the blogs with most followers which will give you access to top notch developer content.

Hacker Noon

https://www.hackernoon.com/

Hacker Noon is an American technology publishing website. It focuses on reporting the latest news related to software development, startups, artificial intelligence, and cryptocurrencies. It is considered as a heaven for programmers because of wide range of tutorials, videos and latest programming news posted by 15K+ active contributing writers and read by 3M+ monthly readers.

XDA Developers

https://www.xda-developers.com/

XDA Developers was founded by developers, for developers. It is a mobile software development community launched on 20 December 2002. Although discussion primarily revolves around Android, members also talk about many other operating systems and mobile development topics. XDA Developers also hosts the XDA Portal, a source for Android and mobile phone development news, as well as XDA Labs, an Android app and repository that acts as a third-party application provider.

Product Hunt

https://www.producthunt.com/

Product Hunt is an American website to share and discover new products founded by Ryan Hoover in November 2013. Product Hunt surfaces the best new products, every day. It's a place for product-loving enthusiasts to share and geek out about the latest mobile apps, websites, hardware projects, and tech creations.

TechCrunch

https://techcrunch.com/

TechCrunch is an American online technology news and analysis website focusing on high tech and startup companies. TechCrunch is also best known for its Disrupt conferences, an annual technology event hosted in several cities across United States, Europe, and China. Other than the news about tech startups, they have a videos section that lists the videos about latest apps and gadgets. If you love podcasts then you will enjoy their podcasts Equity, MixTape and Original Content.

A Developer’s Guide for Creating Web APIs with ASP.NET Core 5

EzzyLearning.net — Wed, 25 Aug 2021 18:47:14 +0000

The Web APIs (aka RESTful Services) are the type of applications that don’t return views in response, instead, they usually consume and return data in a machine-readable format such as XML or JSON. This concept is not new and the main goal of building Web APIs is to serve data to multiple client apps in a centralized way. As the number of the connected apps increase, the usage of the Web APIs can also grow significantly so it is very important to keep in mind the maintainability and scalability in mind. ASP.NET Core provides some powerful features to write Web APIs that comply with the REST standards. This tutorial will serve as a useful guide on how to build and consume Web APIs using the latest version of ASP.NET Core 5.

Download Source Code

Introducing ASP.NET Core Web API

An ASP.NET Core Web API consists of one or more controller classes that derive from ControllerBase. The ControllerBase class provides many properties and methods that are useful for handling HTTP requests You can also derive your class from a Controller class which derives from ControllerBase but that is only recommended if you want to create the same controller for Web APIs and Views.

Here are some common methods that ControllerBase provides.

Method	Notes
BadRequest	Returns 400 status code.
NotFound	Returns 404 status code.
PhysicalFile	Returns a file.
TryUpdateModelAsync	Invokes model binding.
TryValidateModel	Invokes model validation.

The Microsoft.AspNetCore.Mvc namespace provides some attributes that can be used to configure the behavior of web API controllers and action methods. The following example uses attributes to specify the supported HTTP action verb and any known HTTP status codes that could be returned:

[HttpPost] 
[ProducesResponseType(StatusCodes.Status201Created)]
[ProducesResponseType(StatusCodes.Status400BadRequest)]
public ActionResult<Book> Create(Book book)
{
    ...
}

Here are some common attributes available.

Attribute	Notes
[Route]	Specifies URL pattern for a controller or action.
[Bind]	Specifies prefix and properties to include for model binding.
[HttpGet]	Identifies an action that supports the HTTP GET action verb.
[Consumes]	Specifies data types that an action accepts.
[Produces]	Specifies data types that an action returns.

One of the important attributes is [ApiController] that can be applied to a controller class to enable some special features such as Attribute Routing, Automatic HTTP 400 response, etc. These additional features and behavior improve the developer experience for building APIs.

Creating ASP.NET Core 5 Web API Project

If you are using Visual Studio 2019, then from the File menu, select New > Project. Select the ASP.NET Core Web Application template and click Next. Give your project a name and click Create.

In the Create a new ASP.NET Core Web Application dialog, confirm that .NET Core and ASP.NET Core 5.0 are selected. Select the ASP.NET Core Web API template and click Create.

The project template will create a default weather forecast API for you. Press Ctrl+F5 to run without the debugger. You will see the following URL in the browser address bar

https://localhost:/WeatherForecast

and that JSON similar to the following will return from the API:

[
   {
      "date":"2020-12-26T16:57:09.1646732+05:00",
      "temperatureC":20,
      "temperatureF":67,
      "summary":"Cool"
   },
   {
      "date":"2020-12-27T16:57:09.1669352+05:00",
      "temperatureC":51,
      "temperatureF":123,
      "summary":"Hot"
   },
   {
      "date":"2020-12-28T16:57:09.1669397+05:00",
      "temperatureC":29,
      "temperatureF":84,
      "summary":"Hot"
   }
]

The default Web API project template has created the following WeatherForecast model class that has some basic weather related properties.

public class WeatherForecast
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    public string Summary { get; set; }
}

The project template will also create a default WeatherForecastController class that is derived from the ControllerBase class. The class is also decorated with [Route] and [ApiController] attributes mentioned above.

[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{

}

Another important thing to notice is that the ConfigureServices method of Startup.cs class is calling AddControllers method and not AddMvc method. This is because if you are not using MVC related features in your Web APIs and you want to keep your Web APIs lightweight with minimum required features then you don’t need to register additional MVC related features.

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
}

Another important piece of code in Startup.cs is where a feature called endpoint routing is configured using the following statements. This allows us to define endpoint routes using the [Route] attribute on top of Web API controllers and actions. We have already seen an example above where [Route("[controller]")] attribute is set on WeatherForecastController class.

app.UseEndpoints(endpoints =>
{
   endpoints.MapControllers();
});

The final noticeable thing in the project is the settings configured in Properties\launchSettings.json file which specifies different launch profiles and launchUrl etc.

"IIS Express": {
    "commandName": "IISExpress",
    "launchBrowser": true,
    "launchUrl": "weatherforecast",
    "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
    }
}

Implement CRUD Operations using ASP.NET Core Web API

Now you have the basic knowledge of Web APIs and you have also seen the default Web API created by you using the Visual Studio Web API project template. It is now time to implement our Web APIs and learn Web APIs in more detail. For this tutorial, I have decided to write a fictional web API for a library management system. We will create a RESTful service that allows client applications to manage the library books catalog. The API needs to expose endpoints to create, read, edit, and delete books.

API	Description	Request body	Response body
GET /api/books	Get all books	None	Array of books
GET /api/books/{id}	Get a book by Id	None	Book
POST /api/books	Add a new book	Book	Book
PUT /api/books/{id}	Update an existing book	Book	None
DELETE /api/books/{id}	Delete a book	None	None

The first thing we need is the Book model class. A model class is a class that represents the data associated with an entity e.g. Book. Create a Models folder in the project and add the following class in the Models folder.

public class Book
{
    public int Id { get; set; }
    public string Title { get; set; }
    public int YearPublished { get; set; }
}

The Id property functions as the unique key in a relational database. A book model in a real library system can have dozens of other properties but to keep the example simple, I won’t add any other functionality in the Book class.

Creating Database Context

To handle database operations, we need the Entity Framework data context class. This class represents a session with the database and can be used to query and save instances of your entities e.g. Book. This class is created by deriving from Microsoft.EntityFrameworkCore.DbContext class. Creating a real SQL Server database and managing our books inside the real database is also out of the scope for this tutorial so I have decided to use Microsoft.EntityFrameworkCore.InMemory data provider. This database provider allows Entity Framework Core to be used with an in-memory database. The in-memory database is useful when you want to test some basic database operations without the need of creating a real database. You can download and install both of these packages using the NuGet package manager.

If you don’t know how to use NuGet package manager to install third-party libraries and packages then I will recommend you to read my post Working with Packages and Libraries in ASP.NET Core

Once you have the above packages installed, create the following LibraryContext data context class in your project.

public class LibraryContext : DbContext
{
    public LibraryContext(DbContextOptions<LibraryContext> options)
        : base(options)
    {
    }

    public DbSet<Book> Books { get; set; }
}

Next, we need to register our database context object with the dependency injection container. This will allow us to inject and use our library context in controllers and services. Notice we also specified below that we want to use an in-memory database provider with the database name “LibraryDb”. This in-memory database will be used to store our books entities later in this tutorial.

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<LibraryContext>(opt => opt.UseInMemoryDatabase("LibraryDb"));

    services.AddControllers();
}

If you want to learn more about dependency injection then you can read my post A Step by Step Guide to ASP.NET Core Dependency Injection

Scaffolding Web API Controller in Visual Studio

You can either create Web API controllers manually and implement all those CRUD operations related actions manually or you can take advantage of Visual Studio built-in scaffolding feature and save some time. To create our BookController, right click on the “Controllers” folder and choose the Add > Controller… option. You will see the following dialog in which you need to select “API” from the left-hand side pane. Next select the “API Controller with actions, using Entity Framework” option and click the “Add” button.

The following dialog will appear where you can provide the name of your controller along with the Model and Data context classes. Click the “Add” button when you have provided all details as shown below:

A standard API controller will be generated for you along with all the actions. Notice that the class is marked with the [ApiController] attribute mentioned above and a LibraryContext object is also injected in the constructor of the controller.

[Route("api/[controller]")]
[ApiController]
public class BooksController : ControllerBase
{
    private readonly LibraryContext _context;

    public BooksController(LibraryContext context)
    {
        _context = context;
    }
}

To save us some typing, the following actions are also generated automatically for you.

Understanding Web API Action Methods

The first action method we will explore is the PostBook action method. This method will be used to add new books to our in-memory database. The [HttpPost] attribute indicates that this action will be called using the HTTP POST method. The method has a parameter e.g. Book that will be passed to this action from the body of the HTTP request.

The first statement will add the book object in the Books collection available in our data context and the second statement will persist our changes to the database. The last statement is calling the CreatedAtAction method that will automatically return HTTP 201 status code and will also add a Location header to the response. This Location header specifies the URI of the newly created book.

// POST: api/Books
[HttpPost]
public async Task<ActionResult<Book>> PostBook(Book book)
{
    _context.Books.Add(book);
    await _context.SaveChangesAsync();

    return CreatedAtAction("GetBook", new { id = book.Id }, book);
}

We can use tools like Postman or Insomnia to test our APIs quickly without implementing a client application. You can download and install Postman from their website. Once it's installed, create a new HTTP POST request and set the URI to our API URL. In the Body tab, select the raw radio button and choose type as JSON. Finally, add the following JSON in the request body and click the Send button.

{
  "title":"ASP.NET Web APIs Developer Guide",
  "yearPublished":2020
}

Postman will call our PostBook API mentioned above which will create a new book and finally will send 201 Created status code along with the newly created book as shown in the screenshot below:

If you will click the Headers tab in Postman, you will notice the Location header is showing the URI to access the newly created book.

You can copy-paste this URL in the browser address bar to view the newly created book.

The above URL is calling the following GetBook action that simply searches the book in our in-memory database and return the book.

// GET: api/Books/5
[HttpGet("{id}")]
public async Task<ActionResult<Book>> GetBook(int id)
{
    var book = await _context.Books.FindAsync(id);

    if (book == null)
    {
        return NotFound();
    }

    return book;
}

At this time, you can also test GetBooks action in the browser that will return an array of all the books object available in our in-memory database.

// GET: api/Books
[HttpGet]
public async Task<ActionResult<IEnumerable<Book>>> GetBooks()
{
    return await _context.Books.ToListAsync();
}

The next method is the PutBook method which can be used to update book entities. It uses the HTTP PUT method and the id of the entity we want to update will be provided as a parameter in the URI. The second parameter is the book entity that contains the updated data. The method will return 400 Bad Request if the specified id is not the same as the id property of the book entity we passed as the parameter. The response of the method will be 204 No Content.

// PUT: api/Books/5
[HttpPut("{id}")]
public async Task<IActionResult> PutBook(int id, Book book)
{
    if (id != book.Id)
    {
        return BadRequest();
    }

    _context.Entry(book).State = EntityState.Modified;

    try
    {
        await _context.SaveChangesAsync();
    }
    catch (DbUpdateConcurrencyException)
    {
        if (!BookExists(id))
        {
            return NotFound();
        }
        else
        {
            throw;
        }
    }

    return NoContent();
}

We are using the in-memory database in this tutorial, so each time the application will start the new database will be initialized. We need to make sure that there is a book entity available in the database before we test the above PutBook action method. The following screen shows the PUT request we made with an updated entity JSON in the body of the request.

Finally, we have the DeleteBook action method that accepts requests with the HTTP DELETE method and simply deletes the entity from the in-memory database.

// DELETE: api/Books/5
[HttpDelete("{id}")]
public async Task<IActionResult> DeleteBook(int id)
{
    var book = await _context.Books.FindAsync(id);
    if (book == null)
    {
        return NotFound();
    }

    _context.Books.Remove(book);
    await _context.SaveChangesAsync();

    return NoContent();
}

The following screenshot shows how to test the DeleteBook action method in Postman.

Summary

ASP.NET Core is a great framework to use when you are planning to build clean, scalable, and maintainable Web APIs. It has lots of useful APIs and features related to Web APIs and we can write a whole book on just Web APIs. This tutorial is a basic guide for developers who want to get started with ASP.NET Core Web APIs. I hope you enjoyed this tutorial and I will appreciate it if you can leave your feedback below to let me know how can I improve my tutorials further.

Working with Packages and Libraries in ASP.NET Core

EzzyLearning.net — Wed, 25 Aug 2021 18:46:48 +0000

If you want to develop a modern web application, you will realize very quickly that you can’t write everything on your own. You will rely on some third party client and server side libraries and components to increase your development speed. There are many online code repositories and sources available to developers these days and downloading and keeping track of all third-party packages can be a painful task. Luckily developers now have many different tools and extensions available to them which can make this task a lot easier. In this tutorial, I will demonstrate how we can use tools like Node Package Manager (npm), Library Manager (LibMan), and Nuget to download and manage server and client-side libraries in ASP.NET Core projects.

Download Source Code

Introduction to Node Package Manager (npm)

npm is one of the world’s largest repository of client-side libraries and packages from where developers can download and install different open source libraries published and shared by other developers. Npm is a subsidiary of Github and is considered a default package manager for JavaScript runtime environment Node.js. They also provide a command line tool (CLI) to developers for publishing and downloading third party libraries. In the past, the npm was used to be the package manager for just Node.js but now it is used by developers of other platforms and technologies as well.

Using npm from Command Line (CLI)

To use npm tool you need to make sure that you have downloaded and installed the Node.js on your machine. If you are using Windows, you can download the windows installer from Node.js. website. Once you have the npm command line tool (CLI) available on your machine, you can go to your project folder and can use different npm commands to download and install packages.

As a general rule, all projects using Node.js need to create a file called package.json that contains the project information e.g. name, author, version as well as the information about the third party libraries you are downloading and managing in your project. You can either create this file yourself using a text editor or you can use one of the npm commands (init) to generate this file automatically. Npm init command is a step by step tool to generate your package.json file. You can initialize the project using npm init command.

npm init

Open the command prompt in your project root folder and type the above command and press Enter.

You will be asked to provide your project name, version, description, author, etc. If you don’t want to provide this information at this point, you can simply press Enter multiple times until you reach the last step where the tool will show you the sample package.json file and will ask you to confirm if the file looks ok to you. You can press enter one more time and a package.json file will be generated for you.

Next, you can use the following command to download and install packages from npm online directory.

npm install <module>

In above command, the module is the name of the module you want to download. For example, if you want to install Express (which is a well known Node.js web framework), you can run the following command:

npm install express

The above command will install the express module into /node_modules in the current directory. Please note that whenever you will install a module from npm, it will be installed into the node_modules folder.

If you will open package.json file now, you will see that metadata information about the express package is also recorded in the package.json file.

{
  "name": "packageslibrariesdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

To see the full list of npm command you can visit npm docs here

Using npm from Visual Studio

If you are not a fan of using command line interface (CLI) then you can use npm directly within Visual Studio. To use npm in Visual Studio you need to create npm configuration file using a built-in Visual Studio template. Right click on your project in Visual Studio solution explorer and add a new file by choosing npm configuration file template shown below:

Visual Studio will automatically create a package.json file for you. Now you can specify which third party client side library you want to download and use in your project. You will also get some help from the built in IntelliSense which is very useful if you want to specify a specific version of the library.

I am installing bootstrap 4.5.3 and as soon as you will save the file, you will see that the bootstrap package is downloaded in the node_modules folder and a dependency is also added under Dependencies node.

Note: If you are not seeing the node_modules folder then make sure “Show All Files” option is on in Visual Studio Solution Explorer.

To uninstall the library, you just need to remove the “bootstrap”:”4.5.3” line from your package.json file and as soon as you will save the file, bootstrap will be removed from your project.

What is Library Manager (LibMan)

If you don’t want to use npm in your project, then Microsoft has another tool for you called Library manager (LibMan). LibMan is a lightweight tool for downloading libraries and packages from the files system or content delivery networks (CDN). Currently the tool support CDNs such as CDNJS, jsDelivr, unpkg. Just like npm, this tool can also be used from the command line or from within Visual Studio.

To download LibMan tool CLI, you can type the following command in Windows PowerShell.

dotnet tool install –g Microsoft.Web.LibraryManager.Cli

Using LibMan from Command Line (CLI)

Once the tool is installed you can use ‘install’ option to download packages. You can either specify the package name and the tool will download all files within that package or you can specify the files you need. For example, you can download only bootstrap.css file available in the bootstrap 4.5.3 package as follows:

libman install bootstrap@4.5.3 --files dist/css/bootstrap.css

To see the full list of available command you can visit LibMan docs here.

Using LibMan from Visual Studio

I am sure, some of you don’t like CLIs so you can use the LibMan tool inside Visual Studio as well. Right click on your project in Solution Explorer and choose Add > Client Side Library…

Once the tool dialog is open, you can choose which Provide you want to use from the available CDNs. You can then search client side libraries and frameworks available in the selected provider online directory. For example, if you will start typing bootstrap, you will see that the tool is searching and populating the list of all libraries with your matching keyword.

You can even choose the specific version of the library or framework you are interested in as shown below:

Once you will select the version you need, the tool will also give you the option to download all or specific files, and finally, you can specify the location where you want to download the packages and libraries in your project. In ASP.NET Core projects, wwwroot folder is normally used to save client side CSS and JavaScript libraries so you can keep the default location and press the Install button.

Once the package is installed, you will see that the selected files are downloaded and saved inside wwwroot folder. Secondly, you will also see a new file libman.json is added in your project. This file is similar to package.json file we saw above. It will be used to keep track of all third party libraries and packages you are downloading in your project using the LibMan tool.

What is NuGet?

While npm is a package manager for client side libraries and frameworks, NuGet is a package manager to create, share, and consume server side code and libraries in the .NET world. Developers can

Bundle their code (DLLs) and related resources into packages (.nupkg files)
Publish their NuGet packages to a private host (exclusive to an organization) or a public repository of packages such as nuget.org
Search, download, and consume packages hosted by other developers

Using NuGet from PowerShell Command Line (CLI)

You can download NuGet packages in your project using the dotnet tool ‘add package’ command. For example, if you want to download a famous Newtonsoft.Json library, you can use the following command in the command window.

dotnet add package Newtonsoft.Json

Once the package is downloaded, you will notice that it is added as a dependency under a “Packages” node in Solution Explorer. If you will open the project file, you will also notice that its reference is also added as the PackageReference element.

If you want to delete the Newtonsoft package from your project, you simply need to remove the PackageReference element from your project file and build your project.

Using NuGet from Package Manager Console (CLI)

If you don’t want to use the PowerShell command window mentioned above and want to stay within Visual Studio then you can find and download NuGet packages from the NuGet Package Manager Console available in Visual Studio. This console allows you to find, install, uninstall, or update NuGet packages using CLI commands. Please note that this console is built into Visual Studio on Windows. It is not included with Visual Studio for Mac or Visual Studio Code. You can open this console using the Tools > NuGet Package Manager > Package Manager Console command in Visual Studio. Once the console is open, you can find packages with the Find-Package command as shown below.

Find-Package elmah

You will be able to see all packages with the word ‘elmah’ in the console window.

To install a specific package in your project, you can use the ‘Install-Package’ command with the package name you want to download.

Install-Package elmah

Make sure when you are using the above command, the ‘nuget.exe’ is selected as a Package source and your project is showing in the Default project dropdown.

To check the full list of NuGet commands, you can visit Nuget PowerShell Commands page in Microsoft official docs.

Using NuGet Package Manager UI in Visual Studio

If you don’t want to remember or learn NuGet command, then you can use the Nuget Package Manager UI available in Visual Studio on Windows. The UI interface allows you to easily search, install, uninstall, and update NuGet packages in either one project or all the projects of the solutions with ease. To open the NuGet Package Manager UI, simply Right click on your project in Solution Explorer and choose “Manage NuGet Packages…” option.

By default, the NuGet UI will display the list of most popular NuGet packages but you can search for the package you need by typing the package name in the search box. You can also select the Package source to tell the UI from where you want to download and install the packages. Once you have the package in the list, selecting the package will display its description, available versions, and dependencies on the right hand side. You can choose the version you need and click the “Install” button to start the installation process.

To learn more about the Package Manager UI you can visit the official docs here.

Summary

There are millions of third party packages available for client and server side development and I hope this tutorial has given ASP.NET Core developers an overview of the different tools and extensions you can use to search and install the third party package and library you love. Please share your feedback about this tutorial and my blog in general in the comments section.