It’s probably too obvious to mention, but: When your user is working with a Graphical User Interface (like, for example, a webpage) you’re mandated to get everything the user needs on the screen.

If you have a grid that has more rows than will fit on the screen, that mandate boils down to getting “the row the user wants” onto the screen, ideally without forcing the user to scroll-and-scan to find it.

In many of the Progress Kendo UI Grids, the scrollToItem method lets you get the row you or the user wants onto the screen, just by asking for the object the user wants. Using scrollToItem, you can pull a row that’s part of the grid’s page but not currently visible onto the screen, pull a row already on the screen to the top of the grid, or (in many cases) even pull rows not in the grid’s current page onto the screen. Your users, rather than having to scroll to find the item they want, can jump straight to it or you can put a row you know your user needs to see onto the screen.

The scrollToItem method is available in the KendoGrid for Angular, ASP.NET MVC and jQuery.

While the React Data Grid and the Blazor Grid don’t have scrollToItem, you can get some of the same behavior by accessing a row’s underlying HTML <tr> element and using the DOM’s scrollIntoView method … but the Kendo scrollToItem method is simpler to use and, even better, ties into your data model rather than the page’s HTML. The only real limitation on scrollToItem is that it doesn’t work with grouped paging.

Configuring the Project

To demonstrate using scrollToItem, I used the KendoGrid for ASP.NET MVC in an ASP.NET Core 8 Razor Page project. My first step was to add the Telerik.UI.for.AspNet.Core and Microsoft.AspNetCore.Mvc.NewtonSoft.Json NuGet packages to my project. After that, in the project’s Program.cs file, I added these statements before the builder.Build() statement:

builder.Services.AddKendo();
builder.Services.AddMvc().AddNewtonsoftJson(options =>
   options.SerializerSettings.ContractResolver =
    new DefaultContractResolver());

I generated a List of Product objects for my grid to display in an action method in an action method I called Get in a controller I called ProductsManager. To support retrieving data from my grid through that action method, I also added this statement after the Program.cs file’s builder.Build() statement:

app.MapControllers();

To complete configuring the project, I added these <link> and <script> tags to my project’s _Layout.cshtml file:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/ScrollItem.styles.css" asp-append-version="true" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.0.1/bootstrap/bootstrap-main.css" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2025.3.1002/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2025.3.1002/js/kendo.aspnetmvc.min.js"></script>

Configuring the Grid

For my case study, I set up a grid with a very short window:

<kendo-grid name="productGrid" height="250">

</kendo-grid>

Inside that kendo-grid element, I nested a datasource element that would retrieve 20 rows into that short space, so that I’ll have lots of rows in the grid’s page that weren’t “on the screen” to play with. Inside the datasource element, I put a schema element, with a model element inside it.

That model element is key to having the scrollToItem method work: Users can ask for a row in the grid to be displayed by using the property specified in the model element’s id attribute. The property you use here must be unique for each row on the page so, nine times out of ten, the property you pick is going to be the property on your object’s that holds the corresponding table’s primary key.

In my case, for the Product object I’m displaying in each row of my grid, I used the object’s ProductID property:

<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
  <schema>
    <model id="ProductID">
    </model>
  </schema>

The scrollToItem method works as long as scrolling is enabled for the grid, in either of the grid’s virtual or endless scrolling modes.

That means that you don’t need to include a scrollable element in your grid’s definition (the defaults are fine), but, if you do include the element:

• If the enabled attribute is present, it must be set to true
• If either of the virtual or endless attributes are present, at lest one of them must be set to true

Inside the datasource element, you’ll also need a transport element to specify where your data is coming from. (I used the Url object’s Action method to call my Get action method in my ProductsManager controller.):

  </schema>
  <transport>
    <read url='@Url.Action("Get", "ProductsManager")'  />
  </transport>
</datasource>

Following the datasource element, you define the columns you want displayed in the grid (and you don’t need to include the column that you’ll use to pull the right row onto the screen):

<columns>
  <column field="ProductName" title="Name" />
  <column field="Category" title="Category" />
  <column field="Price" title="Price" />
</columns>

Using scrollToItem

With all of that in place, you can write some JavaScript code to pull a row onto the screen. For this case study, I added a textbox to allow the user to enter the ProductID of the item they wanted to pull onto the screen. In the textbox’s onblur event I called a function I named MoveToItem, passing a reference to the textbox to that function:

<br/>
<input onblur="MoveToItem(this)" />
<br />

To support calling the grid’s scrollToItem method, I need a reference to the grid. In any real application, I’ll probably need that reference multiple times so, rather than keep retrieving that reference, I declared a global variable to hold the reference and loaded that variable from a jQuery onready function:

<script>
    let grid;
    $(() => {
        grid = $("#productGrid").kendoGrid();
    });

Below that function, I added my MoveToItem function. In that function, I called the grid’s scrollToItem method, passing the method the value property of the textbox I passed to the function (after checking that the textbox has something in it value property, of course):

const MoveToItem = (txt) => 
{
    if (txt.value)
    {
        grid.scrollToItem(txt.value);
    }
};

When that command executes, the row with the matching ProductID becomes the top row in the grid (assuming there are enough rows to fill the rest of the grid—if there aren’t enough rows, the grid will display the last rows in the grid, including the row with the matching ProductID).

Fetching New Data

That is, as long as the user passes a valid ProductID or that ProductID is on the current page. What do you do when that isn’t true?

The best solution for ensuring only valid ProductIDs are passed to your function is, of course, to have the user select a ProductID from a dropdown list rather than entering whatever they want into a textbox. A dropdown list would also let the user select a product name from the dropdown list but allow you to pass a ProductID to your function.

A typical dropdown list would look like this:

<select onchange="MoveToItem(this)">
  <option value="top">Select a product</option>
  <option value="A1">Chai Tea</option>
 ...

And the JavaScript function to work with it would look like this:

const MoveToItem = (sel) => {
  alert(sel.value);
  grid.scrollToItem(sel.value);
}

But what if, for some reason, a dropdown list isn’t an option or the user’s entry is valid but the object isn’t in the grid’s current page? Provided you have virtual scrolling enabled, you can handle both of those scenarios by passing a callback function as the second parameter to the scrollToItem method.

The callback function is only called if scrollToItem can’t scroll to the item specified in its first parameter. So, for the “invalid choice” scenario, you can use that callback function to provide an error message. Basic code would look like this:

const MoveToItem = (txt) => 
{
  if (txt.value)
  {
    grid.scrollToItem(txt.value, 
    function () { 
        if (<…check for invalid value…>) 
        {
          alert("Invalid ProductID: " + txt.value);
        }
      }
    );
  }
}

However, that callback function is also passed an object that you can use to pull a row not in the current grid page onto the screen … provided you know the row’s position in your virtual list. All you need to do (after you determine the row’s position in your virtual list) is pass the row’s position to the object’s success method.

This sample code doesn’t attempt to find the right object that but just pulls the first row back onto the screen when the requested object isn’t found on the current page:

const MoveToItem = (e) => 
{
  if (e.value)
  {
    grid.scrollToItem(txt.value, 
      function (o) { 
        if (<…check for invalid value…>) 
      {
        alert("Invalid ProductID: " + txt.value);
      }
      else
      {
        o.success(1);
      }
    }
  }
}

In a GUI, your first goal is to provide your user whatever they need right in front of them. The scrollToItem method is the tool that enables you to do that while letting the user jump straight to the row they want.

Explore all the grids Progress provides with a free 30-day trial of the Progress Telerik DevCraft bundle:

Try Telerik DevCraft

When it comes to creating a responsive UI that does the right thing on all the various devices your users interact with, you need controls that will “do the right thing” out of the box. And, of the various controls in your UI, it’s the UI components that take up more space that you’re most concerned with. The Telerik UI for ASP.NET MVC Chart, for example, because the whole point of having a chart is to display information with clarity.

I’ve got two solutions here: one that I think you should do all the time and a more sophisticated solution for a more interactive UI.

Keeping the Size Right

The good news here is that, by default, the ASP.NET MVC Chart (a server-side wrapper for the kendo-chart widget) will resize itself to display in the space available to it on your user’s screen. However, the chart doesn’t adjust its size or position as screen size or orientation changes.

Essentially this means that you’ll get the “right” size when your chart initially displays, but if, for example, the user switches from portrait to landscape, the chart won’t update its display.

There’s a simple solution for addressing this. If you have a chart that begins with this:

<kendo-chart name="MyChart">
  …more…

Then just add this code to your page, substituting in whatever is in your chart’s name attribute where I have MyChart in this code:

<script>
$(window).on('resize', function ()
{
  $("#MyChart").css("width", "100%")
    .data("kendoChart").resize();
}
);
</script>

With this code in place, your chart will now redisplay in the correct size as your browser changes shape or size. You should, I think, include this code in any page where you’re displaying a chart (I’m going to assume this code is in place for the rest of this post, for example).

More Interactivity

But now, I’m going to take advantage of a more sophisticated solution for handling a UI with a chart: leveraging the Responsive Panel for ASP.NET MVC (a server-side wrapper for the Kendo UI Responsive Panel widget). The Responsive Panel lets you automatically tuck content out of the way as the user’s screen gets smaller, replacing that content with a button that allows the user to display the hidden content.

That means, for example, you can have a grid and a chart on the page and have the chart disappear when space gets tight … but still make the chart available when the user wants it. This UI for example, has a grid, followed by a chart, followed by some additional information.

With the Responsive Panel, I can have that chart disappear on smaller screens to free up space for the other sections while giving the user the ability to bring back the chart on demand. And that turns out to be ridiculously easy to implement.

Integrating the Responsive Panel

In my example, my initial layout would look something like this:

<h2>Data</h2>
<kendo-grid name="MyGrid">
  …grid…
</kendo-grid>

<h2>Chart</h2>
<kendo-chart name="MyChart">
  …chart…
</kendo-chart>

<h2>Caveats and Warnings</h2>
  …content…

To have the chart disappear when space gets tight, all I have to do is wrap my chart (and any related content) in the Responsive Panel tag helper. You just need to set three attributes on the panel’s tag helper:

• name: Whatever name you want to use to refer to the grid.
• breakpoint: The width, in pixels, when the panel should disappear.
• orientation: This is where the content will appear and can be any one of top, bottom, left or right. Feel free to experiment, but you probably want top.

This example will cause my chart to disappear from the screen when the screen width is less than 700 pixels:

  …grid…
</kendo-grid>

<kendo-responsivepanel name="MyPanel"
  breakpoint="700"
  orientation="top">

  <h2>Chart</h2>
  <kendo-chart name="MyChart">
    …chart…
  </kendo-chart>

</kendo-responsivepanel>

<h2>Caveats and Warnings</h2>
  …content…

Finally, somewhere on the page (and outside of the responsive panel), add a button to hide and display the panel, assigning it the CSS class rule k-rpanel-toggle so that the panel can find it. Something like this would work:

<button id="panelButton" class="k-rpanel-toggle">
  Show Chart
</button>
<br/>
<kendo-repsonsivepanel …

Now, with those changes, when the window gets too small (whether because the user has adjusted the size of their browser window, the user is viewing the page on a smartphone or the user rotates out of landscape mode into portrait mode on their tablet), your chart will get out of the way and be replaced by your button:

If the user clicks the button, the panel content (my chart, in this case) reappears, sized to fit in the appropriate space. When the chart is displayed, clicking the button will tuck the content back away.

Enhancing the UI

There are a couple of enhancements you might want to make. First, the caption I have on my button—“Show Chart” —isn’t really appropriate once the panel appears because clicking the button will now hide the chart. I could go with a more generic caption on the button (e.g., just “Chart”), or I could change the caption on the button when the chart is visible.

Second, there might also be scenarios where I want to open (or close) the panel from my application’s client-side code. If, for example, if I’m allowing my user to change data in the grid, I might want to redisplay the chart after the user saves their changes so that users can see a visual representation of their changes. I can do both of those things with a little bit of code.

To handle updating the button’s caption, I add some jQuery-enabled code to run when my page is ready to display. In that code, I grab references to the button that controls my panel and the panel itself. With those references, I can use the panel’s bind method to wire up functions that the button’s caption as the panel’s open and close events fire (jQuery’s text function will let me change the button’s caption).

Here’s what that code looks like:

  $( () => {
    let btn = $("#panelButton");
    let panel = $("#MyPanel").data("kendoResponsivePanel");
      panel.bind("open", () => btn.text("Hide Chart")  );
      panel.bind("close", () => btn.text("Show Chart")  );
    }
) ;

For my other scenario (opening or closing the panel from my code), I can just call the panel’s open or close function. There’s one caveat here, though: if you are opening or closing the panel from an interactive event (e.g., an onclick event), your function must accept the event’s default parameter and call the parameter’s stopPropogation function. Typical code would look like this:

const OpenPanel = (e) => {
  e.stopPropagation();
  $("#MyPanel").data("kendoResponsivePanel").open();
}

Of course, as with all the Telerik UI for ASP.NET MVC components, there’s more you can do here if you want. Rather than provide your own button, for example, the panel will generate a hamburger menu for you. This demo demonstrates that and integrates the panel with a sidebar that slides in from the side of the screen.

But if all you need is to get some content out of the way when space gets tight, you’ve got all you need to make that happen.

Try all this out yourself with a free 30-trial of the Telerik UI for ASP.NET MVC library:

Get Started

In the first part, we saw an introduction to Docker, understanding how it works and its advantages compared to virtual machines. In addition, we created our first Dockerfile and executed the commands to deploy an ASP.NET Core MVC application running in a Docker container.

In that example, we used the .NET in-memory storage resources as the database, but in real-world scenarios, it is common to use SQL databases such as SQL Server and MySQL. And that is what we will cover in this post.

Using the application from the last post, we will create a connection to an SQL Server database and create a container for it. In addition, we will see how to configure Docker to execute Entity Framework Core commands when deploying a new Docker image of the application.

Configuring the Base Application

In this post, we will take advantage of the application created in the first part, just modifying what is necessary. So, you can use the following Git command to download the base application via HTTPS. If you prefer, you can access the remote repository at this link: https://github.com/zangassis/reminder-list.

git clone https://github.com/zangassis/reminder-list.git

Then, let’s add the Entity Framework Core and SQL Server dependencies to the application. Open the project with your code editor and click on the file with the .csproj extension. Add the following code to it:

<PackageReference Include="Microsoft.EntityFrameworkCore .Design" Version="9.0.0">
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      <PrivateAssets>all</PrivateAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.EntityFrameworkCore .SqlServer" Version="9.0.0" />

Now let’s create a class to execute the migration commands and create the database and tables when the application is run in the docker container.

Inside the Data folder, add the following class:

• DatabaseManagementService

using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Infrastructure;
using Microsoft.EntityFrameworkCore.Storage;

namespace ReminderList.Data
{
    public static class DatabaseManagementService
    {
        public static void MigrationInitialisation(IApplicationBuilder app)
        {
            using (var serviceScope = app.ApplicationServices.CreateScope())
            {
                var context = serviceScope.ServiceProvider.GetRequiredService<TodoContext>();

                if (!context.Database.GetService<IRelationalDatabaseCreator>().Exists())
                {
                    context.Database.Migrate();
                }
            }
        }
    }
}

Here, the CreateScope() method creates a scope to access dependent services registered in the IServiceCollection, such as the ApplicationDbContext. Then, the serviceScope.ServiceProvider.GetRequiredService<ApplicationDbContext>() retrieves an instance of ApplicationDbContext, which is the class responsible for interacting with the database. Finally, if the database does not exist, the Migrate() method applies all pending migrations, updating the database schema according to the definitions of the migrations that were generated in the project.

Now we no longer need the database memory configuration, but rather the SQL Server configuration. So, open the Program.cs file and remove the following settings:

builder.Services.AddDbContext<TodoContext>(options =>
options.UseInMemoryDatabase("TodoList"));

And then add the following:

var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");

builder.Services.AddDbContext<TodoContext>(options =>
    options.UseSqlServer(connectionString));

And right after the code snippet app.UseAuthorization();, add the call to the MigrationInitialisation() method that will execute the migration commands when the application is built in the Docker container:

DatabaseManagementService.MigrationInitialisation(app);

Now let’s add the connection string in the appsettings.json file. Open the appsettings.json file and add the following:

"ConnectionStrings": {
    "DefaultConnection": "Server=mssql-server,1433;Initial Catalog=TodoListDb;User ID=SA;Password=8/geTo'7l0f4;TrustServerCertificate=true"
  },

Here we define the SQL Server database settings, such as database name, user ID and password, among others. These settings will be the same ones used when we create the SQL Server Docker container—so for the application to be able to connect to the database in the container, these credentials need to be configured correctly.

Creating the Docker Compose File

Docker Compose is a tool that allows you to define and run applications in multiple Docker containers.

It uses a configuration file, commonly called docker-compose.yml, where the services that make up the application are configured, such as APIs, databases, logging services, etc.

Compose is useful in scenarios where it is necessary to manage multiple containers. For example, in a backend application in ASP.NET Core, the first container would be for the application executable, and the second would be for the database (e.g. SQL Server or PostgreSQL). And a third container for additional tools (e.g., Redis, Nginx, etc.).

Instead of creating a Dockerfile for each service, we can create a Docker Compose for all services.

In the scenario of the post, we will need a container for the web application and a second container for the SQL Server database. So, in the project root folder, create a new file called docker-compose.yml and inside it add the code below:

version: '3'
services:
  mssql-server:
    image: mcr.microsoft.com/mssql/server:2022-latest
    environment:
      ACCEPT_EULA: "Y"
      SA_PASSWORD: "8/geTo'7l0f4"
      MSSQL_PID: Express
    ports:
      - "1433:1433"
    volumes:
        - ./sqlserver-data/volumes/sqlserver:/var/opt/mssql/data
  todo-app:
    build: .
    environment:
      ASPNETCORE_ENVIRONMENT: "Development"
    ports: 
      - "8090:80"

Now, let’s analyze each part of this code.

• version: '3': Defines the version of Docker Compose to be used. In this case, Version 3 is used for modern projects.

• services: Contains the definition of the services that will be executed.

• mssql-server: Configures a container with the Microsoft SQL Server database.

• image: Uses the latest official SQL Server 2022 image available in the Microsoft Container Registry.

• environment: Defines environment variables to configure the SQL Server.

• ACCEPT_EULA: "Y": Accepts the SQL Server license terms.

• SA_PASSWORD: "8/geTo'7l0f4" Defines the system administrator (SA) password. Following SQL Server security rules (minimum of 8 characters, with uppercase letters, lowercase letters, numbers and special characters).

• MSSQL_PID: "Express": Configures SQL Server to run in the free Express edition.

• ports: Maps port 1433 of the container to port 1433 of the host.

• volumes: ./sqlserver-data/volumes/sqlserver:/var/opt/mssql/data: Mounts a persistent volume on the host to store SQL Server data, storing the data in the local folder and mapping it to the /var/opt/mssql/data directory inside the container.

• todo-app: Configures the ASP.NET Core application.

• build: Indicates that the container will be built from the current directory using the Dockerfile in this directory.

• environment-: Sets environment variables for the application.

• ASPNETCORE_ENVIRONMENT: "Development": Sets the application environment as Development.

• ports: Maps port 80 of the container to port 8090 of the host, allowing access to the application via http://localhost:8090.

Running Compose Commands

Before running the command to persist the docker-compose file, it is necessary to generate the EF Core migrations files, so that when the container is created, the database and tables are also created.

So, open a terminal in the root of the application and run the following command:

dotnet ef migrations add InitialCreate

Now we can run the docker command that will create the containers. In the terminal, run the following command:

docker compose up --build

Let’s explain each command:

Rebuild Container Images: The --build parameter forces Docker Compose to rebuild the container images.

Upload Services: The docker-compose up command starts the services defined in the docker-compose.yml file. It creates and initializes the service containers, connecting them according to the defined network configuration.

If everything goes well, you can check the images and containers created on the docker desktop.

Note that there is a container for the SQL Server database and another container for the application, so if we had more applications, they could all access the same database that is running in the Docker container.

Testing the Application

Now you can access the application in the browser to check if everything is working correctly. So, in the browser, access the address: https://localhost:8090/Todo and try to create a new task:

You can access the source code with the post modifications in this GitHub repository: Source code.

Now the web application we created no longer accesses the in-memory database. Instead it accesses the SQL Server that has an instance running in the container. The image below demonstrates a flow of the example created in the post where docker compose creates an image and container for the SQL Server, in addition to using the Dockerfile to create the image and container of the ASP.NET Core application.

Conclusion

Using Docker to manage applications enables agility and efficiency in system development and deployment. With a few configurations and commands, developers can quickly deploy applications in isolated environments, regardless of the operating system or machine configuration. In addition, Docker makes it easier to scale and manage dependencies, allowing teams to focus more on developing features and less on environment configuration and potential issues during this process.

In this post, we saw how to improve a project that already used Docker. In this example, we created Docker Compose, which allows the configuration of several services, without the need for a Docker file per service. Thus, we integrated the application with the SQL Server database that was also running in a Docker container. We also checked details on how to configure EF Core to execute the migration commands when the container was started.

You can use Docker to speed up the development, testing and deployment of web applications.

Keeping a web application running with all its dependencies involves several configurations and adjustments, which can be challenging. To help with this process, we can use Docker—a formidable tool that encapsulates the application, its dependencies and configurations in standardized containers.

In this post, we will understand how Docker works and how to start integrating its functionalities into an ASP.NET Core application.

Introduction to Docker

Docker is an open-source platform designed to make it easier to create, test and deploy applications in isolated environments called containers.

Docker containers are isolated environments that allow you to run applications and their dependencies independently of the operating system. They act as “boxes” that contain everything an application needs to function, such as libraries, environment variables, configurations and the code itself. This allows the application to run in any environment, be it on a desktop, on production servers or in the cloud, without complications or complex configurations, which is its main advantage.

Developers can use Docker to create application images, which are ready-to-run snapshots and easily share them with other developers or operations teams. This improves consistency, reduces compatibility issues and simplifies the process of deploying and maintaining complex applications.

In addition, Docker integrates well with CI/CD (Continuous Integration and Delivery) systems, making it a popular tool among teams working with microservices and highly scalable environments. For these reasons, it has become an important choice for developers and DevOps professionals looking for agility and efficiency in software development and delivery.

Containers vs. Virtual Machines

Containers and virtual machines (VMs) are both technologies that isolate applications and their dependencies. The two provide similar benefits, but they do so in different ways.

Containers form an abstraction at the application layer that packages code and its dependencies together. A single machine can contain multiple containers and share the operating system kernel, allowing each to run as an isolated process. Unlike VMs, containers take up very little disk space (usually tens of MBs in size) and can handle more applications at the same time.

In contrast, virtual machines provide an abstraction of physical hardware. The hypervisor allows multiple VMs to run on a single machine. Each VM is composed of a complete copy of an operating system, including the application, binaries and libraries, taking up tens of GBs. This entire process can slow down VM startup.

As can be seen in the image above, unlike virtual machines, containers do not need a hypervisor to virtualize the operating system, as they directly share the host operating system kernel.

The absence of a hypervisor reduces overhead, as there is no need to simulate hardware or load a full operating system inside each instance. This lighter structure allows containers to start faster and take up less disk space and memory compared to virtual machines.

Docker Images

A Docker image, also known as a container image, is a “package” that contains everything an application needs to run inside a container.

They include the application’s source code, libraries, dependencies, environment variables and any configurations needed for the application to function properly. These images are created through a standalone executable file called a Dockerfile. In simple terms, a Docker image is a template or blueprint that defines what the container should execute.

Each Docker image is built through layers. These layers are made up of instructions written in the Dockerfile file, which describe each step required to build the application. Each command in the Dockerfile creates a new layer.

Layers allow images to be built and run efficiently because Docker only stores the differences between each layer. Thus, if several images share the same layer, such as a base library for example, Docker only stores that layer once, avoiding unnecessary overhead.

Below is an example of a Dockerfile for an ASP.NET Core application. Note that each command creates a new layer.

# Step 1: Build image
FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build-env

# Sets the working directory
WORKDIR /app

# Copies project files and restores dependencies
COPY *.csproj ./
RUN dotnet restore

# Copy all remaining files and build the application
COPY . ./
RUN dotnet publish -c Release -o /app/out

# Step 2: Run Image
FROM mcr.microsoft.com/dotnet/aspnet:8.0

# Sets the working directory
WORKDIR /app

# Copies files from the build step to the final image
COPY --from=build-env /app/out .

# Exposes the port used by the application
EXPOSE 80

# Defines the input command to start the application
ENTRYPOINT ["dotnet", "ApplicationName.dll"]

Images vs. Containers

A Docker image is a static blueprint, while a container is a live instance of that image. In simple terms, the container is the execution of the image. In this sense, multiple containers can be created from the same image.

For example, an image could contain a web application such as an API or worker service, and you can launch as many containers as you need from that image, with each container operating as an independent instance of the server.

Hands-on with Docker

To put Docker into practice, we will create a web application in ASP.NET Core and then we will configure Docker images and containers. So the first step is to install Docker on your computer.

Installing Docker Desktop

You can use the Docker Desktop tool that installs and configures what you need to have the local Docker server on your machine. To do this, simply access the Docker Desktop download page and install the version compatible with your operating system. Currently available for Windows, Mac (macOS) and Linux.

Important: Docker Desktop has restrictions for commercial use. Therefore, before installing it, check whether or not you need a license to use it.

Creating the Application

To practice using Docker, we will create an ASP.NET Core application using the MVC (Model, View, Controller) template to manage a task schedule.

To keep the focus on the Docker configurations, in this first part we will use an in-memory database, so no extra configurations will be necessary for the application to work.

You can access the project source code in this GitHub repository: Reminder List.

To create the base application, you can use the following .NET command:

dotnet new mvc -o ReminderList -au none

This command will create an application using the MVC template. In addition, the -au none command prevents authentication resources from being added, as they are not relevant in this context.

Now open a terminal at the root of the application and run the commands below to download the NuGet packages that will be needed.

dotnet add package Microsoft.EntityFrameworkCore. InMemory
dotnet add package Microsoft. EntityFrameworkCore

Next, inside the folder “Models” create the following class:

namespace ReminderList.Models;
public class TodoItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsCompleted { get; set; } = false;
}

