Real-Time ASP.NET Core 3 Apps with SignalR Succinctly^®
by Dirk Strauss

CHAPTER 11

Creating the Chart Client Application

In the realtimechart project, expand the Pages folder and edit the Index.cshtml file.

Index Page for Realtime Chart

Figure 35: Index Page for Realtime Chart

You will see the following default HTML code, as shown in Code Listing 25.

Code Listing 25

@page

@model IndexModel

ViewData["Title"] = "Home page";

}

<h1 class="display-4">Welcome</h1>

<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

</div>

Replace the code in the Index.cshtml file with the code in Code Listing 26.

Code Listing 26

@page

<form>

<label for="messageInput">Value</label>

</div>

</div>

</form>

<hr />

</div>

</div>

@section Scripts

{

}

The code in Code Listing 26 simply adds a text box and a Submit button to your page. There is also a div called chartArea that will display all the chart values received from the SignalR hub and plot them on the chart.

At the bottom of the code, you will see script references to signalr.js and charting.js. I have added these to a Scripts section. We have not added the charting.js file to our project yet. We will do this in a minute. First, I want to add the required references to Chartist to generate the line chart on our page.

Note: You can read more about Chartist here.

Expand the Pages folder in your solution, and then expand the Shared folder.

Edit the _Layout Page

Figure 36: Edit the _Layout Page

Inside the Shared folder, you will see the _Layout.cshtml page.

Tip: For all the ASP.NET Web Pages devs out there, think of this as a Master Page.

In the <head> section of the _Layout.cshtml page, add a reference to the chartist.min.css file served from the CDNJS (content delivery network – JavaScript) on GitHub, as seen in Code Listing 27.

Code Listing 27

At the bottom of the _Layout.cshtml page, add a reference to the chartist.min.js file served from the CDNJS in GitHub, as seen in Code Listing 28.

Code Listing 28

You can find the js and css files here. The complete _Layout.cshtml page will look like Code Listing 29.

Code Listing 29

<!DOCTYPE html>

<head>

<title>@ViewData["Title"] - realtimechart</title>

</head>

<body>

<a class="navbar-brand" asp-area="" asp-page="/Index">realtimechart</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"

aria-expanded="false" aria-label="Toggle navigation">

</button>

</li>

<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>

</li>

</ul>

</div>

</nav>

</header>

@RenderBody()

</main>

</div>

</div>

</footer>

@RenderSection("Scripts", required: false)

</body>

</html>

You will notice the @RenderSection("Scripts", required: false) at the bottom of this page. It is from here that the Scripts section mentioned in Code Listing 26 is called.

We are now ready to add our charting.js file to the project. To do this, right-click your js folder (located in wwwroot) and add a new JavaScript file, as illustrated in Figure 37.

Adding a New .js File

Figure 37:Adding a New .js File

Call the file charting.js and click Add. Your solution should now look as illustrated in Figure 38.

Added charting.js File to Project

Figure 38: Added charting.js File to Project

After adding your charting.js file, you should see the blank code editor. Add the following JavaScript code to your charting.js file.

Code Listing 30

"use strict";

var lineChart = new Chartist.Line('#chartArea', {

labels: [],

series: [[]]

{

low: 0,

showArea: true

});

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

//Disable send button until connection is established.

document.getElementById("sendButton").disabled = true;

connection.on("ValueReceiver", function (chartValue) {

if (chartValue && !isNaN(chartValue)) {

lineChart.data.series[0].push(chartValue);

lineChart.update();

document.getElementById("valueInput").value = "";

document.getElementById("valueInput").focus();

}

});

connection.start().then(function () {

document.getElementById("sendButton").disabled = false;

}).catch(function (err) {

return console.error(err.toString());

});

document.getElementById("sendButton").addEventListener("click", function (event) {

var strValue = document.getElementById("valueInput").value;

var chartValue = parseFloat(strValue);

connection.invoke("ValueSender", chartValue).catch(function (err) {

return console.error(err.toString());

});

event.preventDefault();

});

$('#valueInput').keypress(function (e) {

var key = e.which;

if (key === 13) // the enter key code.

{

$('#sendButton').click();

return false;

}

});

You will notice that I have not added any validation of inputs in this JavaScript code. If you want to validate the user input, I suggest doing it in the charting.js file.

Let’s have a look at some of the portions of this JavaScript code next.

Build modern ASP.NET Core apps

using Syncfusion® ASP.NET Core control suite.

80+ high-performance ASP.NET Core controls, including DataGrid, Charts, and Scheduler.
Lightweight and responsive.
Modular and touch-friendly.
Built-in themes.

Get Your Free Trial Now

Creating the Chart Client Application

DISCLAIMER: Web reader is currently in beta. Please report any issues through our support system. PDF and Kindle format files are also available for download.