Then, create a new folder called “Data” and, inside it, create the following class:

using Microsoft.EntityFrameworkCore;
using ReminderList.Models;

namespace ReminderList.Data;
public class TodoContext : DbContext
{
    public TodoContext(DbContextOptions<TodoContext> options) : base(options) { }

    public DbSet<TodoItem> TodoItems { get; set; }
}

Inside the folder “Controller” add the following controller:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using ReminderList.Data;
using ReminderList.Models;

namespace ReminderList.Controllers
{
    public class TodoController : Controller
    {
        private readonly TodoContext _context;

        public TodoController(TodoContext context)
        {
            _context = context;
        }

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

        public IActionResult Create()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create(TodoItem todoItem)
        {
            if (ModelState.IsValid)
            {
                _context.Add(todoItem);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(todoItem);
        }

        public async Task<IActionResult> Edit(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var todoItem = await _context.TodoItems.FindAsync(id);
            if (todoItem == null)
            {
                return NotFound();
            }
            return View(todoItem);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Edit(int id, TodoItem todoItem)
        {
            if (id != todoItem.Id)
            {
                return NotFound();
            }

            if (ModelState.IsValid)
            {
                try
                {
                    _context.Update(todoItem);
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!TodoItemExists(todoItem.Id))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
                return RedirectToAction(nameof(Index));
            }
            return View(todoItem);
        }

        public async Task<IActionResult> Delete(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var todoItem = await _context.TodoItems
                .FirstOrDefaultAsync(m => m.Id == id);
            if (todoItem == null)
            {
                return NotFound();
            }

            return View(todoItem);
        }

        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> DeleteConfirmed(int id)
        {
            var todoItem = await _context.TodoItems.FindAsync(id);
            _context.TodoItems.Remove(todoItem);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }

        private bool TodoItemExists(int id)
        {
            return _context.TodoItems.Any(e => e.Id == id);
        }
    }
}

Now, let’s create the views files. Inside the “Views” folder, create a new folder called “Todo” and, inside that, add the following views:

• Index.cshtml

@model IEnumerable<ReminderList.Models.TodoItem>

<h2>Todo List</h2>

<p>
    <a asp-action="Create">Add New Task</a>
</p>

<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Is Completed</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.Title</td>
            <td>@item.IsCompleted</td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
    }
    </tbody>
</table>

• Create.cshtml

@model ReminderList.Models.TodoItem

<h2>Create New Task</h2>

<form asp-action="Create">
    <div class="form-group">
        <label asp-for="Title"></label>
        <input asp-for="Title" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="IsCompleted"></label>
        <input asp-for="IsCompleted" class="form-check-input" type="checkbox" />
    </div>
    <button type="submit" class="btn btn-primary">Create</button>
</form>

• Edit.cshtml

@model ReminderList.Models.TodoItem

<h2>Edit Task</h2>

<form asp-action="Edit">
    <input type="hidden" asp-for="Id" />
    <div class="form-group">
        <label asp-for="Title"></label>
        <input asp-for="Title" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="IsCompleted"></label>
        <input asp-for="IsCompleted" class="form-check-input" type="checkbox" />
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
</form>

• Delete.cshtml

@model ReminderList.Models.TodoItem

<h2>Delete Task</h2>

<div>
    <h4>Are you sure you want to delete this task?</h4>
    <div>
        <p>
            <strong>Title:</strong> @Model.Title
        </p>
        <p>
            <strong>Is Completed:</strong> @Model.IsCompleted
        </p>
    </div>
    <form asp-action="DeleteConfirmed">
        <input type="hidden" asp-for="Id" />
        <button type="submit" class="btn btn-danger">Delete</button>
        <a asp-action="Index" class="btn btn-secondary">Cancel</a>
    </form>
</div>

Then, in the Program.cs file, replace the code by following:

using Microsoft.EntityFrameworkCore;
using ReminderList.Data;

var builder = WebApplication.CreateBuilder(args);
builder.WebHost.UseUrls("http://*:80");

// Add services to the container.
builder.Services.AddControllersWithViews();

// Configure the in-memory database
builder.Services.AddDbContext<TodoContext>(options =>
options.UseInMemoryDatabase("TodoList"));

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Home/Error");
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

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

app.Run();

The code builder.WebHost.UseUrls("http://*:80"); defines the URL and port on which the ASP.NET Core server will listen for HTTP requests when running in the Docker container.

Creating the Dockerfile

The next step is to create the file that will contain the steps for creating the Docker image.

In the application root directory, create a file called Dockerfile. It doesn’t need an extension, just use exactly that name.

Then, open the file with a text editor, and add the following code to it:

FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build

WORKDIR /app

COPY *.csproj ./
RUN dotnet restore

COPY . ./

RUN dotnet publish -c Release -o /app/publish

FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base

ENV ASPNETCORE_ENVIRONMENT=Development

WORKDIR /app

COPY --from=build /app/publish .

EXPOSE 80

ENTRYPOINT ["dotnet", "ReminderList.dll"]

Now let’s analyze each part of this code.

• FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build: Sets the base image (.NET 9.0 SDK) for the build step, including compilation tools, dependency restoration and application publishing.

• WORKDIR /app: Sets the working directory to /app inside the container, where all the commands below will be executed.

• COPY *.csproj ./: Copies the application’s .csproj (project) file to the container’s /app working directory. This allows only the files needed to restore dependencies to be copied initially, avoiding the need to rebuild dependencies every time a code file changes.

• RUN dotnet restore: Restores the project dependencies, downloading the NuGet packages required for the application. This process helps to take advantage of the Docker cache for restoration.

• COPY . ./: Copies the entire contents of the current directory to the container, including the source code.

• RUN dotnet publish -c Release -o /app/publish: Compiles and publishes the application in Release mode to the /app/publish directory, creating an optimized, production-ready version.

• FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base: Sets the base image for the final step, which uses the ASP.NET Core 9.0 runtime.

• ENV ASPNETCORE_ENVIRONMENT=Development: Sets the ASPNETCORE_ENVIRONMENT environment variable to Development, indicating that the application will run in development mode.

• WORKDIR /app: Sets the working directory of the final step to /app.

• COPY --from=build /app/publish .: Copies the published folder (/app/publish) from the build step to the current /app directory in the final step.

• EXPOSE 80: Exposes port 80 of the container so that it can receive HTTP connections.

• ENTRYPOINT ["dotnet", "ReminderList.dll"]: Sets the entry point for the application. This specifies that when the container starts, it will execute the dotnet ReminderList.dll command, which will launch the ASP.NET Core application executable.

Creating the Docker Image

Now that we understand what each step of the Dockerfile means, we can run the command that will use that file and create the docker image.

So, in the root of the application, open a terminal and run the following command:

docker build -t todoapp .

docker build: This command builds a Docker image based on the Dockerfile found in the current directory represented by the dot (.).

The -t flag (short for “tag”) allows you to give a name to the image that will be built, which in this case is todoapp. This helps identify the image in the local Docker repository.

Below you can see the result of the execution and if everything went well.

Now you can check the newly created image in Docker Desktop.

Creating the Docker Container

With the image ready, we can create the docker container that will use the image to create an instance of our application.

So, in the application root directory, run the following command:

docker run -d -p 8080:80 --name todoapp-container todoapp

Let’s analyze each of these commands in detail:

• docker run: Starts a new container based on a Docker image.

• -d: Stands for detached mode. The container will run in the background, allowing you to continue using the terminal while the container runs.

• -p 8080:80: Maps a host port to the container port, where 8080 is the port on your computer (host) that will be used to access the application, while 80 is the port exposed by the container (as specified in the Dockerfile by the EXPOSE 80 command).

• --name todoapp-container: Gives a custom name to the container.

• todoapp: This is the name of the Docker image created previously. This image will be used to create the container.

The result of the commands can be seen below, as well as the container in Docker Desktop:

Note that this command outputs an ID. This is the ID of the container that was created and started by the docker run command. It is a unique identifier generated by Docker for the newly created container.

Now that the container has been created, we can access the address http://localhost:8080/Todo to see the application online.

Conclusion

Docker is a tool that makes it easier to deploy applications and has many advantages when compared to traditional virtual machines since each Docker container can share the same operating system as the host. Furthermore, Docker’s mechanisms are extremely efficient, requiring only what is necessary to get the applications up and running, which makes the deployment process extremely agile.

In this post, we created a simple application to manage a list of tasks using the ASP.NET Core MVC template. Then, we created a Dockerfile and ran the commands to get the application running in a Docker container.

In the next part, we will add a database to the application, create an individual container for it and see how to verify that everything works correctly.

Progress Telerik is a popular suite of user interface components and productivity tools that enhances the development process when used with ASP.NET Core and MVC. It integrates with tools like Visual Studio, Visual Studio Code and ReSharper. Telerik components can also coexist with tools like Git, Docker, Entity Framework Profiler, Fiddler and LINQPad, aiding in the creation of a comprehensive and efficient development environment.

This article is filled with practical examples and scenarios, demonstrating the tangible benefits of Telerik UI for ASP.NET Core and UI for ASP.NET MVC development.

Boost Your Productivity with Telerik and Your Favorite Tools

In the constant pursuit of enhancing productivity and efficiency, Telerik emerges as a highly beneficial tool for developers.

This widely recognized collection of UI components and productivity-enhancing tools syncs flawlessly with ASP.NET Core and MVC, significantly improving the development workflow.

Visual Studio and Visual Studio Code

Telerik offers extensions for both Visual Studio and Visual Studio Code that enhance the productivity of ASP.NET Core and MVC developers.

The Telerik UI for ASP.NET Core and UI for MVC extensions allow developers to use and customize a vast library of ready-to-use UI components directly in the Visual Studio environment. It also provides project templates and configuration wizards to simplify the creation and setup of new projects.

As a full-featured integrated development environment (IDE), Visual Studio has built-in support for developing applications using Microsoft’s technology stack, including ASP.NET Core and MVC. It features powerful debugging tools, extensive code-editing features and integrated testing tools.

Visual Studio Code is a lighter, more streamlined code editor that supports many languages. It’s highly extensible via plugins, with features such as IntelliSense for intelligent completions, built-in Git integration and the ability to debug from the editor.

You don’t have to write UI code from scratch; choose an element from the Telerik UI library, add it to your project and customize it as needed. As a result, Telerik UI can significantly speed up developing user interfaces for your applications.

The Telerik UI for ASP.NET Core extensions provides UI components for various purposes, such as data input (e.g., text boxes and dropdown lists), data display (grids and charts), and layout (panels and windows). Each component comes with a set of customization options to tailor the look and behavior of the element to your specific needs.

Project Templates and Configuration Wizards

Progress Telerik’s templates for ASP.NET Core and MVC projects can further enhance your productivity in Visual Studio. Create a new project and choose one of these templates for a preconfigured project setup with Telerik UI components already integrated. The Configuration Wizard can guide you through the setup and configuration of Telerik components, making the process even more straightforward.

ReSharper

ReSharper is a renowned productivity tool developed by JetBrains that enhances the functionality of the Visual Studio IDE. It provides a series of features that streamline and optimize the process of writing code, particularly C#, the language of choice for ASP.NET Core and MVC. Using Telerik with ReSharper comes with several benefits:

Code Navigation and Analysis

ReSharper offers powerful features for navigating the codebase. Features such as Go to Definition, Find Usages and Navigate To can help developers better understand the Telerik UI components and their work.

ReSharper also has a sophisticated static code analysis engine that can automatically highlight errors and potential improvements in your code, including the part of the codebase that uses Telerik components.

Refactoring Capabilities

ReSharper provides extensive automated code refactoring with C# and other languages. If you’re writing custom logic using Telerik components or extending the components, these refactoring tools can simplify efforts to keep your code clean and maintainable.

Quick Fixes

When ReSharper’s code analysis detects an issue in your code, it often provides one or more quick fixes. This feature is equally effective when working with Telerik UI components. If you make a mistake—say, misusing a Telerik API—ReSharper can often offer a quick fix to automatically correct the issue.

Code Templates

ReSharper provides several code templates for common coding patterns and practices. You can also define your templates if you often find yourself writing the same boilerplate code when using Telerik components.

Seamless Integration with Visual Studio

ReSharper integrates seamlessly with Visual Studio, enhancing existing functionality without disrupting your workflow. You can use Telerik components and ReSharper’s advanced features side by side, enjoying a streamlined, efficient development process.

Telerik Fiddler Everywhere

If you’re using Telerik components in an ASP.NET Core or MVC application that also exposes APIs, you can use Fiddler Everywhere to test these APIs. For example, if you have a Telerik UI Grid that fetches data from an API, you can use Fiddler Everywhere to send requests to this API to ensure it works correctly and returns the expected data. As a result, you can isolate any issues and ensure that the API does not cause any problems with your UI components.

Simulating API Responses

Fiddler Everywhere allows you to simulate API responses, which can be handy in the development phase of your application. For example, if your application includes a Telerik UI component that depends on an API still under development, you can use Fiddler to mock the API response. The tool allows you to continue developing and testing the UI component without waiting for the API to be finished.

Telerik UI for ASP.NET Core, UI for ASP.NET MVC and Fiddler Everywhere are all part of the Telerik DevCraft bundle, and using them together can contribute to a more robust and efficient development process. Add in the automated testing power of Telerik Test Studio (also included with DevCraft), and you have an absolute powerhouse team on your side.

Git

Telerik components do not interact with Git directly. However, Git is essential to code versioning, in any project.

Docker

Docker is an open-source initiative that simplifies the process of deploying applications as autonomous, transportable containers that can operate both on cloud-based and on-site platforms. Telerik components do not interact directly with Docker, but you can deploy your ASP.NET Core or MVC applications using Docker containers, regardless of whether you’re using Telerik components in your application.

Entity Framework Profiler

Entity Framework Profiler is a visual debugging tool that operates in real time, providing development teams with crucial insights into using Entity Framework, LINQ or Entity SQL. This tool enables developers to enhance their application’s data access layer by profiling and optimizing LINQ queries. It reveals a wealth of performance metrics and offers a thorough perspective on the performance of the data access code.

Using Progress Telerik’s data access libraries and components, such as Telerik Data Access, Entity Framework Profiler becomes a powerful tool for debugging and optimizing.

Monitoring Database Interactions

With Entity Framework Profiler, you can monitor the real-time interactions between your application and your database—both the queries sent to the database and the results returned. For example, suppose you’re using Telerik Data Access to interact with your database. The profiler can give you detailed insight into these interactions, helping you understand what’s happening when you execute a query or update operation.

Optimizing Queries

Entity Framework Profiler can help you optimize your database queries. If you’re using Telerik Data Access to write LINQ queries, for example, the profiler can analyze these queries and suggest improvements. It can highlight potentially problematic areas such as unnecessary joins, select N+1 issues, unbounded result sets and more.

Identifying Performance Bottlenecks

Identify performance bottlenecks in your data access code with a wealth of performance metrics from Entity Framework Profiler. For example, if a particular operation using Telerik Data Access is slow, the profiler can help you understand why and what you can do about it.

Debugging

Entity Framework Profiler isn’t just for optimization; it can also help you debug your code. For example, if something isn’t working as expected in your data access code, you can use the profiler to track down the issue. It can show you the exact SQL being sent to the database and the returned results, allowing you to see if the problem lies in your database, your queries or elsewhere.

When using Progress Telerik’s data access libraries and components, incorporating a tool like Entity Framework Profiler in your development process can significantly enhance your understanding of your data access code and improve its performance, efficiency and reliability.

LINQPad

LINQPad is an influential utility that allows developers to dynamically query databases using a current query language known as LINQ. It offers an informal, streamlined platform for prototyping, experimenting and testing queries. LINQPad serves as an excellent supplementary tool when incorporating Progress Telerik’s data access libraries into your project.

Query Testing and Optimization

With LINQPad, you can test your LINQ queries interactively before integrating them into your project, to ensure that your queries work as expected and return the desired results. Additionally, LINQPad lets you optimize your queries, providing insights about potential performance issues like select N+1 problems or inefficient joins. If you’re using Progress Telerik’s data access libraries to create LINQ queries, you can perfect them in LINQPad before moving them to your application code.

Prototyping and Experimenting

LINQPad provides an excellent environment for prototyping and experimenting with new ideas. If you’re considering different approaches to retrieving or manipulating your data with Progress Telerik’s libraries, you can try them out in LINQPad before implementing them in your project. Iterating and refining your ideas can help you avoid going down a path that turns out to be unworkable or inefficient.

Learning and Debugging

If you’re new to LINQ or Progress Telerik’s data access libraries, LINQPad can be an excellent learning tool. It gives you immediate feedback on your queries, so you can quickly see the effects of different approaches and learn the ins and outs of the libraries you’re using. LINQPad’s ability to execute any C# or VB expression instantly makes it an excellent tool for debugging and understanding complex code expressions.

Database Insights

In addition to working with LINQ queries, LINQPad can provide valuable insights into your database structure. It can generate a schema and let you browse and analyze your data directly. If you’re using Progress Telerik’s data access libraries to interact with your database, this can provide you with a better understanding of your data and how your queries interact with it.

Conclusion

If you want to boost your productivity as a developer, consider trying Telerik. Its integration with essential ASP.NET Core and MVC development tools makes it a powerful addition to your toolkit.

Try both libraries, plus more: Try DevCraft

In this post, I will guide you in how to migrate a Telerik UI for MVC application to Telerik UI for ASP.NET Core. In a previous post, I demonstrated how to migrate any MVC application to Telerik UI for ASP.NET Core. So, if you need to become more familiar with Telerik, please look at that post.

Migrating a solution from Telerik UI for MVC can be easier than you imagine. The point that you need to take care of is the dependencies, like the business layer and other assemblies, from the project coded by your team.

The project used in this demonstration is the Telerik UI for MVC 5 Grid and Menu.

Now let’s do it. Follow these steps.

1. Create a new blank project using the Telerik extension menu on Visual Studio. In this sample, I am using Visual Studio 2022.

2. Choose the path for your application and, after that, an empty template. If you are in doubt about choosing between HTML or Tag Helpers, please take a look at this post that explains the differences between them.

3. Copy the Controller application files, renaming the old namespace to the new one. See the image below.

4. Start copying your Models; see the image below.

5. Copy your Views; see the image below.

6. Migrate your Shared files; see the image below.

7. Adjust your HomeController, bringing the ActionResults.

The code inside your home controller should be updated with namespaces, and if your application has deprecated code, it should be replaced by a new one. Today we have lots of NuGet packages that can replace these deprecated codes.

Tip: Remember to have a successful compilation of the old code before starting the migration.

If you have business layers and other dependencies, you must bring them to .NET 6/7 first.

Those are the basic steps to migrate your MVC project to Core! Pretty straightforward, but I will now show you an even easier approach.

Migrate Even Faster

Let me share how I make this migration faster and easier.

1. Choose a template that fits the best for your case. I chose Grid and Menu for this sample.

2. Repeat the steps below, changing the files to your legacy MVC project.

3. Copy the Controller application files; see the image below.

4. Start copying your Models; see the image below.

5. Copy your Views; see the image below.

6. Migrate your Shared files; see the image below.

Adjusting the new project with your legacy code will be easier and you won’t miss any needed references.

Conclusion

The migration process can sometimes be frustrating due to dependencies and deprecated code, but today most of the NuGet packs already have a new version of .NET 6/7.

This post helped you to migrate smoothly and start a quick and significant advantage from the new Telerik UI for ASP.NET Core in terms of processing and quick response to end users.

You can open a support ticket at any time with Telerik’s legendary support team, who will help you cross this journey.

References

• 5 Easy Steps to Migrate an ASP.NET MVC Project to an ASP.NET Core
• Using Kendo UI with Telerik UI for ASP.NET Core: Tag vs. HTML Helper Syntax
• Check out this older blog post about migration that goes into more detail and highlights many more real-world problems you may bump into when migrating a project, like database setup and specifics about differences in a .NET Core project configuration.

Try Now

Both Telerik UI for ASP.NET Core and ASP.NET MVC are trustworthy products that will be supported for many years to come. We encourage you to use whichever library will best serve your project.

Try UI for ASP.NET Core Try UI for ASP.NET MVC

Each of the above comes with a free 30-day trial. Or try out both with Telerik DevCraft. With DevCraft, you not only have access to our professionally designed UI components for web, desktop and mobile applications, but also embedded reporting and report management solutions, document processing libraries and automated testing and mocking tools. The link to try DevCraft is here.

What is the Difference Between ASP.NET MVC and ASP.NET Core?

ASP.NET MVC is a web application framework developed by Microsoft that implements the model-view-controller (MVC) pattern. It is an open-source framework used for creating web applications. It allows developers to build dynamic, scalable and secure web applications.

ASP.NET Core is a cross-platform, open-source framework for building modern, cloud-based web applications. It is highly optimized for cloud deployment and is lighter and more modular than the whole .NET framework. It is built to be modular, so you can choose which components you need and easily plug them in. .NET Core includes libraries for ASP.NET Core MVC, Web API and Entity Framework Core.

Next, I’d like to introduce Telerik UI for ASP.NET Core, the professional-grade UI component library for modern web projects. Speed up your development time and maximize your coding efficiency with the help of over 100+ pre-built components, including popular, high-performance and modern responsive UI controls. Get advanced user controls like ASP.NET Core Grid, Scheduler, TreeView and more, with complete customization and styling, plus out-of-the-box support for popular platforms, including Angular, React and Vue. Develop fast and straightforward integrations to add a high-end experience to your web apps and websites used by worldwide enterprises. (And if you decide to stick with MVC, you can still use Telerik power with UI for ASP.NET MVC.)

But what benefits does ASP.NET Core offer over MVC .NET Framework 4? Or why migrate from ASP.NET MVC to ASP.NET Core?

• Cross-platform support: ASP.NET Core is designed to run on Windows, macOS and Linux, making it an excellent choice for developing software on multiple platforms.
• Higher performance: ASP.NET Core is designed to be a high-performance platform, providing better throughput and lower overhead than its predecessor.
• Modular architecture: ASP.NET Core makes it much easier to build complex applications by allowing developers to break apps down into more manageable, modular components.
• Cloud-ready: ASP.NET Core provides built-in support for deploying applications to the cloud, making it great for cloud development.
• Support for open source: ASP.NET Core has been embraced by the open-source community, and an extensive list of libraries, tools, and frameworks is available for developing applications.
• More robust security: ASP.NET Core includes many security improvements, such as role-based security, identity management, and claims-based authorization.

I have prepared these five steps from zero to start with Telerik UI for ASP.NET Core, migrating your existing ASP.NET MVC .NET Framework 4. The steps from .NET 5 or 6 are identical, with minor differences.

1. Install the necessary setup.
2. Create a new project based on the ASP.NET Core MVC project template.
3. Install the necessary NuGet packages in the project and ensure all dependencies from your old solution.
4. Move all controllers, models and views from your existing project to the new project.
5. Implement any required ASP.NET Core migration tasks, such as updating routing or dependency injection.

How easy is it?

To ensure the preservation of your original files, you need to have a backup from the original files or start a new branch or Git repository for this task. Remember that some of the components will not work with .NET Core, so you can look at the provider’s NuGet homepage for potential updates compatible with .NET Core.

If your team is not planning to update to the last version of .NET Core every year, like .NET 8, .NET 9, etc., you can use .NET 6 which is an LTS (Long-Term Support) version that will have official support until November 12, 2024.

Remember that in some cases, you will need to rewrite deprecated code.

Let’s Work on It!

1. Install the Necessary Setup

  Visual Studio 2022

Install Visual Studio 2022. You can use the Community version—its license can be used by one team or five individual developers, and each developer can use the license on up to five devices.

Download it from: http://launch.visualstudio.com/

In setup, select ASP.NET modules.

For .NET 6, you can use the previous version, Visual Studio 2019.

Install your License of Telerik UI for ASP.NET Core or a trial from https://www.telerik.com/download.

Create a free account if you still need to do this.

Download the Control Panel from the Account page:

Select only Telerik UI for ASP.NET Core or let all components on:

2. Create a Visual Studio ASP.NET Core MVC Project

Once you have set up Telerik, access Visual Studio and create a new project based on the ASP.NET Core MVC project template.

Select a blank template. I do recommend using the HTML Tag. In Telerik Kendo UI is the element that defines the structure and content of the webpage. The tag is the HTML used as markup to describe the component’s properties.

3. Install NuGet Packages

Install the necessary NuGet packages in the project and ensure all dependencies from your old solution have been taken care of.

4. Move Controllers, Models and Views

Move all controllers, models and views from your existing project to the new project.

These are the main folders that you will act on.

5. Implement Required Migration Tasks

Implement any required ASP.NET Core migration tasks, such as updating routing or dependency injection.

Update ASP.NET Core components to reflect any changes in routing, dependency injection or other migration tasks. In addition, each member must be updated to reflect the changes of the new ASP.NET Core version to ensure the application runs securely and bug-free.

You can check a project with the state before and after migrating to Telerik UI for ASP.NET Core in my GitHub: https://github.com/jssmotta/AspnetMVC4.

After this process, you can start migrating your old components with the Telerik UI for ASP.NET Core components; you can find information on the online documentation at https://docs.telerik.com/aspnet-core/introduction.

You can contact Telerik’s legendary support team at any time—even during your free trial—to solve any questions about the products.

Try UI for ASP.NET Core

Using Telerik UI for ASP.NET MVC and curious about how to migrate to Telerik UI for ASP.NET Core? Check out this post: How to Migrate from Telerik UI for ASP.NET MVC to UI for ASP.NET Core.

Table of Contents

• Migrating Your ASP.NET MVC 5 Application to ASP.NET Core
• Application Specific
       ◦ Class libraries and Third-Party Packages
       ◦ Data Access
• The Easy Stuff
       ◦ Configuring Your Application
       ◦ Controllers, Views and Models
       ◦ Routing
• The Hard Stuff
       ◦ Web.config configuration
       ◦ Cache
       ◦ Session
       ◦ Authorization/Authentication
       ◦ Handlers and Modules (Middleware)
• After the Migration

Migrating Your ASP.NET MVC 5 Application to ASP.NET Core

Before you migrate your perfectly good ASP.NET MVC 5/.NET Framework 4.5+ app to ASP.NET Core … is this something you really need to do? Migrating your application won’t necessarily be challenging, but it can involve a lot of time consuming/repetitious/grunt work (which means it can be expensive). Since that’s the case, you should migrate your application only if:

• There’s some functionality you want to add to your application that can only be done in ASP.NET Core (e.g., creating a cross-platform app)
• You want to reduce the size of your toolkit by having nothing but ASP.NET Core applications in your application portfolio
• You’re paid by the hour and want to drive up your billable time

If you’re committed to migrating then here are the 10 areas that you’ll need to migrate, each with its varying degrees of pain and suffering. While the reason you’re migrating may be to take advantage of new features in ASP.NET Core (Razor Pages, Tag Helpers, faster Web services and so on), I’m going to assume that you’ll take advantage of those new features after you’ve got your application up and running in ASP.NET Core. Quite frankly, for an application of any size, you’ll have enough problems just doing that.

Application Specific

There are some migration issues that you may not have to deal with because they will depend on what features your application uses that aren’t part of the base ASP.NET framework.

Class Libraries and Third-Party Packages

This category is, potentially, your biggest headache. Or not. You could be lucky.

For example, if your application is using only class libraries that you’ve created and those libraries don’t contain any Windows-specific code or use any third-party packages, then you can probably just reference those libraries’ DLLs from your ASP.NET Core project and carry on with your life.

If you wanted to future-proof your application or position your application to run on any platform, then you could also:

1. Create a Visual Studio 2022 project using the “Class Library that targets .NET or .NET Standard” template
2. Copy your class library code files into that new project
3. If your code compiles, reference that new project’s DLLs from your web application

If, however, your project is using a third-party package or a class library with Windows-specific code (and you want to create a cross-platform app), then you’re going to need to upgrade to a .NET Core equivalent. What could possibly go wrong?

Well, first, of course, there may not be a .NET Core equivalent to the package for you to upgrade to. Even if there is, the .NET Core version may have a significantly different interface than the package your old application was built with. If either of those cases is true, then you’re going to have hunt down and rewrite the relevant code in your project, ideally without introducing any new bugs.

And if the new package actually behaves differently than the old package, then you are potentially in for a significant rewrite to accommodate/compensate for the new behavior.

Presumably, your new package’s vendor can provide you with some guidance on migrating to the new package so, with one exception, I’m going to ignore this category because all your issues will be package-specific. I will say that your best friend here is a library of regression tests that will let you see if the new version of your application works the same as your old version.

The one exception I’ll make is if you’re using a dependency injection/inversion of a control container (an IoC). If you’re not using an IoC, then you can continue to new up your classes as you need them. If you’re using an IoC, you should know that ASP.NET Core comes with its own IoC (the ASP.NET Core Services collection). You’ll need to look at the differences between ASP.NET Core’s built-in IoC and the ASP.NET Core version of your existing IoC (assuming an ASP.NET Core version exists) before deciding which will require the least work when migrating.

Data Access

If you’re converting a business application, you’ll have a lot of data access code in your application. If your application uses ADO.NET, you can continue to use it.

If you’ve used Entity Framework 6 (EF6) in a code-first mode (EF6), you can continue to use that also. If, on the other hand, your application is using an EDMX file and its related visual designer, then you’ll need to move to the code first approach by creating your own entity and DbContext files before migrating. In all these cases, you’ll just need to add the relevant NuGet packages to your ASP.NET Application and you’ll be ready to move on.

If you’re considering upgrading to Entity Framework Core from EF6 and used a code-first approach, then you’ll find that much (perhaps all) of your application is “code-compatible” with Entity Framework Core—most of your changes will be around instantiating the DbContext object and setting its connection string.

However Entity Framework Core is … different and, while your EF6 code may be compatible, the rules for processing that code have changed. You’ll need to do extensive testing to make sure that your application still works as it did before (it probably will).

The smart move, though, is to stick with your existing data access technology and defer upgrading to Entity Framework Core to a later date (assuming you ever want to—remember that “working” is a feature). If you do decide to upgrade, Microsoft has a guide that you should review.

Having said all that, regardless of your choice, you’ll need to change how you store your connection strings—see the section on the Web.config file further along.

The Easy Stuff

Some areas of your application should be relatively easy to migrate. For these areas, the effort involved will be controlled primarily by the size of your application (i.e., the more Controllers/Views/Models/Routes you have, the longer you’ll have to spend on migrating them).

Configuring Your Application

The single biggest difference between an MVC 5 and an ASP.NET Core project is how the project is configured. In ASP.NET Core 6 and later, configuration is handled entirely in the Program.cs file. The simplest solution for creating an MVC 5-compatible project in ASP.NET Core is to pick Visual Studio 2022’s “ASP.NET Core Web App (Model-View-Controller)” template when creating your ASP.NET Core project. That template also supports mixed MVC 5/Web API projects.

Telerik DevCraft can make development easier with access to UI for ASP.NET MVC and UI for ASP.NET Core, plus embedded reporting, automated testing, debugging tools, and more.

For a pure Web API project, create your new project with Visual Studio 2022’s “ASP.NET Core Web API” template.

Three tips:

• If you can give your new ASP.NET Core project the same name/namespace as your old project, you can save yourself a couple of global search-and-replaces later on.
• When working through the template wizard that creates your project, you’ll probably want to leave the HTTPS support option turned on because your app is probably using HTTPS in production.
• For Web API projects, make sure that the UseControllers option is checked when creating your project (and you might as well keep the the OpenAPI option checked, too—you’ll thank me later when someone asks for documentation on your Web service).

Controllers, Views and Models

For both MVC and Web API projects, your next step is, in File Explorer, to drag the contents of your old project’s Controllers, Views and Models folders to the equivalent folders in your new ASP.NET Core project. ASP.NET Core projects don’t use the .csproj file to track project members, so if you drop your files into your new project’s folders using File Explorer, those files will show up in Visual Studio’s Solution Explorer in your new project.

Here’s the good news: With Views, HTML Helpers still work and, if you’ve been good about not injecting third-party libraries into your Views, your View should work just fine as is. The same is true of your Models.

The news is almost as good for your Controllers (ignoring any problems with class-libraries): The bulk of your Controller code is probably completely compatible with ASP.NET Core. Where it isn’t (and also ignoring the problems I’ll discuss later), you can handle the problems with a global search and replace.

For your MVC Controllers, you’ll need to update the using statements because the base ASP.NET Core Controller class is in a different namespace than the MVC 5 Controller class. A global search and replace that swaps “using System.Web.Mvc” with “using Microsoft.AspNetCore.Mvc” should do the trick.

For your Web API controllers, you’ll need to update both the base class (from “ApiController” to “ControllerBase”) and your using statements (from “using System.Web.Http” to “using Microsoft.AspNetCore.Mvc”). Again, global search-and-replace is your friend here.

If you have Web API Controllers and are using CORS, you’ll need to make two changes to your Project.cs file. First, right after the statement that sets the builder variable, add this code to configure CORS:

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
        policy =>
        {
            policy.WithOrigins("…url…",
                                             "…url…");
        });
});

Further down in Program.cs, right after the app.UseRouting statement, add this line to enable CORS:

app.UseCors();

If you’re not happy with the default CORS policy, Microsoft has a guide for configuring a custom CORS policy.

Now would also be a good time to do another global search-and-replace to update all the using statements that reference your old project’s namespace to your new project’s namespace (unless, as I said, you’ve been clever enough that your ASP.NET Core project has the same namespace as the old one).

Routing

If you’ve been using nothing but attribute-based routing, I have more good news for you: Virtually everything still works. The only exception here is that there is no longer a separate RoutePrefix attribute in ASP.NET Core—the Route attribute takes care of that functionality. Another global search-and-replace swapping “[RoutePrefix” to “[Route” will fix that.

If you’ve been using conventional routing (i.e., defining all your routes in the RouteConfig file), the news is still pretty good: You’ll need to copy your MapRoute statements to your new project’s Program.cs file and paste them above the app.MapControllerRoute statement that you’ll find there. And then you’ll need to rewrite them.

Your existing routes will look something like this:

routes.MapRoute(  
                name: "routename",  
                url: "routetemplate",  
                defaults: new { controller = "controllername", action = "actionname", etc. }  
            );

You’ll need to convert them into the new syntax which looks like this (note the asterisks to mark the differences):

*app.MapControllerRoute*(
name: "routename",
               *pattern*: "routetemplate",
               defaults: new { controller = "controllername", action = "actionname", etc. });

Selecting the MapRoute statements you just pasted and doing some careful search-and-replaces within that selection should take care of most (maybe, all) of the required changes.

The Hard Stuff

And this is where things start getting ugly. The following changes will require some thought and effort and will be controlled by how often you use each of these features. If, for example, you’ve got the MemoryCache object wound through your application, then you’ll have to track down every place you’ve used it and rewrite that code. Sorry about that.

Web.config Configuration

The XML-based Web.config file and the ConfigurationManager object are both gone in ASP.NET Core. This isn’t a problem that’s going to be handled by search-and-replace.

By default, application settings are kept in a JSON file in your project called (somewhat obviously) appsettings.json. While you can coerce your ASP.NET Core project into using an XML configuration file, in my opinion it’s easier to convert to using the new appsettings file.

Your first step, then, is going to be converting the entries in the appSettings and connectionString sections in your Web.config file. Currently, those sections will look something like this:

<appSettings>
    <add key="…" value="…" />
    …more…
  </appSettings>
  <connectionStrings>
    <add name="db" connectionString="…" providerName="..."/>
    …more…
  </connectionStrings>

The equivalent JSON would look like the following. You should add it to the default appsettings.json file after the existing AllowedHosts line and before the file’s final closing French brace:

  "AllowedHosts": "*", 
  "key": "value",
      …more…,  
  "ConnectionStrings": {
      "db": "connectionString": "…",
     …more…
    }
}  

Next, track down any Controller that instantiates an ADO.NET *Connection or Entity Framework DbContext object. For each of those Controllers, you’ll need to extend its constructor (or add a constructor if the Controller doesn’t have one) to have it accept an IConfiguration object from ASP.NET Core’s default IoC. You can then read your connection string from that object using the IConfiguration object’s GetConnectionString method, passing the name of your connection string in appsettings.json.

That code would look something like this:

private readonly string? db;
public HomeController(…any existing parameters…, IConfiguration config)
{
   db = config.GetConnectionString("db");
}

Now you can pass that connection string to your DbContext or ADO.NET connection objects as you need it.

Similarly, you’ll need to find wherever you’re reading your appsettings section and rewrite that code. To retrieve your appsetting values, you can use the IConfiguration object’s GetValue<T> method like this:

private readonly string? setting;
public HomeController(…any existing parameters…, IConfiguration config)
{
   setting = config.GetValue<string>("key");

If you’ve been transforming your Web.config file to create development/test/production versions, you can do a similar thing by creating versions of the appsetting.json file called appsettings.development.json, appsettings.staging.json and appsettings.production.json. The version of your appsetting.*.json file that will be used by your application is based on how your application is started and is configured in your project’s launchsettings.json file.

The easiest way to work with the launchsettings file is to select your project’s Properties, then select the Properties’ Debug tab, and (in the General section) click on the “Open debug launch profiles UI” link. That will display the Launch Profiles dialog.

That dialog lets you set the ASPNETCORE_ENVIRONMENT environment variable which controls which appsettings.*.json file your application will use, based on how your project is started. The two default settings you’ll find already set up both set the environment variable to “development.” Again, Microsoft has a useful guide for configuring these settings.

Session

The Session object is no longer included by default in ASP.NET Core and you’ll need to add and configure it in your Program.cs file (this includes any configuration settings for this object that you have set in your Web.config file).

In your Program.cs file, you need this line following the statement that sets the builder variable to configure a basic Session object:

builder.services.AddSession();

To configure the Session object, you follow a common pattern for objects configured in Program.cs: The AddSession method accepts a lambda expression that it passes an options object to. You can configure the Session object by working with the options object passed to the lambda expression.

This example sets the Session object’s timeout to 10 minutes:

builder.services.AddSession(options =>
{
  options.IdleTimeout = TimeSpan.FromMinutes(10);
});

There are multiple options you can set through this options object.

Further down in Program.cs after the call to UseRouting and before the call to MapControllerRoute, add this line to enable the Session object:

app.UseSession();

Using centralized session state with SQL Server is supported through distributed caching with Microsoft.Extensions.Caching.SqlServer.

With that configuration taken care of, you can now access the Session object through the Controller’s HttpContext property through that object’s Session property (the HttpContext always has a Session property … but if you don’t configure the Session object in Program.cs, there’s nothing behind that Session property to make it work).

The ASP.NET Core Session object has a new, method-based syntax that supports a more limited set of datatypes than the .NET Framework Session object: you can only store strings, 32-bit integers and byte arrays (the relevant methods are GetString/SetString, GetInt32/SetInt32 and Get/Set). For example, storing and retrieving a string in the Session object looks like this in ASP.NET Core:

HttpContext.Session.SetString("TransactionId", "X001"); 
string? tId = HttpContext.Session.GetString("TransactionId");

You can store objects if you convert them to JSON strings (Microsoft has some sample extension methods that add generic Set and Get methods for storing objects).

Obviously, you’re not going to be able to convert from your existing Session code to this new syntax using a global search-and-replace. So, some time back, I wrote a an extension method that attaches to the new Session object and uses a custom class that mimics the old Session syntax with the ASP.NET Core Session object. If you add that class and extension method to your application, you can probably convert your existing code to ASP.NET Core using a search-and-replace.

The result isn’t pretty, though—your converted code will look something like this:

Session.AddIndexer()["TransactionId"] = "X001";

This code may prove mysterious to the next programmer who has to deal with it but, if you have a lot of Session code, it’s a hack that might save you some time during migration.

Cache

Like the Session object, the Cache object (in either its original form or as the .NET Framework MemoryCache) is no longer included by default in ASP.NET Core—you need to add and configure it in your Program.cs file (and, again, this includes setting any configuration settings you have in your Web.config file).

You just need to add this line to Program.cs after the line that sets the builder variable:

builder.services.AddMemoryCache();

As with AddSession, you can configure the Cache by passing AddMemoryCache a lambda expression that accepts the MemoryCacheOptions object. You can then use that options object to configure the cache.

This example sets the number of entries allowed in the cache to 100:

builder.Services.AddMemoryCache(opt => opt.SizeLimit = 100);

To use the Cache object in your code, you’ll need to grab it from ASP.NET Core’s IoC in the constructor for your Controller. Code like this would work:

public class Home : Controller
   {
     private IMemoryCache Cache;
     public HomeController(IMemoryCache cache)
     {
        Cache = cache;
     }

Again, as with the Session object, the syntax for storing and retrieving has changed—you’ll then need to rewrite all the code where you use the Cache to use the new syntax. The simplest methods to use are the Get and Set which, unlike the Session object’s base methods, can store any data type. Caching options are set by configuring a MemoryCacheEntryOptions object and passing it as the third parameter to the Cache’s Get method.

Typical code using the new syntax would look like this:

Cache.Set(“key”, “value”, new MemoryCacheEntryOptions()
                                                      .SetSlidingExpiration(TimeSpan.FromSeconds(3)));

Again, you’re not going to be able to handle this conversion with a search-and-replace. Plan your time accordingly.

Authorization/Authentication

The bad news here is that your existing authentication code won’t work and you’ll need to configure authentication in your Program.cs file from scratch (plus, there’s no longer an option to pick your authentication configuration as part of creating your application).

First, somewhere after the code that sets the builder variable in Program.cs, you’ll need to add this code (assuming it isn’t present) to support the anonymous user:

builder.services.AddDefaultIdentity<IdentityUser>()
                            .AddRoles<IdentityRole>();

Further down in Program.cs, after the app variable is set, you need to add this code to turn on authentication and authorization (again, assuming this code isn’t present):

app.AddAuthentication();
app.AddAuthorization();

After making those changes, you’ll still need to configure your code to work with your designated identity provider (I’m assuming that you’re no longer allowed to create your own authentication system but have to integrate with your organization’s system). As Microsoft’s guide makes clear, this is a non-trivial task.

There is one bit of good news, though: Once you have the right authentication code in Program.cs, your Authorize attributes should still work, as should your ClaimsPrincipal code.

Handlers and Modules

If you’ve used handlers or modules to customize your ASP.NET application’s processing pipeline then the nearest equivalent for you to replace them is ASP.NET Core’s middleware. The best solution is to move your code to a class with this structure:

public class <classname>
{
  private readonly RequestDelegate rd;
  public <classname>(RequestDelegate next)
  {
    rd = next;
  }
  public async Task Invoke(HttpContext ctxt)
  {
    //…work with HttpContext in handling request…
    await rd.Invoke(ctxt);

    //…work with HttpContext in handling response…

  }
}

Your class’s constructor will be passed a RequestDelegate that points to the next module in the ASP.NET Core pipeline. Your class’s Invoke method will be called when it’s your module’s turn for processing. Your Invoke method will be passed an HttpContext information with information about the current request and (later) your application’s response.

Inside your Invoke method, you should call the RequestDelegate’s Invoke method to pass control to the next module in the pipeline. Code in your class’s Invoke method before your call to rd.Invoke will normally handle requests on their way to your Controllers (a good place to reject requests or add headers). Code after the call to rd.Invoke will normally handle responses on their way back to the client (a good place to add or remove headers).

For example, code like this before the call to rd.Invoke would allow you to check for a specific authorization header and reject any requests that don’t have it:

string value = ctx.Request.Headers[HeaderNames.Authorization];
if (string.IsNullOrEmpty(value) || !value.Contains("ABC123"))
{
   ctx.Response.StatusCode = 401;
   await ctx.Response.WriteAsync("Invalid or missing contract id");
   return;
}

In code following the rd.Invoke call, you can use the RequestAborted property on the HttpContext object passed to your Invoke method to determine if the original request was rejected.

To add your new middleware to your application’s processing pipeline, return to your Program.cs file and after the line that sets the app variable, call the UseMiddleware method, specifying the type of your class. This example adds a class called CheckPhoto to the pipeline:

app.UseMiddleware<CheckPhoto>();

The higher in Program.cs that you call UseMiddleware, the earlier in the processing that your middleware will be called.

After the Migration

If you address all 10 of these areas in your .NET Framework application, then you should end up with a working ASP.NET Core application. You’re now in a position to take advantage of all the new features available in ASP.NET Core (and let me recommend the ASP.NET Core Migration course I wrote for Learning Tree International that covers all the new stuff and none of the old stuff).

In the meantime and as far as your migration effort goes: Best of luck. Hope you live.

Next up: Modern Cross-Platform ASP.NET Core Controls.

Announcing the much-awaited R2 2023 update of Telerik UI for Blazor, ASP.NET Core and MVC and ASP.NET AJAX!

In this blog post, we’ll delve into the exciting new features and enhancements that will elevate your web development projects to a whole new level. Get ready to unlock the full potential of the latest Telerik UI release.

Feel free to jump to your favorite section:

• Common Release Items
• Telerik UI for Blazor
• Telerik UI for ASP.NET Core/MVC
• Telerik UI for ASP.NET AJAX
• Webinar details for June 8

Common Release Items

Font Icons to SVG Icons

In the R2 2023 update, a significant change was introduced to the default icon type in Telerik and Kendo UI libraries and components. We have shifted from font icons to SVG icons as part of our continuous efforts to improve product quality  and theming mechanisms, and to ensure compliance with Content Security Policy (CSP). This transition allows us to enhance the visual experience and align with evolving web standards.

For more information, be sure to check out the dedicated icon blog post on this topic. It’s packed with valuable insights to help you learn more.

Compatibility with .NET 8 Preview 4

The Telerik UI for Blazor and UI ASP.NET Core libraries are now compatible with Microsoft’s .NET 8 preview 4, released in mid-March. This exciting development enables developers to leverage the cutting-edge features and performance enhancements of .NET 8 while harnessing the robust UI components offered by Telerik.

Design System Documentation

An exciting addition in R2 2023 is the launch of a design system documentation site dedicated to the Telerik and Kendo UI libraries. This site provides a comprehensive collection of design assets, frontend documentation and valuable resources. Initially, we have included documentation for nearly 20 essential components. Our goal is to continuously expand this site, empowering you with the necessary tools to create visually impressive digital experiences and design systems using the robust capabilities of Telerik and Kendo UI.

The design system documentation site now includes the initial version of the CSS Utils package, a convenient library of HTML classes tailored for CSS properties. This package allows you to effortlessly style page layouts without writing extensive CSS code. For example, adding a border radius is as simple as applying the .k-rounded-md class to the element.

The CSS Utils package is integrated within our Telerik and Kendo UI themes. When you install any of our themes, you automatically get the CSS Utils package. However, if you only require the Utils package for page layout styling, you can install it separately.

We have plans to expand the package’s capabilities, including adding a color system and typography options, and expanding the sizing map. Stay tuned for future updates!

LESS Themes Deprecation

In accordance with the previous announcement made in January 2022, starting from R1 2023, we will discontinue support for LESS themes in our Telerik and Kendo UI products. We recommend that any customers currently using LESS themes transition to an equivalent theme based on SASS. For detailed information on the reasons behind this change and its potential impact on you, please refer to titled “Future Plans for the Telerik and Kendo UI LESS Themes”.

ThemeBuilder Pro Support

ThemeBuilder Pro is here with exciting updates and new features for enhanced development. This release introduces full customization support for Kendo UI (jQuery) and Telerik UI (ASP.NET Core/MVC), giving you complete control over your web application’s appearance. You can now seamlessly integrate with Figma for smooth collaboration between design and development teams.

The automatic migration feature ensures a hassle-free transition to the latest theme version. Improved variable management, SSO support, and granular project permissions further empower developers and designers. ThemeBuilder Pro is dedicated to providing powerful tools and capabilities for an exceptional development experience.

Read more in the dedicated ThemeBuilder blog post.

Web Installer FIPS Compliance

Our recent upgrade to the Web installer (Telerik Control Panel), includes support for Federal Information Processing Standards (FIPS) compliance. This improvement is designed to provide our clients with enhanced security, meeting the high standards required by industries and government agencies.

By implementing specific cryptographic algorithms and security protocols approved by the National Institute of Standards and Technology (NIST), FIPS compliance ensures the protection, integrity and confidentiality of your valuable data. We can now deliver a more secure installation process, giving you peace of mind and confidence in the safety of your information.

Enhanced Forms Rendering

Telerik UI brings a fresh and modernized approach to forms rendering and layout. With this latest update, we have revamped the forms rendering and layout in multiple UI components, including the Data Grid, TreeList, Scheduler, DateTimePicker and more. 

The enhanced forms rendering delivers a seamless and visually appealing experience to your users. By incorporating modern design principles and best practices, we have focused on improving the overall aesthetics and usability of forms within these components.

Telerik UI for Blazor

Stay ahead of the curve with our latest release of Telerik UI for Blazor, empowering you to create robust and visually stunning applications.

Introducing Blazor Hybrid: Uniting Web and Native Client Development

We’re happy to announce the official support for Blazor Hybrid in our upcoming R2 2023 release. Now, you can effortlessly create mobile and desktop applications while incorporating Telerik UI for Blazor components into your hybrid apps. Blazor Hybrid apps utilize HTML, CSS, C# and JavaScript, allowing for code sharing between web, desktop and mobile clients. Additionally, Blazor applications can be adapted for use with .NET MAUI, enabling integration with desktop and mobile platforms.

Explore the following materials to learn how you can seamlessly integrate Telerik UI for Blazor into your hybrid apps and take your development to the next level:

• Telerik UI: Blazor Hybrid
• eBook: Blazor Hybrid and Web in One Solution
• Blazor Power Hour: A look at BlazorHybrid
• The Blazor Power Hour: Testing Blazor Hybrid
• Telerik Blazor UI in Native Apps

New Blazor PivotGrid Component

We’re excited to announce the Telerik UI for Blazor PivotGrid component—an Excel-like experience for effortlessly processing, aggregating, visualizing and analyzing tabular and multi-dimensional data. This feature-rich UI component supports both local and remote data binding, along with essential functionalities like filtering, sorting and a configuration panel. Let’s explore the key features:

Organize and Summarize Pivot Data:

• Deliver an Excel-like experience by processing and analyzing tabular and multi-dimensional data.
• Supports data binding to an OLAP service, enabling interactive analysis.
• Offers extensive customization options for a tailored user experience.

Local and Remote Binding to OLAP Data Sources:

• Bind data to a local source or remote OLAP service via HTTP.
• Access aggregated and organized data from multidimensional structures (cubes).

Configuration Panel:

• Intuitive and customizable configuration panel like Microsoft Excel.
• Allows users to modify fields, apply filters and define pivot fields.
• Highly adaptable to match design needs, including custom component integration.

Sorting:

• Enable single or multiple column sorting in ascending or descending order.
• Supports sorting various data types.

Filtering:

• Provide flexible data display by enabling filtering based on specific criteria.
• Swift response with various filtering options, operators and predefined fields.
• Supports filtering via XMLA access to the OLAP Cube service.

See a demo of the UI for Blazor PivotGrid component.

New Blazor DropZone Component

Introducing the addition of the DropZone component to our Blazor toolkit. This component offers a user-friendly way for file uploads in Blazor applications. Users can easily drag and drop files onto a designated area on their screen, and the files will be automatically transferred to the file select/upload feature. Say goodbye to complicated file uploads and enjoy the simplicity and convenience of our new DropZone component.

See a demo of the UI for Blazor DropZone component.

Right-to-Left Support

We are happy to announce that Telerik UI for Blazor components now support right-to-left (RTL) languages! This feature is available in the latest 4.2.0 release of Telerik UI for Blazor and brings a range of benefits to developers building applications for audiences that read and write in RTL languages.

With the new RTL support, developers can easily create applications that cater to the needs of RTL language users, without having to manually modify the layout or styles. This means that components like grids, charts and dropdowns will automatically adjust their layout to support RTL languages. Additionally, text alignment, text direction and other layout features will be optimized for RTL languages, making it easier for users to navigate and interact with the application.

The RTL support in UI for Blazor can be turned on with a single property EnableRtl once at the TelerikRootComponent and that will let all of the components take advantage of the feature. More details and specifics for popups can be found in the UI for Blazor RTL support documentation article.

Enhancements in the FileSelect & Upload UI Components

Built-in Drag and Drop
The FileSelect and Upload components now have built-in drag-and-drop file support, courtesy of the new DropZone component. Enjoy the convenience of seamlessly dragging and dropping files, right from the start.

See a demo of the UI for Blazor FileSelect drag and drop support.

Data Grid & TreeList Enhacements

The R2 2023 release of Telerik UI for Blazor brings exciting updates to the DataGrid and TreeList components. These enhancements include new customization options and expanded configuration capabilities. Let’s dive into the key highlights:

Pager Template
Customize the appearance of pagers with ease. Utilize the Pager Template to replace the default pager with your own custom markup, tailored to your clients’ needs.

See how to customize the UI for Blazor TreeList component pager.

Popup Edit Form Template
Elevate the data entry experience by leveraging the Popup Edit Form Template. Enable GridEditMode.Popup for the Data Grid and TreeListEditMode.Popup for the TreeList to create custom content within the edit form. Customize form fields, validation rules and more.

DataGrid, TreeList, TreeView Performance Bump

We are delighted to share that our Blazor Data Grid, TreeList and TreeView components have undergone a remarkable performance enhancement. In the latest release, we have significantly minimized the re-rendering of content cells, ensuring it occurs only when absolutely required. As a result, our tests have shown a significant 40% reduction in component refresh time.

Although template cells will continue to re-render since they can contain arbitrary markup, we are confident that this improvement will have a tangible impact on the overall performance of the Blazor component’s usability.

Chart Enhancements

The latest release of Telerik UI for Blazor brings exciting enhancements to the Charts component, offering improved customization options and new features. Let’s explore the key additions briefly.

Position Configuration
Users can now position the Stock Chart navigator on top, providing a fresh appearance option alongside the existing bottom position.

See the Telerik UI for Blazor StockChart navigator demo.

Chart and StockChart Subtitle
The new subtitle property enables developers to add secondary or explanatory subtitles below the main chart title and style them differently for enhanced customization.

See the Telerik UI for Blazor Subtitle Property in Charts demo.

Format and Template Parameters for Axes in Blazor StockChart
The introduction of format and template options allows effortless customization of labels for ValueAxis, CategoryAxis and NavigatorCategoryAxis in the Blazor StockChart.

These enhancements in Telerik UI for Blazor Charts offer developers greater control over the appearance and functionality of their charts, enabling them to create visually stunning and interactive experiences.

Globalization and Localization

As part of this update, we are adding a new label to the components, displaying the text: “Drag and drop files here to upload.” To support localization and globalization, two new resource keys have been introduced: Upload_DropZoneHint and FileSelect_DropZoneHint.

Custom Content in SelectFiles Button

In this release, we’ve added templating support for the SelectFiles button in FileSelect and Upload components. Now clients can fully customize the button’s appearance, including the option to render icons, providing more flexibility and visual appeal.

FileSelect New Methods

The latest release of the Blazor FileSelect component introduces two new methods: ClearFiles and OpenSelectFilesDialog. ClearFiles enables removing files from the list programmatically, providing more control over the selection process. OpenSelectFilesDialog allows for opening the browser file selection dialog with a single API call.

Exposing Selected Items in File Manager

We have enhanced the Telerik UI for Blazor File Manager component to provide you with more flexibility in customization. With the latest update, the Blazor FileManager component now supports two-way binding of the selected items.

See the Telerik UI for Blazor FileManager expose selected items demo.

Window: Support for Footer

The footer section of the Telerik UI for Blazor Window component can now be customized according to your needs. Take advantage of the following parameters to fully utilize the Window footer:

• The WindowFooter parameter adds a new section at the bottom of the window.
• The FooterLayoutAlign parameter allows you to apply different styles to the buttons in the footer. Select from the available options (Start, Center, End and Stretched) and observe how they enhance the appearance of your application.

Combine Autogenerated & Custom Fields in the Form Component

This enhanced feature within the UI for Blazor Form component enables the simultaneous utilization of autogenerated form items alongside manually defined ones. It allows developers to make use of the autogenerated fields for the majority of their model fields, while still providing the flexibility to customize specific fields as needed.

See a demo of autogenerated and custom fields in the UI for Blazor Form component.

Customize the Map Component Marker Appearance

The Blazor Map component’s user interface (UI) now includes a templating functionality that simplifies the process of customizing the appearance of markers on the map. Developers have the ability to define their own HTML markup to style the markers according to their preferences.

See how to customize the UI for Blazor Map component marker.

Visible Parameter TileLayout Component Items

We have exposed a new parameter named Visible to control whether a given TileLayout item is visible or not.

See a demo of the items visibility in the UI for Blazor TileLayout component.

Print Method in the PDF Viewer Component

The UI for Blazor PDFViewer component now provides the ability to print the current document programmatically. By introducing the Print() method, developers now have a straightforward means to incorporate printing functionality into their Blazor applications that utilize the PDF Viewer component.

Add ThemeColor Parameter for Window & Dialog

A new parameter named ThemeColor has been added to the UI for Blazor Window and Dialog components. This feature enables easy customization of the title bar color for both components. It provides a range of selectable values such as “Primary,” “Dark,” “Light” or even an empty option for no color.

See an example the UI for Blazor Dialog ThemeColor options.

Refresh Method for All Select-Type Components

In this latest release, we are introducing a new method called Refresh to enhance our select-type UI components, including AutoComplete, ComboBox, DropDownList, MultiColumnComboBox and MultiSelect. The method allows you to easily refresh the popup of the selects and comes in handy when the popup remains open, but changes need to be applied.

Deprecation of .NET 3 and .NET 5 in Telerik UI for Blazor

Starting from R1 2024, we will no longer provide support for .NET 3 and .NET 5 in Telerik UI for Blazor. To ensure uninterrupted support and leverage the latest advancements, we highly recommend planning and initiating the migration of your projects to .NET 6 or later.

This strategic decision allows us to stay ahead of the curve, providing you with a robust and future-proof component library that keeps pace with the rapid advancements in web application development. Stay tuned for exciting updates as we embark on this journey together!

Telerik UI for ASP.NET Core and MVC

Discover the latest features and elevate your development experience with Telerik UI for ASP.NET Core and MVC!

New Template Component (CSP-Compatible)

Introducing the Template component in the Telerik UI for ASP.NET Core and MVC UI libraries! This new feature can be incorporated it into UI controls, which require complex layout templates like the Grid or the TreeList. Deliver smooth integration and strengthen security of your applications.

HTML and Tag Helpers
The Telerik UI for ASP.NET Core Template component provides support for both HTML and Tag Helper modes. The HTML Helper Template introduces these two options:

• AddComponent(), which is a method accepting any Telerik UI for ASP.NET Core HTML Helper component declaration
• AddHtml(), which is a method that accepts HTML code

If you’re leveraging the Tag Helper mode, you can easily integrate the UI control and HTML code within the <{parentTagName}-{templateOption}> tag.

See the documentation for the Telerik UI for ASP.NET Core Template component or the Telerik UI for ASP.NET MVC Template component.

DataGrid Enhancements

The latest release of Telerik UI for ASP.NET Core and MVC brings exciting enhancements to the DataGrid component, offering improved usability options and new features.

New Row Resizing Feature
Introducing the highly anticipated feature in the latest release of our Data Grid component: row resizing! Now, end users can resize rows and adjust their heights effortlessly. This new functionality allows for better visibility of cells with larger values while maintaining the integrity of the remaining rows in the Data Grid. Stay in control of your data presentation and provide a seamless user experience with the row resizing feature.

Compact Data Grid Mode
Introducing the Compact Grid, a new feature in the Telerik UI for ASP.NET Core and MVC Grid components! By utilizing the Size parameter configuration, the Compact Grid optimizes screen space by reducing padding and margins, resulting in a condensed and efficient data table. Now you can display more information at once, maximizing productivity.

The Compact Grid seamlessly integrates with our Default, Bootstrap, Material and Fluent themes, providing flexibility in design choices. Experience the power of data density with the Compact Grid feature.

See the demo for Telerik UI for ASP.NET Core Compact Grid or Telerik UI for ASP.NET MVC Compact Grid demo.

Scheduler Enhancements

Highlight Ongoing Events
We are pleased to announce the addition of the “highlight current events” functionality to our Scheduler component! Elevate your application’s user experience by easily indicating ongoing events in a visually distinct manner. With the simple configuration method of OngoingEvents, enabling this feature and customizing the refresh interval is effortless.

See the Telerik UI for ASP.NET Core Scheduler highlight ongoing events demo or the Telerik UI for ASP.NET MVC Scheduler highlight ongoing events demo.

Google Calendar Integration Demo
Many of you have been curious about how to incorporate our Scheduler component into Google Calendar, so we have prepared a demonstration. To assist you in implementing this integration, we have created a comprehensive how-to article and a sample project.

DateTimePicker Enhancement: StartTime and EndTime Options

R2 2023 welcomes the enhanced DateTimePicker component in Telerik UI for ASP.NET Core and MVC! Effortlessly configure start and end date/time values and easily manage time ranges.

See the start and end times demo for Telerik UI for ASP.NET Core DateTimePicker or for Telerik UI for ASP.NET MVC DateTimePicker.

Data Editing UX: Enhancements

We are delighted to introduce improved date editing options in the Telerik UI for ASP.NET Core DateInput component. These options offer greater flexibility and control when configuring the behavior of the component during date editing. Take advantage of the following configuration options:

• AutoSwitchParts: Automatically moves to the next segment after entering a valid value.
• AutoSwitchKeys: Configures a custom key to trigger moving to the next segment.
• EnableMouseWheel: Increases or decreases segment values using the mouse wheel.
• AutoCorrect: Automatically corrects the value if it falls out of range.
• Steps: Defines the increment and decrement steps for each available date segment.

See the editing demo for Telerik UI for ASP.NET Core DateInput or for Telerik UI for ASP.NET MVC DateInput.

Gantt: Popup Edit Form Improvements

In our latest release, we’ve made several updates to enhance the editing and customization capabilities of our Gantt UI component. Now you can fine-tune every aspect of the Gantt to meet your users’ preferences. Notable changes include:

• Reorganized Gantt edit popup form with tabs for easier navigation and editing of different sections.
• Expanded capabilities to configure and edit all data fields present in the Gantt.
• Streamlined editing of parent tasks directly from the task’s edit form, eliminating the need for separate sections.
• Integrated dependencies editing into the edit form, eliminating the need for a separate popup window.
• A new “Other” tab in the Gantt edit popup for editing custom fields, providing a cleaner and more organized experience.

See an example of the improved Gantt editing experience:

• Telerik UI for ASP.NET Core Gantt component demo
• Telerik UI for ASP.NET MVC Gantt component demo

Enhanced Demos with Adaptive Behavior

In the R2 2023 release, we focused on improving the UI components for ASP.NET Core and MVC to be more adaptable and responsive. Along with introducing new built-in settings, we made sure to showcase the adaptiveness of the components through our demos.

Telerik UI for ASP.NET AJAX

We are thrilled to share the new components and enhancements in Telerik UI for ASP.NET AJAX R2 2023 release.

New ArcGauge and CircularGauge Components

Easily represent value ranges on an arc shape using the powerful Telerik UI for ASP.NET AJAX ArcGauge component. This data visualization tool allows you to showcase progress toward a goal by defining minimum and maximum angles, ranging from 0 to 360 degrees.

Or enhance your data visualization with the Telerik UI for ASP.NET AJAX CircularGauge component. This versatile AJAX control allows you to represent values within a full-scale, 360-degree arc. It offers a compact and intuitive solution that seamlessly integrates into any web application.

Explore the features of these component through these demos:

1. Center template: Customize the appearance and behavior of the center label within the arc/circle using templates.
2. Scale customization: Tailor the visual properties of the component to meet your specific application requirements.
3. Color ranges: Assign different fill colors to values based on their significance, enhancing the meaning of the visualization.

See the Telerik UI for ASP.NET AJAX ArcGauge and CircularGauge in action.

Fixes and Improvements

In this release, we have made several enhancements in the Ajax, AutoCompleteBox, Button, Calendar, Captcha, Combobox, Editor, ListView, Signature and Treeview components. These improvements include adding support for the latest Chrome browser on iOS mobile devices and updating the W3C validator in the XHTML Validator dialog of RadEditor to the latest version.

Single Line RadAutoCompleteBox
Responding to customer feedback, we have introduced an additional mode for the RadAutoComplete component. Alongside the multiline option, you can now utilize the SingleLineEntries property to configure the AutoComplete feature. This new setting enables the display of all input provided in a single line input field with a horizontal scroll.

See a demo of the single line mode of the UI for ASP.NET AJAX AutoComplete component.

Integration demo for RadEditor and RadSignature
Take a look at the Signature Dialog demo to understand how you can incorporate handwritten signatures into a WYSIWYG (what you see is what you get) editor. This demo presents a signature pad that allows users to draw their signatures. Once users finish creating their signature, they can click on the “Store on Server as PNG and Insert” button. This action saves the signature as a PNG file and seamlessly inserts the image into the editor.

End of .NET 3.5-4.0 Support

Please note that R2 2023 SP1 on March 15 is the last version to provide support and assemblies for .NET Framework 3.5 and 4.0.

As of R2 2023, we will continue shipping assemblies compatible with .NET 4.5-4.8 versions of the framework. You can read more at: End of .NET Framework 3.5 and 4.0 Support for Telerik UI for ASP.NET AJAX.

Progress Telerik .NET Web, Desktop & Mobile Products R2 2023 Release Webinar | June 8

Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for .NET MAUI and UI for Xamarin and ThemeBuilder.

Save Your Seat

Join Us on Twitch

Join the  Livestream Release Party on release day, June 7, 11 a.m. – 12:30 p.m. ET to hear the release news and hang out with dev friends.

The live webinars and Twitch sessions are a great opportunity for you to ask questions before and during the webinars. We’ll be waiting to hear from you on Twitter—just use the #heyTelerik and #heyKendoUI hashtags. Another great option is the live chat during our release session on CodeItLive, our Twitch channel.

In our daily routines, we are resolving different challenges. For the basic ones, we can easily decide how to act. However, from time to time, we do face more complex ones. What’s the best approach to handle those? Divide them into a couple of smaller tasks.

A big project implies difficult execution, but breaking it down into smaller, more digestible phases results in simplification. The Gantt Chart from Progress Telerik UI for ASP.NET MVC is the perfect tool for doing exactly that. It enables you to identify smaller parts of a project and plan their execution in timeframes. Furthermore, splitting the amount of time needed to finish the work and aligning it to the different phases ensures the due date is met without any delays.

The ASP.NET MVC Gantt control is part of Telerik UI for ASP.NET MVC, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The Gantt is a server-side wrapper for the Kendo UI for jQuery Gantt component and comes in the form of a HtmlHelper.

We Are Part of a Team

Think about a time when you were given a complex task. Let’s say that you had a software project to deliver, and the task was to implement code for it. What would have been better and more effective? To execute the project as a team.

Assigning parts of the whole implementation to different developers not only improves the work process but also promotes diversity and creative thinking. And calculating the needed time to execute the smaller tasks will provide the whole picture on how the process is happening.

Henry Ford said, “If everyone is moving forward together, then success takes care of itself.” But don’t take our word on that—check out the Telerik UI for ASP.NET MVC Gantt Chart demo, which represents exactly the project management capability of the component.

How to Achieve the Desired Results with the Gantt Component?

Based on the above-mentioned use case, we can conclude that the Telerik UI for ASP.NET MVC Gantt is commonly used in project management as it provides an easy and comprehensive way of showing tasks or events displayed against time. Leveraging the Gantt chart, users can distinguish at a glance:

• What the various activities are
• When each activity begins and ends
• For how long each activity is scheduled to last
• Where activities overlap with other activities, and by how much

Here’s a snippet which we call the declaration of the Gantt component. It allows you to configure the layout of the Gantt chart and build a hierarchy of parent and children tasks, displayed in the left-hand side of the Telerik UI for ASP.NET MVC Gantt component.

@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>() 
  .Name("gantt") 
  .Columns(columns => 
  { 
    columns.Bound(c => c.Title).Title("Task").Editable(true).Sortable(true).Width(200); 
    columns.Bound(c => c.Start).Title("Actual Start Date").Format("{0:M/d/yyyy}").Width(85); 
    columns.Bound(c => c.End).Title("Actual End Date").Format("{0:M/d/yyyy}").Width(85); 
    columns.Bound(c => c.PlannedStart).Title("Planned Start Date").Format("{0:M/d/yyyy}").Width(85); 
    columns.Bound(c => c.PlannedEnd).Title("Planned End Date").Format("{0:M/d/yyyy}").Width(85); 
    columns.Bound(c => c.TeamLead).Title("Team Lead").Format("{0:M/d/yyyy}").Width(65).TemplateId("teamlead-template"); 
  }) 
  .Views(views => 
  { 
    views.DayView(); 
    views.WeekView(weekView => weekView.Selected(true)); 
    views.MonthView(); 
  }) 
  .ShowPlannedTasks(true) 
  .Editable(true) 
  .Resizable(true) 
  .Height(590) 
  .TaskTemplateId("task-template") 
  .ListWidth("45%") 
  .ShowWorkHours(false) 
  .ShowWorkDays(false) 
  .Snap(false) 
  .DataSource(d => d 
    .Model(m => 
    { 
      m.Id(f => f.TaskID); 
      m.ParentId(f => f.ParentID); 
      m.OrderId(f => f.OrderId); 
      m.Field(f => f.Expanded).DefaultValue(true); 
    }) 
    .Read("Read_Tasks", "Home") 
    .Update("Update_Tasks", "Home") 
  ) 
  .DependenciesDataSource(d => d 
    .Model(m => 
    { 
      m.Id(f => f.DependencyID); 
      m.PredecessorId(f => f.PredecessorID); 
      m.SuccessorId(f => f.SuccessorID); 
      m.Type(f => f.Type); 
    }) 
    .Read("Read_Dependencies", "Home") 
    .Create("Create_Dependency", "Home") 
    .Destroy("Destroy_Dependency", "Home") 
  ) 
) 

Let’s highlight and pay a little bit more attention to this particular part of the snippet:

.Views(views =>
{
  views.DayView();
  views.WeekView(weekView => weekView.Selected(true));
  views.MonthView();

It will allow you to display the flow choosing a specific time view—day, week or month. This capability is available through the Gantt Chart integration with the Telerik UI for ASP.NET MVC ToolBar component.

Feel free to also apply custom task templates to ensure a better user experience. The Client API and the Server API provide many configuration options, along with dozens of methods and events.

The snippet below shows the configuration of the team lead column within the project management chart as well as the task templates:

<script id="task-template" type="text/x-kendo-template"> 
    <div class="template" style="display: flex;"> 
        <span style="padding-right: 8px;">#= TeamLead #</span> 
        <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%">#= (100 * parseFloat(percentComplete)) #%</div> 
    </div> 
</script> 
 
<script id="teamlead-template" type="text/x-kendo-template"> 
    <div class="template"> 
        <img class="resource-img" src="../content/#:ImageID#.jpg"/> 
<span>#= TeamLead #</span> 
    </div> 
</script> 

In the right-hand side of the Gantt component, you can visualize every chunk of the project management process with its own private settings as a start and end time. You can also represent the percentage that indicates the progress of the task completion.

Below you’ll find a snippet on how to create a TaskViewModel in the Controller:

new TaskViewModel
{
  TaskID = Guid.Parse("c57c36ff-0695-45af-8be5-15ad6547311d"),
  Title = "Software validation, research and implementation",
  ParentID = null,
  OrderId = 0,
  Start = new DateTime(2020, 6, 1, 3, 0, 0),
  End = new DateTime(2020, 6, 18, 3, 0, 0),
  PlannedStart = new DateTime(2020, 6, 1, 3, 0, 0),
  PlannedEnd = new DateTime(2020, 6, 12, 3, 0, 0),
  PercentComplete = 0.43M,
  Summary = true,
  Expanded = true,
  TeamLead = "Darrel Solis",
  ImageID = 1,
}

Test the Flexibility of the Gantt Component

There are many reasons why to apply custom tools to a UI component like the Gantt. The biggest is, of course, the customization enabling you to align the look and feel of the component to your personal or brand needs.

Adding custom tools to the Gannt component also allows you to control the presentation of the data (tasks, events, time duration, etc.) and the overall design of the charts based on your preferences or style guides, including dark or light modes, different button colors and many more.

There are numerous examples of custom tools added to a Gantt. Check out this example to see how to color a hovered item.

If you’re interested in learning more about the Gantt Chart’s custom scenarios and implementations, feel free to visit the following libraries:

• ASP.NET MVC articles
• Kendo UI for jQuery articles
• ASP.NET Core articles

Try out the Telerik UI for ASP.NET MVC Gantt Chart Today

Want to start taking advantage of the ASP.NET MVC Gantt, or any of the other 110+ ready-made components, like the Grid or the Scheduler? Start a free trial today and experience for yourself that building rich interactive applications for half the time is just a click away.

Try Telerik UI for ASP.NET MVC

Sharing Is Caring

Once you try the Gantt Chart component, don’t forget to share your experience and ideas in the comments sections below or by visiting the Telerik UI for ASP.NET MVC Feedback portal. Your input makes a difference.

For the Curious Ones: History of Gantt

The first Gantt chart was devised in the mid-1890s by Karol Adamiecki, a Polish engineer who ran a steelwork in southern Poland and became interested in management ideas and techniques.

15 years after Adamiecki, Henry Gantt, an American engineer and project management consultant, devised his own version of the chart and it was exactly this version that became widely known and popular in western countries.

Consequently, it was Henry Gantt whose name was to become associated with charts of this type.

With a grid of any length, if users don’t have the ability to filter the items down to the one they’re actually interested in … well, then, your page is going to fail. A grid displaying more than a half dozen items is only useful if it lets users find the items they need.

The thing is, if the Progress Telerik UI for ASP.NET MVC Grid has any failing, it’s that its filtering options provide so much functionality that it’s a little intimidating to users.

More specifically, while providing every filtering option your user’s might need, the default settings don’t focus on what your users need in this UI. Fortunately, the Grid comes with all the options you need to create a filtering experience focused on your users’ actual needs.

By the way, calling this component the “ASP.NET MVC Grid” is a bit of a misnomer—the Grid works as well in Razor Pages as it does in MVC Views. Here’s the markup for a grid added to an application’s default Index.cshtml Razor Page, for example (and it’s almost identical to what you’d use in an MVC View):

<kendo-grid name="products">
    <datasource name="productsDS" type="DataSourceTagHelperType.Ajax">
        <transport>
            <read url='@Url.Page("/Index","Read")' data="dataFunction" />
        </transport>
        <schema>
            <model>
                <fields>
                    <field name="TotalQuantity" type="number"></field>
                    <field name="LastDelivery" type="date"></field>
                    <field name="InStock" type="boolean"></field>
                </fields>
            </model>
        </schema>
    </datasource>    
    <columns>
        <column field="ProductId" title="Id" width="100" />
        <column field="ProductName" title="Name" width="240"/>
        <column field="LastDelivery" format="{0:MMM-dd}" title="Last Delivery" width="150" />
        <column field="InStock" title="In Stock" width="150" />
        <column field="TotalQuantity" title="Quantity on Hand" width="150" />       
    </columns>
    <filterable enabled="true" mode="row" />
</kendo-grid>

From the filtering point of view, the interesting element in that markup is the last one: The filterable element which configures all the column’s filter menus into something a little more user friendly by setting the Grid’s filter mode to “row.”

While the filterable element is your first step in customizing the Grid’s filtering functionality, the other sections in the Grid’s markup are also important when customizing the Grid’s filtering capabilities.

datasource

The read element inside the transport element specifies where the data is to be fetched from after the Grid is downloaded to the browser. The transport element also supports update/delete/insert requests so all its calls are sent to the data source as POST requests.

This is also the only area that reflects that the Grid is on a Razor Page. I’m setting the read option to a URL that points to a handler method in a Razor Page, using Url.Page (I just have to pass the page name and the handler name).

schema

This element lets you specify the data type for the properties of the complex object that your grid is listing (in my case, that’s a Product object). By default, all of the object’s properties are assumed to be of type string so I only have to provide types for those properties that aren’t string: TotalQuantity (a number), LastDelivery (a date) and InStock (a Boolean).

columns

This element defines the columns in the Grid, specifying the property on the object to be displayed and some additional options (e.g., the title for the column, a format string for the data, and so on). While your Grid is displaying an object, filtering is organized around the Grid’s columns.

Code

For the record, here’s the C# code from my page’s code-behind file. The OnGet method is automatically called when the page is first requested and loads a collection of Product objects named ps.

The OnPostRead method called when the grid is displayed in the browser, using that URL I set up in the grid’s transport section. Since the Grid’s calls are always POST requests and I specified my handler name as “Read,” my method has to be called OnPostRead.

The example returns the JSON result of converting my ps List into something the grid can use:

public class IndexModel : PageModel
{
   public static IList<Product> ps;

   public async void OnGet()
   {
      if ( ps == null)
      {
          ProductRepo pr = new ProductRepo();
          ps = await pr.GetAllAsync();
      }
   }

   public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
   {
          return new JsonResult(ps.ToDataSourceResult(request));
   }
}

By the way, I could have set my grid up to call any web service I wanted, but I like the way Razor Pages bundles everything up into a single package. I could also just as easily be using an Entity Framework context and table to build my grid’s list of objects.

Configuring Filtering

If the first step in customizing filtering is adding the filterable element, the second step is specifying the data types in the schema section.

Because I’ve declared my LastDelivery property as a date in my schema section, the Grid provides a calendar control on the LastDelivery column to let the user select the data to filter on. Similarly, by declaring my InStock property as a Boolean, the user gets two radio buttons at the top of the InStock column to use to filter rows. And, finally, because my TotalQuantity is flagged as a number, that column gets a spinner for selecting numeric values.

Thanks to my schema settings, even the filter menus on each column that pick the comparison operators are configured to match the data type of the property the column is displaying:

By default, the grid does all its filtering on the server. That can be great if you want to ensure you’re your users are always looking at the most recent data or if you want to take advantage of faster processing on your server. However, in my example, because I’m caching data after my initial get and have only a small number of products to display, I don’t need the additional power of server-side filtering.

It makes sense, then, in this example to turn off server-side filtering (other than the initial data fetch) and eliminate repeated trips to the server when the user filters the grid rows. That will not only give my user a better/faster experience, it also reduces demand on my server-side resources. To implement client-side filtering, I just need to add the server-operation attribute to my grid’s datasource tag and set it to false:

<datasource  type="DataSourceTagHelperType.Ajax" server-operation="false">

Focusing on the User’s Needs

Even with these changes, you may be giving your users more filtering power they need or want. Often all the user wants to do is find the rows whose columns match specific values (this is especially true with columns containing string values). If that’s the case, this UI may make more sense:

Implementing that filtering UI just requires two steps. First, you need to update the filterable element on your grid to use menu (rather than row) filtering:

<filterable enabled="true" mode="menu">

Second, you need to expand the column elements where you want to provide this simplified experience and give those columns their own filterable element. In those column’s filterable elements, you just need to set the filterable element’s multi property to true, like this:

<column field="ProductName" title="Name" width="240">
     <filterable multi="true"/>
</column>

Now, for most columns containing string data you’ve probably given the user the filtering experience they want. This does assume the column has a reasonable number of unique values so the list of options doesn’t, itself, become overwhelming. Making this change is also a good choice for Boolean column where the user will get, at most, a choice between three values (true, false, “is empty”) and will never have an overwhelming list of options.

Dealing with Dates and Numbers

For date and numeric columns, however, users probably want more options—they’ll want to not only filter by exact matches but also for rows with dates before or after some specific date, or for numbers greater than or less than some value.

You can configure the Grid to give this experience which is probably a better match to users’ needs:

To do that globally, you just need to set the grid’s filterable element’s extra attribute to false:

<filterable enabled="true" extra="false"/>

If doing that globally seems a little extreme to you, you can use each column’s filterable element to configure columns individually. This configuration, for example, turns back on the full, default filtering option for the LastDelivery column alone:

<column field="LastDelivery" format="{0:MMM-dd}" title="Last Delivery" width="150" >
     <filterable enabled="true" extra="true"/>
</column>    

There’s a middle ground here, though, between the focused and the full filtering experience: By using the operators element, you can give the user just the comparison operators they need (and also configure the text displayed for each operator).

This example defines the LastDelivery date column as having three comparison operators—“Deliveries on” (equals), “Deliveries before” (less than) and “Deliveries after” (greater than):

<column field="LastDelivery" format="{0:MMM-dd}" title="Last Delivery" width="150" >
            <filterable extra="false" >
                <operators>
                    <date eq="Deliveries on"
                                gt="Deliveries after"
                                 lt="Deliveries before" />
                </operators>
            </filterable>
        </column>

Now the user gets a focused set of filtering options that reflect their needs:

You also can configure comparison operators globally using the Grid’s filterable element instead of the column filterable element. This would allow you to configure the comparison operators for all your date columns, for example. You can also configure comparison operators for strings, numbers and enums using the corresponding elements inside the operators element. You could then use the column’s filterable element to override those settings on individual columns where necessary.

Configuring the Options List

There’s one more step available to you to provide a more focused experience for your users: You can provide a customized list of options for the user to compare to. For example, in the Total Quantity column, users are probably just interested in comparing the quantity on hand (QoH) to specific thresholds. The typical question is probably something like: “Is the QoH greater than/less than 0, 100 or 200 items?”

The first step in providing a list of comparison values is to add the filter-ui-handler attribute to the column’s filterable element. This attribute needs to point to a JavaScript function in your page that will load your filter’s options list with values.

This example, in addition to specifying just the two comparison operators the user needs, references a function named quantityOptions that will build the list of QoH thresholds:

<column field="TotalQuantity" title="Quantity on Hand" width="150"> 
         <filterable enabled="true" extra="false" filter-ui-handler="quantityOptions">
                <operators>
                    <number gt="QoH greater than"
                                      lt="Qoh less than" />
                </operators>
          </filterable>
</column>                

Your next step is to write that function. The function needs to accept a parameter (I’ve called it columnFilter) and I’ve added a Kendo UI dropdown list to that parameter. In that dropdown list’s transport section, I’ve set up a read operation, this time pointing at a handler method in my Razor Page named “Quantity.” Finally, using the dropdown lists’s optionLabel, I’ve specified an initial selection to display in the dropdown list:

function quantityOptions(columnFilter) {
        columnFilter.kendoDropDownList({
            dataSource: {
                transport: {
                    read: "@Url.Page("/Index","Quantity")"
                }
            },
            optionLabel: "-- Select Threshold --"
        });
    }

The last step is to create the corresponding method in my Razor Page’s code-behind file. The dropdown list only issues GET requests so I need to set up a method named “OnGet” + the handler name (“OnGetQuantity,” in my case). In that method, I just need to return a JSON formatted list of values to populate the dropdown list. As a result, my code looks like this:

public JsonResult OnGetQuantity([DataSourceRequest] DataSourceRequest request)
{
   List<int> qtys = new List<int> {0, 100, 200 };
   return new JsonResult(qtys.Select(e => e).Distinct());
}

And, now, the user gets this very customized (and focused) UI for filtering products based on their quantity on hand:

We measure a UI’s effectiveness by how well it supports your users’ needs. The Telerik UI for ASP.NET MVC Grid gives you all the tools you need to create a UI that really does work for your users.

Try Telerik UI for ASP.NET MVC Now

Deliver high-quality apps in the quickest timeframe using the 110+ ASP.NET MVC UI controls that cover any use-case scenario. Try it now free for 30 days.

Try Now

Common Release Items

Accessibility Improvements

Ensuring the accessibility (A11Y) of all user interface components has been a priority for Telerik in recent years. The R1 2023 release of Telerik UI libraries includes enhancements to attributes and keyboard navigation to meet compliance standards such as WAI-ARIA, Section 508 and WCAG 2.1.

Additionally, the release includes updated documentation and demos focused on accessibility, as well as updated VPAT templates. To learn more about the specific A11Y improvements in each of the Telerik UI libraries (UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX) please refer to the relevant product section below.

CSP Compliance

Pursuing the goal to be Content Security Policy (CSP) compatible and ultimately ensure strict CSP compliance for all Telerik and Kendo UI products, we have taken the first step in R1 2023 by removing any “eval” and “new Function” usages within our Kendo UI for jQuery source code with dynamic functions that are CSP compatible. Additionally, we have rewritten internal usages within the Kendo UI Templates. To ensure your template and apps are CSP compatible, check out the updated articles:

• Kendo UI for jQuery CSP templates
• Telerik UI for ASP.NET Core CSP Compliance
• Telerik UI for ASP.NET MVC CSP Compliance

Telerik UI for Blazor also remains CSP compliant with minor exceptions that will be improved in a future version. Read more details in the dedicated CSP compliance article.

Day 0 Support for .NET 7

Earlier in November we announced Day-Zero support for .NET 7 for Telerik UI for Blazor and UI for ASP.NET Core with the goal to let all our customers upgrade and take immediate advantage of the new features and performance improvements.

ThemeBuilder Pro

Custom Fonts Support

ThemeBuilder allows you to upload, use and manage custom fonts and font icons. You can use custom fonts to match your company style guide and create a unified experience across the application. Using custom font icons comes with a visual icon picker that enables you to screen faster over all available icons and pick the correct one instead of remembering each by name or code.

New in Telerik Document Processing Library

As we do with every release, we added new features to Telerik Document Processing Library, and customers of all Telerik UI libraries (web, desktop and mobile) can use them in their applications.

New Search API in the RadPdfProcessing Library

The updated search API offers the capability to search for specific text within PDF files, utilizing various methods to tailor search criteria and even searching using regular expressions. The search results provide the page and location of the searched text. For more information on this feature, please refer to the Document Processing Search section in our documentation.

Table of Contents in RadWordsProcessing

The table of contents—TOC and TC—fields enable you to dynamically include a table of contents in your documents through the use of various switches. Additionally, the table of authorities—TOA and TA—fields now provide support for adding tables of authorities to your documents as well. All supported fields can be viewed in the RadWordsProcessing Fields Overview section of our documentation.

New Encryption Mode Is Supported in the RadPdfProcessing Library

We have included support for Encryption Algorithm 5 with AES 256, which is a highly requested feature. Below is the list of encryption algorithms currently supported:

• For import: RC4 (V2), AES-128 (AESV2), AES-256 (AESV3)
• For export: RC4 (V2), AES-256 (AESV3)

The encryption algorithm can be managed using the EncryptionType property. For more information, please refer to the PDF Processing Export Settings.

Telerik UI for Blazor

New Blazor Signature UI Component

The new Signature component in Telerik UI for Blazor enables end users to easily add signatures to forms or PDF documents in Blazor applications. Users can draw their signature using a mouse or touch device, and take advantage of built-in configuration options such as canvas options, stroke width, size, color, background configuration, and read-only state.

To see an example of how to place a signature in a Blazor form, or to try out the Signature component, check out Telerik REPL, our browser-based code runner.

New Blazor Avatar UI Component

The new UI for Blazor Avatar component is an ideal solution for displaying small photos, custom icons, avatars or initials for entities in your applications. It is widely used for building forms, profile pages, navbar menus and other similar scenarios.

With its exposed appearance configuration options, the Avatar component can be easily integrated and customized to fit any application design. You can change its size, roundness, fill mode and coloring to match the desired look and feel.

The component also provides built-in size options like small, medium and large and also allows custom width and height settings to accommodate any design requirements. The Rounded parameter gives flexibility to adjust the avatar shape from rectangular to a complete circle. Additionally, the ThemeColor parameter can be set to various options to match the color scheme of the page.

See the demo of the Telerik UI for Blazor Avatar component.

New Chip and ChipList UI Components

With this update, we are happy to introduce the UI for Blazor Chip and ChipList UI components.

The Chip component is a compact form of a complex piece of information, including text, avatars, images, letters and close icons that can be clicked or removed, and it offers various styling options.

The ChipList component is used to manage a collection of Blazor Chip components, with the ability to data bind and manipulate a list of Chip elements. These components are commonly used for tasks such as tagging contacts and mail inboxes, selecting single or multiple options, and providing input to an application.

Both components offer multiple appearance configuration options (FillMod, RemoveIcon, Rounded and Size) and built-in keyboard navigation support.

See example of UI for Blazor Chip and ChipList components.

New Font Icon Component

The new Telerik UI for Blazor Font Icon component allows for the display of either built-in Telerik Blazor font icons or custom font icons.

The configuration parameters include:

• The ability to set the flip direction of the icon
• The option to select from the built-in Telerik Blazor font icons or to provide a custom CSS class for a third-party icon
• The ability to set predefined icon sizes with the option to use raw strings or the properties of the static ThemeConstants.Icon.Size class
• The option to set predefined icon colors with the default being the inheritance of the current CSS text color using the properties of the static ThemeConstants.Icon.ThemeColor class

New SVG Icon Component

The Telerik UI for Blazor SvgIcon component allows the display of either built-in Telerik Blazor SVG icons or custom SVG icons.

The parameters available for customization include:

• The ability to set the flip direction of the icon
• The option to use a built-in Telerik Blazor font icon by assigning a property of the SvgIcon static class or by implementing a custom SVG Icon class
• The ability to set predefined icon sizes with the option to use raw strings or the properties of the static ThemeConstants.Icon.Size class
• The ability to provide the HTML markup for a custom SVG icon
• The option to set predefined icon colors using the properties of the static ThemeConstants.Icon.ThemeColor class.

Compact Data Grid and Sizing Options

The Data Grid in UI for Blazor allows for customization of its density to improve visibility on smaller devices or to show larger volume data via its new Size parameter which supports two values—Small and Medium.

To achieve a compact data grid appearance, you can change the Size parameter to Small. This will decrease the padding in cells and also affect the inner components such as the Toolbar, Pager and editors, making them smaller and consistent with the overall styling of the UI for Blazor Data Grid.

See an example of smaller size UI for Blazor (compact Data Grid).

Telerik REPL for Blazor: Saving Your Own List of Code Snippets

The browser-based code runner Telerik REPL for Blazor has been enhanced with a very handy feature which allows you to save code snippets and easily reference them for future usage.

In order to add a snippet to “User Snippets” list, you need to either login with your Telerik account (existing users) or register and create a new one. Saving a snippet to your list occurs automatically once you are finished creating it and hit the share button. You can then give it a meaningful name, search, sort or remove it from the list.

Adaptive Rendering in Multiple Components

The adaptive and responsive UX of the UI for Blazor library has always been a focus and in the R1 2023 we ensured mobile-friendly rendering of all Date and Time picker and select-type components. The adaptive behavior can be provided via the new AdaptiveMode parameter which was added to the DatePicker, DateTimePicker, TimePicker, DateRangePicker, AutoComplete, ComboBox, DropDownList, MultiColumnComboBox and MultiSelect components for Blazor.

When set to Auto, the components will adjust their rendering based on the current screen size. Additionally, when in auto-adaptive mode, the DateTime pickers and select-type components will allow you to specify the title text that appears in the header of their pop-up window.

New Features in Scheduler Component

Scheduler OnCellRender Event

The OnCellRender event in the Scheduler component allows you to dynamically customize the slot cells. It is activated when each cell is rendered, and it enables you to add a custom CSS class to specific slots based on the event arguments. You can use the OnCellRender event in all the Scheduler views, both in the horizontal and vertical orientation.

See an example of how to customize Scheduler component slots.

Custom Scheduler Slots

In addition to the customization capabilities of the OnCellRender event, we have also shipped a Scheduler SlotTemplate feature which allows you to add custom content including text and icons.

See how to render arbitrary content in Scheduler appointments using the slot template feature.

Pager Position in Multiple UI Components

The UI for Blazor Data Grid, TreeList and ListView components have been enhanced with a new PagerPosition parameter (e.g., <GridPagerSettings Position="@PagerPosition.Top"), which allows you to easily configure the location of the Pager component within them to top or bottom. The Pager customization feature within the data-bound components is added to the already existing options to define page numbers, page size and page input type.

Sizing Options for Multiple Components

You can now customize the appearance of the UI for Blazor Toolbar, Pager and Form components using the new Size parameter. It allows you to configure the dimensions to “Small,” “Medium” or “Large.”

See example of UI for Blazor Toolbar Sizing options.

Enhanced Date Editing UX

In R1 2023 we introduced multiple enhancements and features related to the date and time UI components for Blazor, namely the DateInput, DatePicker, DateRangePicker, DateTimePicker and TimePicker. In the section below we will review in detail what’s new on a per feature basis.

Auto-Tabbing Improvements

As user preferences and behavior differ when working with dates, we implemented a configuration option that controls the auto-tab behavior when editing year, month and date values. The configuration can be achieved using the two new properties:

• AutoSwitchParts – defines whether to switch to the next date segment when the current one is completed.
• AutoSwitchKeys – the default behavior for navigating with arrows remains, but the AutoSwitchKeys allows you to specify the keys/key codes which the end user should press in order to jump to the next date segment. The purpose of this property is mainly focused to allow users to type separators and dates with format “1/31/2022” instead of “1312022.”

The auto-tabbing configuration properties are available for the following list of UI for Blazor components: DateInput, DatePicker, DateRangePicker, DateTimePicker and TimePicker.

Support for Copy & Paste in DateTimePickers

The UX of the DateTime pickers has been further enhanced with a handy option to copy and paste date format into the components. The feature is available for the following list of UI for Blazor components: DateInput, DatePicker, DateRangePicker, DateTimePicker and TimePicker.

A note on supported scenarios: The date input and pickers support pasting of values that match the format and pasting of date segments that match the date segments of the format, but content that does not match the format will not be processed.

Two-Year Digit Format

The DateInput, DatePicker, DateRangePicker and DateTimePicker components have a new property called TwoDigitYearMax, which makes it easy for users to enter dates in two-digit year format. The value set for TwoDigitYearMax determines the highest year that will be assumed to be from the current century when a two-digit year is typed. The default setting is 68, meaning that any number less than 69 will be interpreted as 20xx, while numbers 69 or greater will be assumed to be from the 19xx century.

Auto-Correction of Invalid Dates

Until recently, the default behavior was when a user types in a date like “31/January/2023” and then changes the month to February, the day would automatically switch to 28 (since February only has 28 days). However, we received feedback from you that there are cases when you need to disable this automatic correction so that the user can continue editing the date and manually change the day part of February.

The new property AutoCorrectParts gives you control over the date auto-correction UX. Its value specifies whether the date parts should be automatically corrected to show a valid date or not. The default value is “true,” meaning that the automatic correction will occur. By setting it to “false,” you will allow users to be able to see “31/Feb/2023” in the input field, but the component value can not be set to this and will be either null or default to the value for the DateTime.

The new AutoCorrectParts feature is available for the following list of UI for Blazor components: DateInput, DatePicker, DateRangePicker and DateTimePicker.

Caret Mode

We have introduced one more property called AllowCaretMode which gives users more flexibility when working with dates. The AllowCaretMode allows users to input date and time using a caret to move through separate date segments (instead of selecting) and this property controls whether this is an option or not. It also specifies if a caret can be displayed during input for certain date segments—for example, if months are represented as words instead of numbers, it can’t be applied.

No Data Template in Multiple Components

Until now, if you needed to customize the content of an empty list in a select-type component you could only achieve change in the text via localization. With the new NoDataTemplate feature you can now display custom content in the Telerik UI for Blazor DropDownList, ComboBox, AutoComplete, MultiSelect and MultiColumnComboBox components.

See an example of the UI for Blazor ComboBox no data template.

Blazor TreeView OnItemRender Event

We exposed a new event called OnItemRender in the Blazor TreeView component, which is triggered when each of the cells are being rendered. The OnItemRender event allows you to have full control over what content and how you would like to be displayed in the tree view items including their read-only state.

See the complete list of the available events in the UI for Blazor TreeView component.

Accessibility Improvements

We continue our efforts for ensuring the highest level of accessibility compliance of the Telerik UI for Blazor library. In the current release we improved the WAI-ARIA attributes and keyboard navigation in the Data Grid filter and column menus, as well as the TreeList filter menu. We have also added an AriaLabel parameter across all input-based components.

To raise the level of AY11 compliance even higher, we shipped a new color swatch called Ocean Blue A11Y (an enhanced version of the already existing Ocean Blue) which addresses corner cases for color contrast in several UI components.

In addition to the A11Y features, we also provided detailed documentation for the WAI-ARIA attributes of each UI for Blazor component allowing you to easily reference the available attributes.

See an example of WAI-ARIA reference documentation article for the UI for Blazor AutoComplete component.

Form OnUpdate Event

The Blazor Form component now exposes OnUpdate event, which is triggered after a change in any of the editors is initiated. The new event further expands the existing ones, OnSubmit, OnValidSubmit and OnInvalidSubmit, which allow you to respond to user actions and provide custom logic.

Read more about the available events in the UI for Blazor Form component.

Week Number in DateTimePickers

The new property ShowWeekNumbers in the UI for Blazor Calendar, DatePicker and DateTimePicker components allows you to easily display to users the respective week number. By setting the ShowWeekNumbers property to true, a new column is added to the left-hand side of the calendar indicating the week number.

See how to add a week column in the UI for Blazor Calendar component.

Support for SVG icons

As of R1 2023, the Telerik UI for Blazor library offers a wide selection of Scalable Vector Graphics (SVG) icons in addition to the previously available font icons, giving developers more options to choose from.

SVG icons are vector images defined in an XML format, which allows for easy scalability and customization. They can be used in webpages to display vector graphics and offer advantages such as sharp rendering at all resolutions, flexibility in controlling individual parts with CSS, and accessibility through semantic elements and attributes.

Read the documentation article for more information about the available icon options in UI for Blazor.

RadioGroup New Item Template

Another component that now allows rendering of custom content instead of just text is the Telerik UI for Blazor RadioButtonGroup component. Using the new radio group ItemTemplate feature, you can add icons, styles and special formatting in the radio buttons of your Blazor apps.

Telerik UI for ASP.NET Core and MVC

TimeDurationPicker UI Component

The new Telerik UI TimeDurationPicker component for ASP.NET Core and ASP.NET MVC enables users to select a duration period. As a developer, you can determine the number of columns, specify the format for each of them, constrain the allowed selectable values and add shortcut buttons for repetitive durations.

The TimeDurationPicker component differs from the other time-based pickers that Telerik UI offers in that it does not care about what the current time is, and no date needs to be involved. Instead, the new ASP.NET Core/MVC TimeDurationPicker focuses just on a single time duration.

The Time Duration Picker comes also with built-in keyboard navigation support, multiple events that let you handle the business and UX logic, plus various appearance customization options such as size, fill mode and border radius.

See the UI for ASP.NET Core TimeDurationPicker component demo.
See the UI for ASP.NET MVC TimeDurationPicker component demo.

GridLayout & StackLayout UI Components

The new GridLayout and StackLayout UI components will help you easily arrange HTML elements in a grid or a horizontal/vertical stack.

These components simplify the creation of layouts in web applications and help developers migrate from desktop to the web since they mimic the GridPanel and StackPanel components used in Windows development.

The GridLayout allows you to lay components out on a grid consisting of rows and columns. The columns and rows of the grid serve as coordinates that are used for laying out components on the grid. Typically a component only occupies a single cell of the grid.

See a demo of UI for ASP.NET Core GridLayout component.
See a demo of UI for ASP.NET MVC GridLayout component.

The Telerik StackLayout component allows you to easily align vertically or horizontally multiple elements in a stack. It includes different orientations, alignments, spacings and other handy options.

See a demo of UI for ASP.NET Core StackLayout component.
See a demo of UI for ASP.NET MVC StackLayout component.

Chip and ChipList UI Components

The Chip and ChipList UI components are more new additions to the Telerik UI for ASP.NET Core and ASP.NET MVC libraries. Commonly, Chip and ChipList components are used as tags when adding/removing contacts and mail inbox, selecting single or multiple choices from available options, and providing input to an application.

The Chip component enables user input and verifies that input by converting text into chips. The Chip provides a compact way to display complex information, including text, avatars, images, letters and close icons. It is clickable and removable, and offers various styling options.

The ChipList component is also included in this update. It is used to manage a collection of Chip components, providing data binding and manipulation options for a list of Chip elements.

See an example of the Telerik UI for ASP.NET Core Chip and ChipList UI components.
See an example of the Telerik UI for ASP.NET MVC Chip and ChipList UI components.

Floating Label in Input and Select-Type Components

In the current update, we enhanced multiple select and editor-type UI components with a shiny new floating label property. By setting it to true, the label will “float” above the component when it is focused. The new floating label feature is available in the following list of components:

ASP.NET Core & MVC Select-Type UI Components:

• DropDownlist floating label demo
• ComboBox floating label demo
• MultiSelect floating label demo
• AutoComplete floating label demo
• DropDownTree floating label demo
• MultiColumnComboBox floating label demo

ASP.NET Core & MVC Date Inputs & Pickers

• DateInput floating label demo
• DatePicker floating label demo
• DateTimePicker floating label demo

Signing PDF File with Signature UI Component

We improved the demos for the Signature component in UI for ASP.NET Core and MVC to include the popular use case of signing PDF documents within web applications. Using the Telerik Document Processing Libraries, you can extract the PDF file to memory, add the signature and create a new PDF document. The Telerik UI for ASP.NET Core PDFViewer component allows you to easily display the final document to the user, including options to download and save the document with the added signature.

See examples of how to place a signature in a PDF File using the UI for ASP.NET Core Signature component and the UI for ASP.NET MVC Signature component.

ECMAScript Modules (ESM) Support

We transformed the source code from AMD to ECMAScript modules (ESM), bringing actual benefits from the ESM modules to Kendo UI for jQuery, Telerik UI for ASP.NET Core and MVC server wrappers as well.

If you are relying on the AMD modules, you can continue using them as we managed to come up with a solution that allows moving to the new ESM module system without breaking changes for anyone who might want to continue AMD/UMD modules with the Kendo UI bundles distributed.

You can learn why we transformed our own source code from AMD to ECMAScript modules and see how you can use dynamic script imports with modern browsers and get huge benefits in your applications.

Charts Enhancements

Label Support for Bullet Charts

You can now easily add labels to each of the data series within the Bullet Chart UI component. Furthermore, you can configure its visibility, apply background formatting and even render custom content by using templates.

Subtitle Support for All Charts

Another enhancement to the DataViz library is the ability to add an additional title (subtitle) below the chart title and apply individual style to it.

See how to configure the Chart Title and Subtitle properties.

Accessibility Improvements

The specific WAI-ARIA accessibility improvements in R1 2023 for Telerik UI for ASP.NET Core and MVC are numerous, so here are a few UI components: Menu, Context Menu, ListBox, Drawer, ScrollView, ListView and more.

Deprecation of LESS Themes

Last year with R1 2022 we announced that Kendo UI for jQuery, Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core would be moving completely to the Sass-based Default, Bootstrap, Material and Fluent themes. This means that the LESS themes, created when LESS was the most popular CSS pre-compiler (this is no longer the case), are officially going to be deprecated.

Well, the day is here, and R1 2023 is the last version of Kendo UI for jQuery, Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core will support the LESS-based themes.

Thanks to the hard work done over the last year or so, R1 2023 contains a lot of new features and components, and lots of improvements to the LESS themes. This should give teams that have been hesitant about the migration a stable release to hold out on until they can make the change to the Sass-based themes.

Telerik UI for ASP.NET Core Specific

New E-Shop Demo App

We have a brand-new e-shop demo app that illustrates the usage of Telerik UI components within a ASP.NET Core application. The app showcases the most common use cases related to e-shops—product list, product details, shopping basket, user profile, sophisticated product filters, and on top of that we have also included integration with Telerik Reporting to demonstrate how easy it is to generate order invoices or print product catalogs.

The application is built entirely with Telerik UI for ASP.NET Core components such as Data Grid, Scroll View (also known as Carousel), Slider, Rating, Card, Checkbox Group, Buttons and more. The styling is powered by the new built-in Fluent theme which is available for all Telerik and Kendo UI components.

See the new e-shop demo app with Telerik UI for ASP.NET Core components with Fluent theme.

Localization Configuration in Project Templates

As of the R3 2022 SP2 release, we have added localization capabilities to the Visual Studio Templates for Telerik UI for ASP.NET Core. This gives you an option to enable or disable the templates localization in the Telerik Visual Studio Extensions Project Wizard.

By default, the UI for ASP.NET Core components display their messages in English. If the localization is enabled in the Project Wizard, a dropdown is rendered in the respective Visual Studio Templates startup page.

You can use it to select a different language, which will convert the messages in the components to the selected language. This way your users will be able to understand them, since they are translated to their native (or preferred) language.

Localization Resource Files

This release includes translated messages for 96 cultures in the Telerik UI for ASP.NET Core and MVC libraries. These translations were taken from the Kendo UI for jQuery public localization repository and are now available as resource files. Users can use these translations as is or customize them to their liking.

To learn more about the localization updates, check out the dedicated documentation article.

UI for ASP.NET Core Code Snippets in Visual Studio and Visual Studio Code

This release includes new code snippets for Telerik UI for ASP.NET Core components to improve productivity when developing web applications in Visual Studio or Visual Studio Code. The 110+ components now have code snippets for both HTML and TAG helper flavors that can be easily accessed. To use these code snippets, download and install the extensions from the Visual Studio Marketplace.

• Visual Studio Productivity Pack
• Visual Studio Code Productivity Pack

Telerik UI for ASP.NET AJAX

New WebForms Signature UI component

UI for ASP.NET AJAX is another Telerik library that added the Signature UI component to its collection. The RadSignature allows users to easily add signatures to forms or even PDF documents (via integration Telerik Document Processing). They can use a mouse or touch device to create their signature and customize it using options like canvas settings, stroke width, size, color, background and read-only mode.

See a demo of the UI for ASP.NET AJAX Signature UI control.

Enhancements to UI Components

Based on a customer request in the UI for ASP.NET AJAX Feedback Portal, we added a DropDownAutoWidth property in the RadDropDownList component.

Another Feedback Portal request that was included in the release is the new client event ItemSelect for the SearchContex in the RadSearchBox. Using the ItemSelect event, you can easily change the DataSource for RadSearchBox according to which Item is selected.

Accessibility Improvements

In Telerik R1 2023, we continued adding accessibility improvements (Calendar, TreeView, Grid HeaderContext to name a few) and as we did so, we made sure that the Voluntary Product Accessibility Template (VPAT) is updated.

Other Enhancements

In the latest release of UI for ASP.NET AJAX you can also find improvements in the appearance of RadEditor and RadTreeView in the WebBlue, Windows 7 and Vista skins.

Join Us for the Webinar January 26 (Plus More)

Progress Telerik .NET Web, Desktop & Mobile Products R1 2023 Release Webinar | January 26

Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for .NET MAUI and UI for Xamarin and ThemeBuilder.

Save Your Seat

Join Us on Twitch

If you can’t wait until the webinar to unpack the new release, join the Livestream Release Party on January 19, 10 a.m. – 11:30 a.m. ET to hear the release highlights across the entire Progress Developer Tools portfolio and hang out with friends.

Progress Kendo UI R1 2023 Release Webinar | January 31

Discover all updates across KendoReact and Kendo UI for Angular, Vue and jQuery, as well as ThemeBuilder.

Save Your Seat

Progress Telerik Reporting, Mocking and Debugging Tools R1 2023 Release Webinar | February 2

Discover all updates across Telerik Reporting, JustMock, Fiddler Everywhere and Fiddler Jam.

Save Your Seat

With the November release of Kendo UI for jQuery, our source code is transformed from AMD to ECMAScript modules (ESM). You can learn here why we transformed our own source code to ESM and see how you can use dynamic script imports with modern browsers and get huge benefits from this in your applications.

While the current blog post outlines the changes in Kendo UI, the actual benefits from the ESM modules will be available to Telerik UI for ASP.NET Core and MVC server wrappers as well.

If you are relying on the AMD modules, don’t be scared—they are still here and they are shipped in the same locations where they have always been.

Why Did We Move to ESM?

The team invested serious time and effort when rewriting the Kendo UI for jQuery source code to ESM to ensure proper completion and smooth distribution of our pipeline. With that, we managed to come up with a solution to both move to a new, more recent module system without breaking changes for anyone who might want to use the good old AMD/UMD modules with the Kendo UI bundles distributed.

You can also find some useful information about that in our documentation: ECMAScript Modules.

Briefly, the benefits from moving to ESM are:

• Using modern module loaders and bundlers and support the modern bundling concept within Kendo UI for jQuery.
• Compiling JavaScript modules so that you can let the browser take care of script dependencies and dynamically load them (check out more: The JavaScript Modules).
• Using the distributed Kendo UI bundles and utilizing dynamic script loading can lead to better performance for your applications (check out more: How to Improve Performance).
• Updating the NPM packages with different types of module systems to match ES, CommonJS and AMD/UMD (check out more: Updates in the NPM packages).
• And the best part is that using ECMAScript opens the doors for more possible improvements in the Kendo UI for jQuery based products (check out more: The Future).

How To Use the New Modules

The JavaScript Modules

The JavaScript modules are scripts that the browser will address as ECMAScript modules and enable dynamic loading. Shortly, enable import and export statements so that the browser can load script dependencies on its own.

How is this so different from the good old JavaScript files? The difference is huge when using large libraries like Kendo UI for jQuery. If you want all the code from the library, you would need to load the kendo.all.js file which, honestly, is a large one. That causes the browser to load one tremendous file while you might need only a portion of it for your page to work.

If you had the requirement to optimize the page load—the kendo.all.js would be a pain. And you would need to go in and trim out dependencies according to the components you are using and their feature-sets you need. And you would refer to our documentation (Creating Your Own Custom Bundles) in order to either create a custom bundle, which would output again a large bundle. Or add only the specific pre-bundle scripts that you would need, which would end up to a list of more than 10 or 20 js files.

What JavaScript modules enable you is to have one single file as a script reference (e.g., <script src="https://www.telerik.com./js/index.js" type="module"></script>) and use import and export statements to dynamically load all other dependencies.

Let’s take the Kendo UI Grid as an example. In order to load the Grid component with all the features, you would need to list 70ish js files (you can check the list here: Data Management Components). With the JavaScript modules, you are required to add a reference or import only one file—the main bundle: <script src="https://www.telerik.com./mjs/kendo.grid.js" type="module"></script>. And this will let the browser load all other dependencies by itself.

And, yes, a module is loaded only once. That means that if you load another component that relies on an already loaded dependency it will not be fetched again—it is already loaded by the browser and it will be directly used.

All our major distributions (zip bundles, CDN and so on) include compiled JavaScript modules.

1. Using the JavaScript Modules from CDN

In the CDN, the JavaScript Modules are located in the /mjs/ folder.

You can use them like so:

<script src="https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.grid.js" type="module"></script>
 <script type="module">
    $("#grid").kendoGrid({
        ...
    });
</script>

or

import 'https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.grid.js';
 $("#grid").kendoGrid({
    ...
});

2. Using the JavaScript modules from a downloaded distribution

You can download the distributed bundles from your Telerik account in the download section. In the mjs folder you will find the modules readily available for you to copy to your application and use them.

<script src="./mjs/kendo.grid.js" type="module"></script>
 <script type="module">
    $("#grid").kendoGrid({
        ...
    });
</script>

or

import './mjs/kendo.grid.js';
 $("#grid").kendoGrid({
    ...
});

How To Improve Performance

I think we are all on the same page now—JavaScript modules are cool. But let’s see how they can improve our applications and the loading performance.

Let’s say we have a very simple application with a button that opens a dialog/window and loads a grid with a bunch of data in it. Using the Kendo UI for jQuery components and the plain JS files will look something like this:

index.html

<html>
    <head>
        <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    </head>
    <body>
        <button id="openBtn">Open</button>
        
        <div id="gridDialog">
        </div>
        
        <link async href="./styles/kendo/web/kendo.default-ocean-blue.css" rel="stylesheet" media="screen" />
        <script defer src="./js/jquery/jquery.min.js"></script>
        <script defer src="./js/kendo/js/kendo.all.min.js"></script>
        <script defer src="./js/products.js"></script> <!-- The data for the grid -->
        <script defer src="./js/index.js" type="module"></script>
    </body>
</html>

index.js

$('#openBtn').kendoButton({
    click: openDialog
});

function openDialog() {
    const gridDialog = $("#gridDialog").kendoDialog({
        width: 400,
        content: '<div id="dialogContent"></div>'
    }).data("kendoDialog");
    
    gridDialog.one("show", async () => {
        const gridElm = $('<div id="grid"></div>').appendTo("#dialogContent");
        initGrid(gridElm);
    });
    
    gridDialog.open();
}

function initGrid(gridElm) {
    gridElm.kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsInStock: { type: "number" },
                        Discontinued: { type: "boolean" }
                    }
                }
            },
            pageSize: 20
        },
        height: 550,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
            input: true,
            numeric: false
        },
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }
        ]
    });
}

Quite a simple example that loads fast and everything works fine. Let’s check the performance score by running a check with the Lighthouse tool in Chrome’s dev console.

At this point, if load performance is a thing for you, you should attempt to optimize the application. With the plain JS Kendo UI bundles, you could more or less save the day by listing only the script that you need, create a custom Kendo UI bundle with only the code you need, and come up with a score of 85-90. You could also apply dynamic loading by using third-party methods or some other magic and possibly get a bit higher than 90. But all this requires a lot of back and forth with the code. Not to mention that it makes it unreadable and unmaintainable (in most cases).

Now let’s see how we can use the browser’s module system to make things better. First, we will need to step back and separate all code into modules that rely on dependencies.

index.html

<html>
    <head>
        <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    </head>
    <body>
        <button id="openBtn">Open</button>
        
        <div id="gridDialog">
        </div>
        
        <link async href="./styles/kendo/web/kendo.default-ocean-blue.css" rel="stylesheet" media="screen" />
        <script async  src="./js/index.js" type="module"></script>
    </body>
</html>

index.js

import './jquery/jquery.min.js';
import './kendo/mjs/kendo.button.js';

$('#openBtn').kendoButton({
    click: async () => {
        const { openDialog } = await import("./dialog.js");

        openDialog();
    }
});

dialog.js

import './kendo/mjs/kendo.dialog.js';

export function openDialog() {
    const gridDialog = $("#gridDialog").kendoDialog({
        width: 400,
        content: '<div id="dialogContent"></div>'
    }).data("kendoDialog");

    gridDialog.one("show", async () => {
        const { initGrid } = await import("./grid.js");
        const gridElm = $('<div id="grid"></div>').appendTo("#dialogContent");

        initGrid(gridElm);
    });

    gridDialog.open();
}

grid.js

import './kendo/mjs/kendo.grid.js';

export async function initGrid(gridElm) {
    const { products } = await import("./products.js");

    gridElm.kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsInStock: { type: "number" },
                        Discontinued: { type: "boolean" }
                    }
                }
            },
            pageSize: 20
        },
        height: 550,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
            input: true,
            numeric: false
        },
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }
        ]
    });
}

products.js

export const products = [{
    ProductID : 1,
    ProductName : "Chai",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "10 boxes x 20 bags",
    UnitPrice : 18.0000,
    UnitsInStock : 39,
    UnitsOnOrder : 0,
    ReorderLevel : 10,
    Discontinued : false,
    Category : {
        CategoryID : 1,
        CategoryName : "Beverages",
        Description : "Soft drinks, coffees, teas, beers, and ales"
    }
},
    ....

Now let’s run a performance check once more.

This score is more satisfactory. And now we have more readable code with good separation, which makes it better than before. Plus, we can take advantage and reuse parts of the code we write in our applications.

A bit more drilling down will explain more why using dynamic loading and modules save the day. In the example above, we see that none of the huge scripts (kendo.dialog.js and kendo.grid.js) are loaded until the button is clicked. Therefore, scripts are loaded only when the end user requires a specific functionality in your application. In short, with initial load, only the CSS and the scripts for the Button are loaded. The rest is handled by the browser.

Using JavaScript Modules in Telerik UI for ASP.NET MVC and Core

The new modules are available in the Telerik UI for ASP.NET MVC and Core bundles as well. You can find them in the mjs folder. Using them requires deferred initialization.

This is an example how to use a Telerik UI for ASP.NET Core Grid component with the module system:

(Html.Kendo().Grid<My_App.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound("productName");
        columns.Bound("unitPrice");
    })
    .DataSource(dataSource => dataSource
        .Custom()
        .Transport(tr => tr.Read("Products_Read", "Grid"))
        .Schema(sc => sc.Data("data"))
    )
    .Deferred()
)

@section Scripts { 
<script type="module">
    import '@Url.Content("/js/mjs/kendo.grid.js")';
    import '@Url.Content("/js/mjs/kendo.aspnetmvc.js")';

    @Html.Kendo().DeferredScripts(false)
</script>
}

Updates in the NPM Packages

The NPM packages (@progress/kendo-ui and kendo-ui-core) are extended with module and browser fields so that you can include scripts according to the module system of your project.

That means that now you can instruct the module loader/bundler (according to its specific configuration) to get the specific module system from the NPM package so that you do not need to alter the preferred compiler/transpiler.

Note that WebPack uses the browser field with priority. You can check that from here as well: WebPack docs.

For example, using WebPack with ECMAScript-based application, you can set up the mainFields option to get the module field:

...
  resolve: {
    mainFields: [ 'module', 'browser', 'main' ]
  },
...

or make an alias:

  resolve: {
    alias: {
      '@progress/kendo-ui': path.resolve(__dirname, 'node_modules/@progress/kendo-ui/esm/kendo.all.js') 
    },
  },

Or you can configure it to use CommonJS modules:

...
  resolve: {
    mainFields: [ 'main', 'browser', 'module' ]
  },
...

or make an alias:

  resolve: {
    alias: {
      '@progress/kendo-ui': path.resolve(__dirname, 'node_modules/@progress/kendo-ui/js/kendo.all.js') 
    },
  },

Every module loader is different, and you should check the documentation to see how you can set it up according to your needs.

The Future

With this effort, we are looking into new ways to improve the Kendo UI for jQuery and Telerik UI for ASP.NET MVC and Core products. And this step opens new ways to tackle features, functionalities and provide better support.

For example, a small disclosure on what we are working on after releasing the module system is towards better CSP support and an alternative template mechanism.

As always, we are open to feedback. So if you happen to have a suggestion or idea that would make your life better with our products do not hesitate to contact us through our support channels, Feedback Portal, forums or comments.

• Common Telerik Web R2 2022 Release Items
• Telerik UI for Blazor
• Telerik UI for ASP.NET Core and Telerik UI for ASP.NET MVC
• Telerik UI for ASP.NET AJAX

Common Telerik Web R3 2022 Release Items

New Fluent Theme Across Telerik and Kendo UI

With R3 2022 we are excited to announce that the new Fluent theme is officially available for Telerik and Kendo UI libraries and their web UI components! Just like our other themes, the new Fluent theme follows the guidelines of the official Fluent Design System to let all ASP.NET MVC, ASP.NET Core, Blazor, jQuery, Angular, React and Vue UI components immediately be styled with the Fluent Design System just by including the new theme.

If you are already using Fluent-themed components in your web applications today, with the Fluent theme added, any of the Telerik and Kendo UI components will seamlessly fit in.

Compatibility With .NET 7 Latest Preview Release

For those of you eager to try out the latest and greatest by Microsoft, we are happy to announce that the Telerik UI for Blazor and Telerik UI for ASP.NET Core libraries are compatible with the latest .NET 7 Preview 7. Our goal is to provide full support for .NET 7 as soon as Microsoft releases it this November.

Accessibility Enhancements

A major focus in R3 2022 for all Telerik Web UI components was further improving the accessibility compliance level and available documentation and demos that can be used for reference points or direct A11Y testing. For each of the Telerik UI products, we have added a dedicated section below which outlines the specific items in the release.

New Telerik Document Processing Features

With R3 2022, we’ve released new features across all Telerik Document Processing libraries to help you better navigate your document formats. The new features include:

Updates in WordProcessing Library

• Page Numbering fields: In addition to the filed codes support, we have now added a functionality that allows you to update the PAGE, PAGEREF, NUMPAGES and SECTIONPAGES fields and easily calculate their result.
• Shapes support: The shapes feature allows you to easily insert, style and interact with existing shapes like circles, boxes, arrows and many others directly in your documents.

Updates in SpreadProcessing Library

• Repeat specific rows or columns on every printed page: You can easily specify a row or a column that will be repeated on every printed page.

Updates in SpreadStreamProcessing Library

• SpreadStreamProcessing import: You can now read large XLSX or CSV files without loading the entire document in memory.

Updates in PdfProcessing Library:

• PdfProcessing Signature flags support: With this new functionality, you can specify that there is a signature, even if the signature itself does not have a visual representation.
• Export PDF pages to images: We have added the ability to convert the pages of a .pdf document to images. This feature will work with the .NET Standard version and does not depend on any Windows libraries.

Telerik UI for Blazor

Telerik UI for Blazor continues to grow and improve, and we are happy to share that we now offer 100 native Blazor components! The new additions in R3 2022 include PDFViewer, MultuColumnComboBox and Skeleton components; accessibility improvements; new scaffolding and code snippets and Visual Studio—plus dozens of advanced features across all UI for Blazor components.

New Blazor PDFViewer Component

The new UI for Blazor PDFViewer component is certainly one of the highlights of R3 2022 release. It allows users to view and interact with PDF files directly in the browser without the need to download the file or use third-party tools or browser extensions.

The PDF Viewer for Blazor comes with a toolbar with built-in features to open, view, and download PDF files, paging, PDF search options, zoom in/out, printing and more. You can further customize the built-in toolbar commands and add your own, such as including a watermark or sending via email.

See the UI for Blazor PDFViewer component demo.

New Blazor MultiColumnComboBox Component

The new UI for Blazor MultiColumnComboBox component comes with a rich set of built-in features and options to customize its look and feel, including data binding, filtering, grouping, rendering of custom content through templates, appearance configuration, input of custom values, validation, built-in localization of messages, accessibility and keyboard navigation. With the help of the MultiColumn ComboBox, users can easily choose values from a predefined list in a table-like structure and type input in it.

See the UI for Blazor MultiColumnComboBox component demo or try out the component in the Telerik Blazor REPL browser-based code runner.

New Blazor Skeleton Component

Skeletons are widely used as hints to the users that the page content is being loaded. With the Telerik UI for Blazor Skeleton component you can easily achieve such behavior and render a placeholder for each of the underlying HTML elements in a component or page. It includes customization options for its shape (text, circle or rectangle), height, width, animation type (pulse or wave), visibility and CSS class.

The UI for Blazor Skeleton allows seamless integration with other Blazor UI components, such as Data Grid. This allows you to easily mimic grid with rows while data loading takes place.

See a demo of the UI for Blazor Skeleton component or try it out in Telerik REPL for Blazor.

Accessibility Improvements in Telerik UI for Blazor

In Telerik UI for Blazor, we specifically addressed the WAI-ARIA best practices for implementing keyboard navigation for multiple components, tested against the popular screen readers, implemented the recommended rendering related to various WAI-ARIA attributes, and worked toward aligning with WCAG 2.1 AAA and Section 508 compliance standards.

The UI for Blazor components that received accessibility boost in R3 2022 include Blazor Data Grid, TreeList, TreeView, PanelBar, Stepper, Wizard, Pager, DateInput, Calendar, DateRangePicker, DatePicker, TimePicker, DateTimePicker, Drawer and Breadcrumb.

Accessibility-Focused Demos & Docs

In addition to updating our UI for Blazor components, with R3 2022 the Telerik Blazor team has created accessibility-specific demos that can be used to test any of our Blazor UI components with screen readers and other software used to test accessibility.

Previously, whenever teams needed to run accessibility tests on Telerik UI for Blazor components, they would have to do so locally, which required dedicated developers to set up the perfect configuration. Now, any team member who needs to run tests with screen readers or other software for accessibility testing can do so by visiting the respective online demo. Additionally, we have added a WAI-ARIA Support article for each of the components that lists the respective attributes and usage.

Enhancements to Blazor DataGrid and TreeList Components

The Blazor Grid and TreeList UI components come with the following new features:

Drag & drop between Data Grid, TreeList and TreeView
This allows users to drag items from any of these components to any other of them plus Gantt and Scheduler. That is—in addition to the option drag and drop of items between instances of the same component, which has been available for quite some time.

The existing Drop event will be triggered as the current one but with two additional event parameters (DestinationIndex(string) and DestinationComponentId(string)) and a new method called GetTimeSlotFromDropIndex. These updates will allow users to determine the drop destination inside any of the receiving components and ensure the corresponding item in the destination component can be returned.

HeaderClass parameter
This allows you to define custom CSS classes for the column header cells and easily bold their text, change their alignment or style them to make them stand out.

FilterOperators parameter
This parameter can be applied on a per column basis and lets you customize the list of filter operators within the filter row and menus.

FilterEditorFormat parameter
This one allows control over the format of the default filter and align the formatting of values in the column display and filter editor.

Enhancements to Blazor Gantt Component

Based on your feedback, we expanded the UI for Blazor Gantt component to give you greater flexibility and more customization options.

Blazor Gantt State Management

The Telerik UI for Blazor Gantt component now allows persisting its state between browsing sessions. You can save and load the Gantt layout so your users can continue where they left off. That includes all types of changes in the TreeList part of the Gantt component: extended items, edited items, column size and order, TreeList size (controlling the splitter position between the tree list and timeline parts), sorting and filtering. You can also control these elements programmatically by setting the desired state of the Gantt in your own code.

See how to save and load Blazor Gantt UI component state.

Blazor Gantt Rebind Method

The new Rebind method in the Telerik Blazor Gantt component allows you to easily trigger data processing logic in the TreeList and Timeline parts so that the UI reflects changes made in the data collection.

Blazor Gantt ToolTip Template Customization

The Blazor Gantt component tooltip template now includes StartDate and EndDate fields that include all relevant parts of a task’s date (year, month, day, hours, minutes, etc.). The new date parameters are formatted according to the ISO 8601 standard and can be easily parsed as C# DateTime objects. This will help you transform and format the task dates to any format that is required in your Blazor applications

Blazor Gantt New Parameters

The FilterEditorFormat parameter of the Blazor Gantt component allows control over the format of the default filter. That way you can align the formatting of values in the column display and filter editor.

With the FilterOperators parameter you can customize the list of filter operators within the filter row and menus of the TreeList part in the Gantt component.

Header Template in Multiple Blazor Components

Using the new header templating feature, you can customize the content rendered in the Blazor Calendar, DatePicker and DateRangePicker component’s header. Within the <HeaderTemplate> tag, you add render buttons, images or apply custom styling.

Customization of the Filter Default Operator

The new DefaultOperator parameter of the Blazor Filter component allows you to customize the default filter operator on a per-field basis (the filter that is preselected each time you add a new field). If it is left unassigned, the default operator will be set based on the data type.

Visual Studio Productivity Tools

R3 2022 brings a large set of developer productivity features for working within Visual Studio. You can now speed development, configuration and upgrades in applications built with UI for Blazor components. The latest release of Visual Studio Productivity Tools for Telerik UI for Blazor includes the following list of enhancements:

• UI for Blazor Visual Studio Scaffolder – brings quick scaffolding and data mocking for the most used data-bound components: the Data Grid, TreeList, Scheduler, Chart, ListView, Gantt, Form, Drawer, Menu, DropDownList, Upload, ComboBox and more.

• UI for Blazor Code Snippets Pack – boosts coding speed by allowing fast reference to UI components. You can type a shortcut (e.g., “tb” for Telerik Blazor) or directly the name of the component you need to plug. For example, typing “grid” or just “gr” will conveniently show a dropdown with the available snippet templates you can insert into your code.

• Visual Studio Upgrade Wizard – simplifies Telerik UI for Blazor version upgrades, includes updates to theme versions, and smooths transition from a trial to a license version of the product.

• Visual Studio Configuration of Projects – helps with the configuration of already existing Telerik UI for Blazor applications via a wizard, and includes settings like visual theme, use of CDN and localization.

New ThemeBuilder and ThemeBuilder Pro

Progress ThemeBuilder has long been a popular tool for developers using Telerik and Kendo UI to customize the style of their components without having to write CSS. It has now been rebuilt for better performance and other productivity features such as the ability to save work and reuse it for multiple projects. For those who want to take customization of the Telerik UI for Blazor components to the next level, we are also introducing ThemeBuilder Pro!

For a full breakdown in what’s new with the ThemeBuilder and what ThemeBuilder Pro includes, read the ThemeBuilder announcement blog post.

Native Blazor Report Viewer

We are happy to announce that those of you who use Telerik UI for Blazor and need to implement reporting in your Blazor applications, our friends from the Telerik Reporting team have just shipped a brand-new native Blazor Report Viewer control.

The native version of the report viewer component brings a fluent user experience that blends with the rest of your Blazor application by using the same input controls and styling mechanism.

The first version of the Telerik Blazor Report Viewer component includes all the core functionalities for previewing interactive reports which will be further developed to include features such as Search and navigating back from a drill-through action.

Telerik REPL for Blazor Updates

The Telerik REPL for Blazor received multiple updates and improvements—it now includes a new playful loading animation, adaptive layout and support for different version of Telerik UI for Blazor.

We ensured the REPL is responsive—you can now adapt, run and share code snippets seamlessly from smaller screen devices.

Users are now able to change the underlying version of Telerik UI for Blazor when using the REPL and compile and render code using the selected version. Each Telerik UI for Blazor version comes with its package and static asset dependencies, allowing the user to use currently available swatches for each of the versions.

Check out the latest updates in the Telerik REPL for Blazor now!

Multiple New Parameters in FileSelect and Upload Components

We exposed multiple parameters to enable further flexibility when working with the FileSelect and Upload components in Blazor applications. The new parameters include:

• Id – allows you to associate the component with <label> tags and perform further references and checks
• Accept – easily configure which files should be visible in the browser’s file select dialog
• Capture – renders as a capture HTML attribute of the <input type="file" /> and enables direct usage of the device camera instead of the file system

OnOpen and OnClose Events in Multiple Blazor Components

The following list of UI for Blazor components are expanded with OnOpen and OnClose events: AutoComplete, ColorPicker, ComboBox, DatePicker, DateRangePicker, DateTimePicker, DropDownList, MultiSelect and TimePicker.

The OnOpen/OnClose events are triggered right before the underlying popup component is shown or hidden regardless of how the open/close is initiated—keyboard, mouse click or value change.

Responsiveness and Adaptive Blazor Layout

Throughout 2022 we have added multiple responsive features to the components (responsive Pager, Toolbar and scrollable TabStrip) and added some additional resources to demonstrate how you can easily make Blazor components and apps responsive to different screen sizes using the UI for Blazor MediaQuery component:

• How to make responsive Menu components in Blazor Applications
• How to make responsive Forms in Blazor Applications
• How to make responsive Grid Layout in Blazor Applications

You can also review a dedicated blog post on the topic of Responsive Blazor Layouts, and in R1 2023 we further plan to develop more adaptiveness and updated design for UI for Blazor DatePicker and select UI components.

Updated Blazor Coffee Demo App

If you are in the beginning of your journey with Blazor and Telerik UI for Blazor, check out for ideas and inspiration the updated demo app Blazor Coffee Warehouse. We updated the already existing application and have included examples of some of the most popular UI for Blazor components such as the Data Grid, Drawer, Charts, Inputs, Form and more. The app also demonstrates how users can easily change the theming and apply localization in Blazor apps.

Telerik UI for ASP.NET Core and Telerik UI for ASP.NET MVC

CDN Licensing

The way Telerik UI for ASP.NET Core and UI for ASP.NET MVC are licensed undergoes an important change in this release. R3 2022 introduces the requirement to add a license key whenever using the CDN to reference any Kendo UI for jQuery JavaScript and CSS files. Although the license key mechanism will not break any builds, it serves as a verification step, acknowledging that you are a licensed user. Applying a license key will be as simple as adding a single line of code to your project(s) and you can reference the dedicated resources on how to quickly set it up in your code:

Adding license code in UI for ASP.NET Core
Adding license code in UI for ASP.NET MVC

Signature UI Component

The new Signature component in Telerik UI for ASP.NET Core and MVC enables end users to draw a signature using a mouse or touch device. The key features that users can take advantage of to customize their signatures and adapt them to their needs include different canvas options, stroke width, size, color, background configuration, read-only state and more.

As an alternative to drawing, the Signature component also allows uploading of existing image format. For completeness of the use case of placing a signature in web applications, we have also included handy “Save As” and “Clear” buttons.

See UI for ASP.NET Core Signature component demo.
See UI for ASP.NET MVC Signature component demo.

DropDownButton UI Component

The new DropDownButton component in Telerik UI for ASP.NET Core and MVC renders as a button that opens a popup list of action items. The DropDownButton component supports icons, images, data binding, keyboard navigation, accessibility and multiple appearance customization options.

See the UI for ASP.NET Core DropDownButton component demo.
See the UI for ASP.NET MVC DropDownButton UI component demo.

SplitButton UI Component

The new SplitButton in Telerik UI for ASP.NET Core and MVC gives users a choice to execute the default button action or choose a secondary command from a related dropdown list. The SplitButton eliminates the need for multiple adjacent buttons, simplifies the application UI and saves screen real estate. It comes with built-in support for icons, multiple sizes, fill mode, theme color, disabling items, RTL support, keyboard navigation, accessibility and multiple UI customization options.

See the UI for ASP.NET Core SplitButton component demo.
See the UI for ASP.NET MVC SplitButton UI component demo.

Accessibility Improvements

The list of the UI components that we enhanced in Telerik UI for ASP.NET Core and MVC is long so here we will mention just the highlights: Drawer, Breadcrumb, TabStrip, TreeView, Pager, Editor, Toolbar, DateTimePickers and more.

Beyond updating our UI components to comply with Section 508, WCAG 2.1, and WAI-ARIA standards, R3 2022 introduces accessibility-specific demos that can be used to test any of our ASP.NET Core & MVC components with screen readers and other software used to test accessibility. Anyone who needs to run accessibility tests on Telerik UI for ASP.NET Core components can do so by visiting a public URL. The same option is also available for MVC flavor of Telerik UI components.

DataGrid Features and Enhancements

R3 2022 includes several Data Grid UX improvements such as adding a configuration option for enabling/disabling column menu as well as grouping and sorting enhancements.

Enable/Disable Column Menu on a Per-Column Basis
Enabling and disabling the Data Grid’s column menu is now available out of the box on a per-column basis. With this new configuration option, developers have full control over which columns should display a column menu.

See how to configure the UI for ASP.NET Core Grid column menu.
See how to configure the UI for ASP.NET MVC Grid column menu.

Hide Currently Grouped Column
Another Data Grid feature added in R3 2022 is the option to hide the column or field which is currently being grouped. Previously, every time a column was grouped, the column would always be displayed, which was not ideal for all the Grid use cases. The new option to hide columns/fields that are being used for grouping ensures flexibility for the .NET developers and smoother experience for the end user.

See how to hide the currently grouped column in UI for ASP.NET Core Grid.
See how to hide the currently grouped column in UI for ASP.NET MVC Grid.

Fire Change Event Only When Row Select and Deselect Are Performed Within Multiple ASP.NET Core Components

In this release, we ship another improvement to anyone dealing with the onChange event when using the select functionality of the Telerik UI components. Previously, this event could be triggered when interacting with rows even when selecting or deselection did not occur. Now onChange event will only fire when a row is selected and deselected

The new behavior and change apply to following ASP.NET Core and MVC UI components—Grid, Calendar, MultiViewCalendar, Listbox, ListView, TreeList, FileManager, Gantt.

PivotGrid v2 Local Data Binding

The local binding feature allows you to populate the Telerik PivotGrid v2 for ASP.NET Core and MVC with local flat data. When the component is configured for local binding, it will serialize the data as part of its data source and perform all data operations on the client. Now you can choose the preferred way to bind data to the PivotGrid: data located on a server somewhere (remote using OLAP) or through local binding.

For those unfamiliar, earlier this year the Telerik UI team released the new and revamped PivotGrid v2 component with a better user experience and design, overall improved performance, and more. Since the new PivotGrid component is being built from the ground up and PivotGrids are quite complex, we wanted to offer both editions of the PivotGrid (old and new) while we build out features in the new PivotGrid v2.

See how to use local binding in the ASP.NET Core PivotGrid UI component.
See how to use local binding in the ASP.NET MVC PivotGrid UI component.

Telerik UI for ASP.NET MVC & Core API Improvements

We are undertaking the effort to make improvements to the product’s API in the next several releases. The goal is to address feedback we received regarding the level of details, descriptions and examples included in the API. With the current release, we have implemented improvements to several of the most used components—DataGrid, DropDownList, DatePicker, DateRangePicker, Data Source and Window. We will continue with the UI for ASP.NET Core and MVC API improvements throughout 2023.

UI for ASP.NET Core Visual Studio Productivity Tools

The latest release of Visual Studio Productivity Tools for Telerik UI for ASP.NET Core includes the following list of new productivity features:

• UI for ASP.NET Core Visual Studio Scaffolder – allows quick scaffolding and mocking of data for some the most used data-bound components, such as the ASP.NET Core Data Grid, TreeList, Scheduler, ListView, Gantt, Chart, Form and Editor.
• UI for ASP.NET Core Code Snippets Pack – boosts coding speed by allowing fast reference to UI components. By typing a shortcut (e.g., “tc” for Telerik ASP.NET Core) or directly the name of the component you need to plug. For example, typing “grid” or just “gr” will conveniently show a dropdown with the available snippet templates for both HTML and TagHelpers which you can insert into your code.

UI for ASP.NET Core TagHelper Snippets

Telerik UI for ASP.NET Core offers HTML and TAG helpers options for initializing and configuring the UI components. Based on your feedback regarding the need for more TAG Helper demos and documentation, we made sure that there is a complete parity between all examples of the HTML and TAG Helpers, and you can now easily switch the component demos and documentation between HTML and TAG Helper View.

Telerik UI for ASP.NET AJAX

Floating Action Button

UI for ASP.NET AJAX continues to grow, and in this release we included a brand-new Floating Action Button component (FAB). The FAB appears on top of all page content and presents the user with the primary action. When clicked, it either executes that action or shows additional action items. The UI for ASP.NET AJAX FloatingActionButton includes multiple configuration options for alignment, color, size and shape, plus the option to customize its content via templates.

See the UI for ASP.NET AJAX Floating Action Button Component.

Accessibility Improvements

With R3 2022, we’ve focused on further improving the components accessibility compliance. The release includes more than 30 accessibility fixes and improvements in multiple components— Calendar, Scheduler, ComboBox, DropDownList, Editor, FileExplorer, Input, DatePicker, DateRangePicker, Prompt, SearchBox, Spell, TabStrip, Window, Wizard, RadGrid, Filter, Splitter and more.

See the UI for ASP.NET AJAX Accessibility Compliance page for more details.

Updated VPAT Document

Along with the accessibility fixes and improvements, we have updated the existing Voluntary Product Accessibility Template (VPAT) for Telerik UI for ASP.NET AJAX. Now the document follows the latest version and include the latest accessibility improvements that have been made to our UI components. The latest version of the VPAT document is available here.

Release Webinar & Twitch Session

Telerik .NET Web, Desktop & Mobile Products Webinar

Wednesday, September 21, 2022 | 11:00 a.m. – 1:00 p.m. ET
Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for Xamarin and UI for .NET MAUI.

Save Your Seat

Join Us on Twitch Today

Live from Devreach’22 @ Progress360: Join the live community session from the Progress360 Streaming Studio on September 14 from 10 a.m. – 11:30 a.m. ET to hear the release highlights and celebrate the DevReach spirit with us at our Livestream Release Party.

And the Best Part About the Release Webinars?

The live webinars and Twitch sessions are a great opportunity for you to ask questions before and during the webinars. We’ll be waiting to hear from you on Twitter—just use the #heyTelerik and #heyKendoUI hashtags. Another great option is the live chat during our release session on CodeItLive, our Twitch channel.

Web APIs are present in most modern systems due to their high performance and ease of integration between different systems. In this context, there is a lot of content available related to APIs, but a very common question, especially for ASP.NET Core beginners, is how to integrate with an API and consume its endpoints. In this article, we will create from scratch a simple Web API and an application in ASP.NET Core and integrate it with this API in a simple way.

Useful Information

The focus of this article will be the integration between a Web API and an ASP.NET Core application, so some subjects will not be covered in detail, such as “What is a Web API” for example. Feel free to browse the blog and deepen your knowledge of these subjects, if that is your objective.

Instead, we will take a hands-on approach and focus on the details of the integration between these technologies.

You can access the complete source code of the final project at this link.

Creating the Solution and Web API Project

First, we will create the solution project, then we will create the Web API project—in this case, a minimal API available in .NET 6—and add it to the solution. So, in the terminal run the following commands:

dotnet new sln --name WeatherForecast
dotnet new web --name WeatherForecast.Web.Api
dotnet sln add WeatherForecast.Web.Api/

Then you can open the file “WeatherForecast.sln” with your favorite IDE. In this article, I’ll use Visual Studio 2022.

Creating the Solution Entity

Our API will provide dummy weather data. Bellow, we will create an entity that will receive the properties, which will be displayed by the ASP.NET application that we will create later. So, inside the API project create a folder called “Models” and inside it create a class called “WeatherForecastModel.” Replace the generated code with the code below:

namespace WeatherForecast.Web.Api.Models
{
    public class WeatherForecastModel
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        public string Summary { get; set; }
    }
}

Creating the Endpoints

Minimal APIs allow us to place the endpoints directly in the Program class; however, to make the code more organized, we will create them in a separate class. So, create a folder called “Endpoints.” Inside that, create a new class called “LocationEndpointsConfig” and replace the code with the below:

using WeatherForecast.Web.Api.Models;

namespace WeatherForecast.Web.Api.Endpoints
{
    public class LocationEndpointsConfig
    {
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        public static void AddEndpoints(WebApplication app)
        {
            app.MapGet("api/find", () =>
            {
                var rng = new Random();
                var weatherForecast = Enumerable.Range(1, 5).Select(index => new WeatherForecastModel
                {
                    Date = DateTime.Now.AddDays(index),
                    TemperatureC = rng.Next(-20, 55),
                    Summary = Summaries[rng.Next(Summaries.Length)]
                })
                .ToArray();

                return Results.Ok(weatherForecast);
            });
        }
    }
}

In this class, we are creating a GET endpoint that will generate some random data and return a “WeatherForecastModel” array filled with the generated data.

Configuring the Endpoints

Now that we’ve created the endpoint needed to return the data, we’ll add the configuration of the class that has the endpoints. So replace the code of the “Program” class with the code below:

using WeatherForecast.Web.Api.Endpoints;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddEndpointsApiExplorer();

var app = builder.Build();

LocationEndpointsConfig.AddEndpoints(app);

app.Run();

And then we can run the project. If we access the address “https://localhost:<PORT NUMBER>/api/find,” we will have the result below. In this article, Fiddler Everywhere will be used to consume the endpoint.

(As the data is random, it will probably be different on your machine.)

With that, our Web API is ready and working. Now we need to create the application that will consume the endpoint we created.

Creating the Web App Project

To consume the endpoint created earlier, we will create a simple application in ASP.NET Core MVC, which will make a request to the API and display the returned data. So, in the same directory where you created the API project, run the commands below, which will create the application project and add it to the solution.

dotnet new mvc --name WeatherForecast.Web

dotnet sln add WeatherForecast.Web/

Creating the Web App Entity

In the “WeatherForecast.Web” project inside the “Models” folder create a new class called “WeatherForecastModel,” and replace the generated code with the code below:

namespace WeatherForecast.Web.Models
{
    public class WeatherForecastModel
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF { get; set; }
        public string Summary { get; set; }
    }
}

Creating the Client

The client will be responsible for direct communication with the API. It will contain a static method responsible for deserializing the API response and formatting it.

So, create a new folder called “Helpers” and add in it a new class called “HttpClientExtensions,” where you can replace the generated code with the code below:

using System.Text.Json;

namespace WeatherForecast.Web.Helpers
{
    public static class HttpClientExtensions
    {
        public static async Task<T> ReadContentAsync<T>(this HttpResponseMessage response)
        {
            if (response.IsSuccessStatusCode == false)
                throw new ApplicationException($"Something went wrong calling the API: {response.ReasonPhrase}");

            var dataAsString = await response.Content.ReadAsStringAsync().ConfigureAwait(false);

            var result = JsonSerializer.Deserialize<T>(
                dataAsString, new JsonSerializerOptions
                {
                    PropertyNameCaseInsensitive = true
                });

            return result;
        }
    }
}

Creating the Service

The service class will be responsible for implementing the methods available in the client we just created—in this case, fetching the data through the API.

So, create a new folder called “Services” and inside it, a folder called “Interfaces.” Inside that folder, create a new interface called “IWeatherForecastService” and replace the generated code with the code below:

using WeatherForecast.Web.Models;

namespace WeatherForecast.Web.Services.Interfaces
{
    public interface IWeatherForecastService
    {
        Task<IEnumerable<WeatherForecastModel>> Find();
    }
}

Now we will create the class that will implement the previous Interface. It will also consume the API endpoint through the route represented by the “BasePath” variable.

Inside the “Services” folder, create a class called “WeatherForecastService” and replace the generated code with the one below:

using WeatherForecast.Web.Models;
using WeatherForecast.Web.Helpers;
using WeatherForecast.Web.Services.Interfaces;

namespace WeatherForecast.Web.Services
{
    public class WeatherForecastService : IWeatherForecastService
    {
        private readonly HttpClient _client;
        public const string BasePath = "/api/find";

        public WeatherForecastService(HttpClient client)
        {
            _client = client ?? throw new ArgumentNullException(nameof(client));
        }

        public async Task<IEnumerable<WeatherForecastModel>> Find()
        {
            var response = await _client.GetAsync(BasePath);

            return await response.ReadContentAsync<List<WeatherForecastModel>>();
        }
    }
}

Creating the Controller

The new controller will use the service method we just created and return the data to the frontend. So, inside the Controllers folder, create a new controller called “WeatherForecastController,” and replace your code with the lines below:

using Microsoft.AspNetCore.Mvc;
using WeatherForecast.Web.Services.Interfaces;

namespace WeatherForecast.Web.Controllers
{
    public class WeatherForecastController : Controller
    {
        private readonly IWeatherForecastService _service;

        public WeatherForecastController(IWeatherForecastService service)
        {
            _service = service ?? throw new ArgumentNullException(nameof(service));
        }

        public async Task<IActionResult> WeatherForecastIndex()
        {
            var products = await _service.Find();
            return View(products);
        }
    }
}

Adding Service Settings

Now that we’ve created the client, service and controller, we need to add their settings to the Program class. So, replace the code of the Program class with the block below. (Replace “<PORT NUMBER>” with the local API port.)

using WeatherForecast.Web.Services;
using WeatherForecast.Web.Services.Interfaces;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddHttpClient<IWeatherForecastService, WeatherForecastService>(c =>
c.BaseAddress = new Uri("https://localhost:<PORT NUMBER>/"));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

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

app.Run();

Configuring the Frontend

Our application is almost ready—we just need to configure the data display. For that, inside the “Views” folder, create a folder called “WeatherForecast” and inside it, a new view called “WeatherForecastIndex.cshtml,” where you can put the code below:

@model IEnumerable<WeatherForecast.Web.Models.WeatherForecastModel>

<br/>
<br/>
<table class="table">
        <tdead>
            <tr>
                <th>Date</th>
                <th>Temperature C</th>
                <th>Temperature F</th>
                <th>Summary</th>
            </tr>
        </tdead>
            <tbody>
                @foreach (var item in Model)
               {
                    <tr>
                        <td>@item.Date</td>
                        <td>@item.TemperatureC</td>
                        <td>@item.TemperatureF</td>
                        <td>@item.Summary</td>
                    </tr>
               }
            </tbody>
    </table>
</div>

And in the file Views > Shared > _Layout.cshtml add the following code below the Privacy tag:

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="WeatherForecast" asp-action="WeatherForecastIndex">Weather Forecast</a>
</li>

Running Both Projects

To run the API project at the same time as the application project, we need to configure it, as you can see in the image below:

Finally, we can start the application—both the API project and the application project will be started. By clicking on the “Weather Forecast” menu, we will be redirected to another page where the API data will be displayed as in the GIF below:

Conclusion

In this article, we created a simple Web API and provided an endpoint to return random data. Next, we created an ASP.NET Core application that consumes this endpoint and displays the data in the browser.

There are many ways to do this communication, but the one taught in the article is certainly one of the simplest.