DEV Community: .NET

Making AI smarter with an MCP server that manages short URLs

Frank Boucher ☁ — Tue, 15 Apr 2025 14:09:00 +0000

Have you ever wanted to give your AI assistants access to your own custom tools and data? That's exactly what Model Context Protocol (MCP) allows us to do, and I've been experimenting with it lately.

(Version française ici)

I read a lot recently about Model Context Protocol (MCP) and how it is changing the way AI interacts with external systems. I was curious to see how it works and how I can use it in my own projects. There are many tutorial available online but one of my favorite was written by James Montemagno Build a Model Context Protocol (MCP) server in C#. This post isn't a tutorial, but rather a summary of my experience and what I learned along the way while building a real MCP server that manages short URLs.

MCP doesn't change AI itself, it's a protocol that helps your AI model to interact with external resources: API, databases, etc. The protocol simplifies the way AI can access an external system, and it allows the AI to discover the available tools from those resources. Recently I was working on a project that manages short URLs, and I thought it would be a great opportunity to build an MCP server that manages short URLs. I wanted to see how easy it is to build and then use it in VSCode with GitHub Copilot Chat.

Code: All the code of this post is available in the branch exp/mcp-server of the AzUrlShortener repo on GitHub.

Setting Up: Adding an MCP Server to a .NET Aspire Solution

The AzUrlShortener is a web solution that uses .NET Aspire, so the first thing I did was create a new project using the command:

dotnet new web -n Cloud5mins.ShortenerTools.MCPServer -o ./mcpserver

Required Dependencies

To transform this into an MCP server, I added these essential NuGet packages:

Microsoft.Extensions.Hosting
ModelContextProtocol.AspNetCore

Since this project is part of a .NET Aspire solution, I also added references to:

The ServiceDefaults project (for consistent service configuration)
The ShortenerTools.Core project (where the business logic lives)

Integrating with Aspire

Next, I needed to integrate the MCP server into the AppHost project, which defines all services in our solution. Here's how I added it to the existing services:

var manAPI = builder.AddProject<Projects.Cloud5mins_ShortenerTools_Api>("api")
                        .WithReference(strTables)
                        .WaitFor(strTables)
                        .WithEnvironment("CustomDomain",customDomain)
                        .WithEnvironment("DefaultRedirectUrl",defaultRedirectUrl);

builder.AddProject<Projects.Cloud5mins_ShortenerTools_TinyBlazorAdmin>("admin")
        .WithExternalHttpEndpoints()
        .WithReference(manAPI);

// 👇👇👇 new code for MCP Server
builder.AddProject<Projects.Cloud5mins_ShortenerTools_MCPServer>("mcp")
        .WithReference(manAPI)
        .WithExternalHttpEndpoints();

Notice how I added the MCP server with a reference to the manAPI - this is crucial as it needs access to the URL management API.

Configuring the MCP Server

To complete the setup, I needed to configure the dependency injection in the program.cs file of the MCPServer project. The key part was specifying the BaseAddress of the httpClient:

var builder = WebApplication.CreateBuilder(args);       
builder.Logging.AddConsole(consoleLogOptions =>
{
    // Configure all logs to go to stderr
    consoleLogOptions.LogToStandardErrorThreshold = LogLevel.Trace;
});
builder.Services.AddMcpServer()
    .WithTools<UrlShortenerTool>();

builder.AddServiceDefaults();

builder.Services.AddHttpClient<UrlManagerClient>(client => 
            {
                client.BaseAddress = new Uri("https+http://api");
            });

var app = builder.Build();

app.MapMcp();

app.Run();

That's all that was needed! Thanks to .NET Aspire, integrating the MCP server was straightforward. When you run the solution, the MCP server starts alongside other projects and will be available at http://localhost:{some port}/sse. The /sse part of the endpoint means (Server-Sent Events) and is critical - it's the URL that AI assistants will use to discover available tools.

Implementing the MCP Server Tools

Looking at the code above, two key lines make everything work:

builder.Services.AddMcpServer().WithTools<UrlShortenerTool>(); - registers the MCP server and specifies which tools will be available
app.MapMcp(); - maps the MCP server to the ASP.NET Core pipeline

Defining Tools with Attributes

The UrlShortenerTool class contains all the methods that will be exposed to AI assistants. Let's examine the ListUrl method:

[McpServerTool, Description("Provide a list of all short URLs.")]
public List<ShortUrlEntity> ListUrl()
{
    var urlList = _urlManager.GetUrls().Result.ToList<ShortUrlEntity>();
    return urlList;
}

The [McpServerTool] attribute marks this method as a tool the AI can use. I prefer keeping tool definitions simple, delegating the actual implementation to the UrlManager class that's injected in the constructor: UrlShortenerTool(UrlManagerClient urlManager).

The URL Manager Client

The UrlManagerClient follows standard HttpClient patterns. It receives the pre-configured httpClient in its constructor and uses it to communicate with the API:

public class UrlManagerClient(HttpClient httpClient)
{
    public async Task<IQueryable<ShortUrlEntity>?> GetUrls()
    {
        IQueryable<ShortUrlEntity> urlList = null;
        try{
            using var response = await httpClient.GetAsync("/api/UrlList");
            if(response.IsSuccessStatusCode){
                var urls = await response.Content.ReadFromJsonAsync<ListResponse>();
                urlList = urls!.UrlList.AsQueryable<ShortUrlEntity>();
            }
        }
        catch(Exception ex){
            Console.WriteLine(ex.Message);
        }

        return urlList;
    }

    // other methods to manage short URLs
}

This separation of concerns keeps the code clean - tools handle the MCP interface, while the client handles the API communication.

Using the MCP Server with GitHub Copilot Chat

Now for the exciting part - connecting your MCP server to GitHub Copilot Chat! This is where you'll see your custom tools in action.

Configuring Copilot to Use Your MCP Server

Once the server is running (either deployed in Azure or locally), follow these steps:

Open GitHub Copilot Chat in VS Code
Change the mode to Agent by clicking the dropdown in the chat panel
Click the Select Tools... button, then Add More Tools

Selecting the Connection Type

GitHub Copilot supports several ways to connect to MCP servers:

There are multiple options available - you could have your server in a container or run it via command line. For our scenario, we'll use HTTP.

Note: At the time of writing this post, I needed to use the HTTP URL of the MCP server rather than HTTPS. You can get this URL from the Aspire dashboard by clicking on the resource and checking the available Endpoints.

After selecting your connection type, Copilot will display the configuration file, which you can modify anytime.

Interacting with Your Custom Tools

Now comes the fun part! You can interact with your MCP server in two ways:

Natural language queries : Ask questions like "How many short URLs do I have?"
Direct tool references : Use the pound sign to call specific tools: "With #azShortURL list all URLs"

The azShortURL is the name we gave to our MCP server in the configuration.

Key Learnings and Future Directions

Building this MCP server for AzUrlShortener taught me several valuable lessons:

What Worked Well

Integration with .NET Aspire was remarkably straightforward
The attribute-based approach to defining tools is clean and intuitive
The separation of tool definitions from implementation logic keeps the code maintainable

Challenges and Considerations

The csharp-SDK is only a few weeks old and still in preview
OAuth authentication isn't defined yet (though it's being actively worked on)
Documentation is present but evolving rapidly as the technology matures, so some features may not be fully documented yet

For the AzUrlShortener project specifically, I'm keeping this MCP server implementation in the experimental branch mcp-server until I can properly secure it. However, I'm already envisioning numerous other scenarios where MCP servers could add great value.

If you're interested in exploring this technology, I encourage you to:

Check out the GitHub repo
Fork it and create your own MCP server
Experiment with different tools and capabilities

Join the Community

If you have questions or want to share your experiences with others, I invite you to join the Azure AI Community Discord server:

The MCP ecosystem is growing rapidly, and it's an exciting time to be part of this community!

~Frank

.NET Updates February 2025 - .NET 10 Preview, Visual Studio 2022 v17.13, Gen AI for Beginners and more!

Frank Boucher ☁ — Mon, 03 Mar 2025 22:11:21 +0000

This month, Jon Galloway and Frank Boucher bring us the latest updates in the .NET world! In their February .NET news video, they cover exciting developments, including the release of Visual Studio 2022 v17.13, improvements in .NET 9 networking, new features for enhanced Razor productivity, and much more.
This blog post contains all the links mentioned in the video, so you can dive deeper into each topic and explore the community's insights. Enjoy!

Links shared during the video

Visual Studio 2022 v17.13 is Now Available! (Mads Kristensen) - Many new features related to productivity, who doesn't love that? There are more with Copilot, Debugging & diagnostics, Git tooling, and more!
C# Dev Kit Updates: .NET Aspire, Hot Reload, and More! (Wendy Breiding (SHE/HER)) - Our beloved C# Dev Kit extension for VSCode just got even better! It can now support projects wihthout a csproj. There are debugging, testing enhancements, and now you can add .NET Aspire Orchestration to your solution with one click. The post has a video where Katie Savage shows all the new features.
.NET 9 Networking Improvements (Máňa, Natalia, Anton) - Everyone will benefit from the improvements, but if you want to know all the details, this post goes in-depth on all the new features and improvements in .NET 9 related to networking.
.NET MAUI Performance Features in .NET 9 (Jonathan, Simon) - This post goes over the improvements iving some comparisons before and after. Really interesting to see the impact of the changes.
New Features for Enhanced Razor Productivity (Leslie Richardson) - I love the new "Extract to Component" feature, it will save me so much time. There is also some pretty amazing work done around the Roslyn C# Tokenizer. A must read for Web developers.
.NET 10 Preview 1 (.NET Team) - This is it! This is a great post that goes over the version Preview. There also a great 75-minutes unboxing video: .NET Previews Unboxed - .NET 10 Preview 1, C# 14, HybridCache, & More with all the team.
.NET Aspire 9.1 (Maddy Montaquila) - Our dashboard got a new version! Clearer UI with grouping resources, different themes, Localization, improvement in the logs management, and more! To get all that goodness, we only have to change the version to 9.1.
Announcing Generative AI for Beginners – .NET (Pablo Lopes) - This post announces the perfect course to get started with Generative AI. It's only 5 short lessons, it is a free course, and material is available in multiple languages: Chinese (Simplified), Chinese (Traditional), French, Japanese, Korean, Portuguese, Spanish, and German. There is a Discord, jump in!

Share Your Thoughts

We hope you found this month's .NET updates informative and engaging. We're always looking to improve and would love to hear your feedback on this new format. Do you find it useful? How can we make it better? Please leave your comments below or reach out to Jon Galloway or Frank Boucher directly. Your insights are invaluable to us!

Thank you for being a part of the .NET community!

Happy coding!

Different Containerising Options for .NET Developers

Justin Yoo — Mon, 12 Aug 2024 13:00:59 +0000

As a .NET developer, if you want to containerise your .NET apps, you know you need a Dockerfile first. Dockerfile is a spec that describes which OS is used, where the .NET code is located, how the .NET code is compiled and how the .NET app is executed. Once your Dockerfile is ready, you can build your container image. But is the Dockerfile the only option for building your .NET apps in a container? How about the container orchestration? Is there any way to orchestrate containers other than running the docker compose up command? Throughout this post, I'm going to discuss which options are available for .NET developers to containerise your .NET apps.

You can find a sample code from:

devkimchi / msbuild-for-containers

This provides sample .NET apps using container images with Dockerfile, with MSBuild, and with .NET Aspire support on Docker Desktop.

MSBuild for Containers

As a .NET developer, when you build a container image for your app, you can use the Dockerfile to define the container image. However, you can also use the dotnet publish command to build and publish the container image without a Dockerfile. This repository provides sample .NET apps using container images with Dockerfile and with dotnet publish.

In addition to that, if you want to orchestrate containers Docker Compose is usually the first approach. However, you can also use the .NET Aspire to generate the Docker Compose file from the .NET Aspire manifest JSON file. This repository also provides a sample .NET app using the .NET Aspire to orchestrate containers.

Prerequisites

.NET SDK 8.0+ with .NET Aspire workload

Visual Studio or Visual Studio Code + C# Dev Kit

Aspirate

Docker Desktop

Getting Started

Run with Dockerfile

Run docker init to create a new Dockerfile for…

View on GitHub

Prerequisites

There are a few prerequisites to containerise .NET apps effectively.

.NET SDK 8.0+ with .NET Aspire workload and Aspirate
Docker Desktop

Containerise with `Dockerfile`

In the sample code repository, there are two .NET apps, ApiApp and WebApp. When you run both apps locally, it communicates with each other by running the following commands:

dotnet run --project ./MSBuildForContainers.ApiApp

dotnet run --project ./MSBuildForContainers.WebApp

Now, you want to containerise both apps. How can you do that? The first option is to write a Dockerfile for each app. You can either manually write Dockerfile or run the command, docker init. Once you have Dockerfile files for both apps, run the following commands to build the container images:

# For ApiApp
docker build . -t apiapp:latest

# For WebApp
docker build . -t webapp:latest

We all know how Dockerfile is useful to build container images. However, Dockerfile is yet another code and should be maintained. If you have many apps to containerise, you need to write Dockerfile files respectively. This is a bit cumbersome. Is there any other way to containerise .NET apps, without writing Dockerfile files?

Containerise with `dotnet publish`

MSBuild supports containerisation by itself. It uses the dotnet publish command to build the container image for each app. To do this, you might need to update your .csproj file to include the containerisation settings. The following is the MSBuildForContainers.ApiApp.csproj file:

<PropertyGroup>
  <ContainerRepository>apiapp</ContainerRepository>
  <ContainerImageTag>latest</ContainerImageTag>
</PropertyGroup>

These two properties replaces the --tag option in the docker build command. Once you have these properties in the .csproj file, run the following command. Note that the -t:PublishContainer indicates the containerisation and the --os and --arch options specify the target OS and architecture.

dotnet publish ./MSBuildForContainers.ApiApp \
    -t:PublishContainer \
    --os linux --arch x64

Then, you'll have the container image. If you want to change the base image to the chiseled container one, add another property to the .csproj file. The following property sets the chiseled Ubuntu 24.04 image as the base image.

<PropertyGroup>
  <ContainerBaseImage>mcr.microsoft.com/dotnet/aspnet:8.0-noble-chiseled</ContainerBaseImage>
</PropertyGroup>

Then, run the dotnet publish command above again. This time, the container image is built based on the chiseled image. Let's do the same thing against the MSBuildForContainers.WebApp.csproj file. This way, you can containerise your .NET apps without writing Dockerfile files.

Alternatively, you don't even need those properties in the .csproj file. You can run the following command to build the container image directly like this:

dotnet publish ./MSBuildForContainers.ApiApp \
    -t:PublishContainer \
    --os linux --arch x64 \
    -p:ContainerBaseImage=mcr.microsoft.com/dotnet/aspnet:8.0-noble-chiseled \
    -p:ContainerRepository=apiapp \
    -p:ContainerImageTag=latest

You have the same development experience as building the container image with the docker build command, without having to rely on Dockerfile.

Now, you've got chiseled container images for both API app and web app. How to let them talk to each other?

Container orchestration with `docker compose`

The existing web app container image can't talk to the API app container image because it doesn't know where the API app container is. To make the web app container talk to the API app container, you need to slightly modify the web app and build the container image again. Open the MSBuildForContainers.WebApp/Program.cs file and update the base address value as follows:

// Before
builder.Services.AddHttpClient<IApiAppClient, ApiAppClient>(http => http.BaseAddress = new Uri("https://localhost:5051/"));

// After
builder.Services.AddHttpClient<IApiAppClient, ApiAppClient>(http => http.BaseAddress = new Uri("http://apiapp:8080/"));

Run the dotnet publish command again to build the web app container image. Now, you can manually run the docker run command to run both containers by attaching the same network. But for the container orchestration, the docker compose up command is much easier to use. The docker-compose.yml file is already prepared in the sample code repository. Run the following command:

docker compose -f ./docker-compose.yaml up

Then, both containers are up and running. The web app container can talk to the API app container. This is how you can orchestrate containers with docker compose up. Again, this Docker Compose file is yet another code and should be maintained. If you have many apps to orchestrate, how would you manage them?

Container orchestration with .NET Aspire and Aspirate

.NET Aspire is to orchestrate .NET apps in containers. For this Docker Compose orchestration purpose, Aspirate is used, which is a tool that generates the Docker Compose file, a Kustomize file or helm file for the container orchestration. To use Aspirate, you need to install it first:

dotnet tool install -g aspirate

In the sample code repository, Both web app and API app are orchestrated with .NET Aspire in another branch. Switch to the aspire branch with the command:

git switch aspire

Let's generate the Docker Compose file with Aspirate. Run the following command to generate the .NET Aspire manifest file first:

dotnet run --project ./MSBuildForContainers.AppHost \
    -- \
    --publisher manifest \
    --output-path ../aspire-manifest.json

Then, generate the Docker Compose file with the Aspirate command. Note that it intentionally excludes the .NET Aspire dashboard.

aspirate generate \
    --project-path ./MSBuildForContainers.AppHost \
    --aspire-manifest ./aspire-manifest.json \
    --output-format compose \
    --disable-secrets --include-dashboard false

Now, you have the Docker Compose file generated. Run the docker compose up command to orchestrate the containers. This way, you can orchestrate your .NET apps in containers without manually writing the Docker Compose file.

So far, I've walked through how .NET developers can containerise their .NET apps with different options. You can either write Dockerfile files or use dotnet publish to build container images. You can orchestrate containers by writing the Docker Compose file by hand or letting .NET Aspire and Aspirate generate it automatically. Which one do you prefer?

More about MSBuild for Containers?

If you want to learn more options about containers with MSBuild, the following links might be helpful.

How use a Blazor QuickGrid with GraphQL

.NET Guest Blogger — Wed, 24 Jul 2024 17:05:00 +0000

This is the second post in a series of posts about GraphQL and .NET. In the first post, we saw how to query a GraphQL API in .NET using Strawberry Shake from a console application. In this post, we will see how to fill a Blazor QuickGrid component with data fetched with GraphQL. We will also use the virtualization feature of the QuickGrid to improve performance.

Get the code!
You can find the code for this post in the startrek-demo GitHub repo. Once more we will be using the StarTrek GraphQL API that was created with Data API Builder (DAB) and is running locally in a Docker container, and accessible at http://localhost:5000/graphql. If you really want to follow along you can find the setup steps and T-SQL script in the repo. But the important part is that this will work with any data source that you want to expose through GraphQL.

Adding a GraphQL query to Blazor

Once more we will use StrawberryShake to generate a client for us based on the schema. Using your favourite method, add the StrawberryShake.Blazor package to the project.

Let’s create a dotnet-tools manifest, add the GraphQL tool, and download the GraphQL schema to generate the client code specifying the client name “StartrekClient”, using the following commands:

dotnet new tool-manifest

dotnet tool install StrawberryShake.Tools --local

dotnet graphql init http://localhost:5000/graphql -n StartrekClient

For this post demo, we will list all the actors from the StarTrek series. Using the GraphQL IDE for Developers Banana Cake Pop we can build a query:

query GetActors() {
  actors{
    items {
      id
      name
      birthYear
    }
  }
}

We can then save this query in a file named GetActors.graphql in the subfolder name ‘Queries’ to keep things clean. Once the project is built the client StartrekClient will be generated and contains GetActors.

Adding the QuickGrid component

QuickGrid is a recent Razor component that provides a simple and convenient data grid component for common grid rendering scenarios. It is highly optimized and uses advanced techniques to achieve optimal rendering performance. Add the package Microsoft.AspNetCore.Components.QuickGrid to the project.

Adding a QuickGrid to a Blazor page is straightforward. Assuming that result contains our list of Actor, here is an example of how to use it:

<QuickGrid Items="result.Actors!.Items.AsQueryable()">
    <PropertyColumn Property="@(a => a.Id)" Sortable="true" />
    <PropertyColumn Property="@(a => a.Name)" Sortable="true" />
    <PropertyColumn Property="@(a => a.BirthYear)" Sortable="true" />
</QuickGrid>

This example is simple and only shows three simple columns mapped directly on properties, but note that much more customization is possible. The Items property is an IQueryable that allows the QuickGrid to improve performance and the user experience, like being able to sort columns easily, and so much more. One of the differences between IQueryable and IEnumerable is that IQueryable will retrieve all the rows of the tables and apply the WHERE clause in memory but IQueryable will apply the WHERE clause in the source and only retrieve the requested rows.

To bind the QuickGrid Items property to the GraphQL query, we can use the <UseGetActors> component that was generated by StrawberryShake. <UseGetActors> has a few child components: <ChildContent>, <ErrorContent>, and <LoadingContent> that will be displayed based on the state of the query. Let’s have a look at a page that uses this component.

@page "/graphql"
@using Microsoft.AspNetCore.Components.QuickGrid

@inject IStartrekClient startrekClient

<PageTitle>Actors by GraphQL</PageTitle>

<h1>Actors by GraphQL</h1>

<UseGetActors Context="result">
    <ChildContent>
        <div class="grid">
            <QuickGrid Items="result.Actors!.Items.AsQueryable()">
                <PropertyColumn Property="@(a => a.Id)" Sortable="true" />
                <PropertyColumn Property="@(a => a.Name)" Sortable="true" />
                <PropertyColumn Property="@(a => a.BirthYear)" Sortable="true" />
            </QuickGrid>
        </div>
    </ChildContent>
    <ErrorContent>
        Something went wrong ...<br />
        @result.First().Message
    </ErrorContent>
    <LoadingContent>
        Loading ...
    </LoadingContent>
</UseGetActors>

The component will automatically fetch the data using the query and make it available in the context. We can add the QuickGrid component to the <ChildContent> and bind the Items using the context result, provided by the <UseGetActors> component. The <ErrorContent> and <LoadingContent> are very convenient to display messages based on the state of the query.

QuickGrid virtualization

The QuickGrid component supports virtualization, which is a technique that only renders the rows that are visible in the viewport. This can greatly improve the performance of the grid when dealing with a large number of rows. To be able to use virtualization, your data source must support the parameters StartIndex (aka skip) and Count (aka limit or take). If your data source only uses tokens like a cursor, you can use the pagination feature of the QuickGrid, but not the virtualization.

Customizing the GraphQL API to support virtualization

For the first part of this post and the previous one, we used Data API Builder (DAB) to create a GraphQL API. Unfortunately, it doesn’t support the required parameters, so we cannot be used for the virtualization. However we can use the pagination and all the other features of the QuickGrid. To make it work with virtualization, we used HotChocolate, the same package used by DAB to create a custom GraphQL API. If you are interested, the code and setup steps are available in GitHub repo.

To enable virtualization, we need to set the Virtualize property to true on the QuickGrid component. The QuickGrid will require an ItemsProvider that will be used to fetch the data. Here is what the QuickGrid looks like with virtualization enabled.

<div class="grid" tabindex="-1">
    <QuickGrid ItemsProvider="@actorProvider" Virtualize="true">
        <PropertyColumn Property="@(a => a.Id)" Sortable="false" />
        <PropertyColumn Property="@(a => a.Name)" Sortable="true" 
                                                    IsDefaultSortColumn="true" 
                                                    InitialSortDirection="SortDirection.Ascending"/>
        <PropertyColumn Property="@(a => a.BirthYear)" Sortable="false" />
    </QuickGrid>
</div>

<div class="my-2"
    <div class="inline-block my-1">
        Total: <strong>@numResults results</strong>
    </div>
</div>

Create an ItemsProvider

Now we need to set actorProvider so it can be called by the QuickGrid with StartIndex and Count parameters to fetch the data.

@code {
    GridItemsProvider<IGetActors_Actors_Items> actorProvider;

    int numResults = 0;

    protected override async Task OnInitializedAsync()
    {
        actorProvider = async request =>
        {
            var response = await startrekClient.GetActors.ExecuteAsync(request.StartIndex, request.Count, request.CancellationToken);           

            if (numResults == 0 && !request.CancellationToken.IsCancellationRequested)
            {
                numResults = response!.Data.Actors.TotalCount;
                StateHasChanged();
            }

            return GridItemsProviderResult.From(
                    items: new List<IGetActors_Actors_Items>(response!.Data.Actors.Items),
                    totalItemCount: response!.Data.Actors.TotalCount
            );
        };

    }

}

On the first call, we update the numResults with the total number of items and call StateHasChanged() to update the UI. This is optional but it shows that there is more actors than what is displayed.

The actorProvider is defined as GridItemsProvider<IGetActors_Actors_Items> where the interface was once more generated for us. The provider needs to return two properties: items that contains the subset of Actor returned by query and totalItemCount. The totalItemCount is used by the QuickGrid to know how many items are available and to display the scrollbar correctly.

GraphQL Query with parameters

The last step is to modify the GraphQL query to accept the skip and take parameters. This way the QuickGrid could ask to return the next 20 Actor after the skipping the first 100 ones. Here is the modified query:

query GetActors($skip: Int, $take: Int) {
  actors(skip: $skip, take: $take, sortBy: "name") {
    items {
      id
      name
      birthYear
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
    }
    totalCount
  }
}

It’s a good idea to test your query in Banana Cake Pop to make sure it works as expected. Here as an example when the query is called without any parameters all actors are returned.

And here is the result of the same query with the parameters skip: 5 and take: 20. Notice that the sixth actor of the first return is now the first one as the first five has been skipped.

The final result

Here is the final result of the QuickGrid with virtualization enabled. The QuickGrid will only render the rows that are visible, in our case 20 actors.

As you can see in the animation above ... is used as a place holder when scrolling. Once you stop scrolling the actorProvider will then fetch the actors using the parameters skip and take and update the QuickGrid with the new data. We look at the Network tab of the browser’s Developer Tools, we can see the all the different calls to the GraphQL API with the parameters used.

Conclusion

In this post, we saw how to bind a Blazor QuickGrid component to a GraphQL query using Strawberry Shake. We also saw how to enable virtualization to improve the performance of the grid when dealing with a large number of rows. The QuickGrid component is very powerful and can be customized in many ways. Let us know in the comments what you would like to see next about the QuickGrid component.

Video demo

During the ASP.NET Community Standup – Using GraphQL to enhance Blazor apps I did a demo of the QuickGrid with GraphQL in a Blazor application. You can watch the video below.

References

The post How use a Blazor QuickGrid with GraphQL appeared first on .NET Blog.

Join us for Azure Developers - .NET Day on April 30!

Jon Galloway — Wed, 24 Apr 2024 19:46:15 +0000

We’re excited to announce the upcoming Azure Developers – .NET Day! Join us on April 30th for a full day dedicated to .NET developers and the Azure ecosystem. This online event is packed with expert-led sessions that delve into AI advancements, app development efficiencies, cloud-native capabilities, and much more.

Event Date: April 30, 2024
Time: Starting at 8:00 AM PST / 16:00 UTC

Why Attend?

Azure Developers – .NET Day 2024 is an essential event for .NET developers aiming to elevate their cloud development capabilities. This day-long online event offers an unparalleled opportunity to discover the latest and greatest Azure features tailored for .NET applications. You'll engage with cutting-edge cloud development techniques that not only save time and money but also optimize customer experiences.

Hear directly from the experts behind Azure's most sought-after services for developers, covering key areas such as AI, app development, data services, serverless computing, cloud-native computing, and boosting developer productivity. Don’t miss out on this chance to interact and engage with the team throughout the day, taking your cloud development skills to the next level.

Speaker Lineup and Sessions

This year’s event features a diverse lineup of topics and speakers:

AI Coding Techniques with Bruno Capuano: Dive into practical AI coding sessions that add intelligence to your .NET applications.
GitHub Copilot for SQL Development by Subhojit Basak: Learn how to integrate AI into your database development processes for faster, more reliable outputs.
Redis & .NET Apps with Catherine Wang: Enhance your applications' consistency and smart capabilities using Redis.
Change Data Streams with Azure SQL by Brian Spendolini: Quickly set up change data streams with .NET, showcasing real-time data manipulation and analysis.
Data API Builders on Azure with Frank Boucher and Jerry Nixon: Auto-generate and deploy data APIs on Azure Static Web Apps effortlessly.
gRPC on App Service by Jeff Martinez and Byron Tardif: Host your gRPC workloads efficiently using .NET on Windows-based Azure App Services.
Event-Driven Architectures by Davide Mauri: Implement event-driven solutions with .NET and Azure Functions for responsive, scalable applications.

Enhancing Developer Productivity

Azure API Center by Justin Yoo: Unlock new levels of productivity with Azure API management tools.
VS Code Project Setups by Ori Bar-ilan: Master your project setups and streamline your development workflow using Visual Studio Code.

Learn and Connect

Join us online via the Azure Developers YouTube and Twitch channels to transform your ideas into exceptional solutions with .NET and Azure.

We look forward to seeing you there. Let’s build something amazing together!

.NET Monthly Roundup - March 2024 - .NET 9 Preview 2, Smart Components, AI fun, and more!

Jon Galloway — Tue, 09 Apr 2024 18:19:48 +0000

📆Welcome to our March .NET Monthly Roundup with Jon Galloway! In just 3 minutes, Jon breaks down the latest news from the month of March 2024 that .NET developers need to know.

What did you think?

With so much new information coming at you each month, we're looking at ways to bring you the highlights. Let us know if this helps, and how we can do it better next month!

Jon

Earn your C# Certification with new Learning Series

Katie Savage — Mon, 01 Apr 2024 17:09:40 +0000

We are excited to announce our new C# for Certification email learning series.

🚀 Sign up for the learning series: https://aka.ms/learningseries/csharp/signup

This eight-week email series is intended to provide you with all the resources you need to complete the Foundational C# Certification training and take the exam. The learning series will give you a structured learning path and new content to learn each week.

How does the C# Certification learning series work?

Sign up for the learning series: https://aka.ms/learningseries/csharp/signup
Check your inbox each week to find a new lesson with a structured learning path, and additional resources.
Complete the learning path and hands-on projects.
Take the exam and earn your certification!

What is C#?

C# (pronounced "See Sharp") is a modern, object-oriented, and type-safe programming language. C# enables developers to build many types of secure and robust applications that run in .NET. With C#, you can build...

Business applications to capture, analyze, and process data
Dynamic web applications that can be accessed from a web browser
Games, both 2D and 3D
Financial and scientific applications
Cloud-based applications
Mobile applications

...and more!

The C# Roadmap

As a C# beginner, it can be difficult to know where to start. The C# Roadmap below was created by experts at Microsoft.

Get started!
Write your first code using C#
Create and run simple C# console applications
Add logic to C# console applications
Work with variable data in C# console applications
Create methods in C# console applications
Debug C# console applications
Wrap up and additional learning resources

🚀 Begin earning your C# Certification today: https://aka.ms/learningseries/csharp/signup

Not ready to sign up for the series? Get access to the content through the Foundational C# Certification page: https://aka.ms/csharp/certification

.NET Monthly Roundup - February 2024 - Top blog posts, VS News, .NET 9 Vision, and more!

Jon Galloway — Thu, 07 Mar 2024 21:44:44 +0000

Welcome to our February .NET Monthly Roundup with Jon Galloway! In just 3 minutes, Jon breaks down the latest news from the month of February 2024 that .NET developers need to know.

What did you think?

With so much new information coming at you each month, we're looking at ways to bring you the highlights. Let us know if this helps, and how we can do it better next month!

Jon

An Introduction to the World of Containers with .NET 8

James Montemagno — Fri, 16 Feb 2024 19:19:47 +0000

Containers are a popular way of packaging and distributing applications in today’s Cloud Native landscape – but what are they, and how can .NET developers integrate them into their workflows? Today, let's talk about what containers are, how they relate to Docker, and how the .NET tooling makes it easy for developers to easily streamline the process of creating containers with .NET.

Containers with .NET For Beginners

Follow along with this blog and our new Beginner's series on containers and Docker for .NET.

What are Containers?

A container is a standard unit of software that packages up code and all its dependencies. It allows applications to run consistently across different computing environments. You'll find containers supported by all major cloud providers with various ways to run your containers, ranging from serverless options to fully managed Kubernetes services.

Containers provide a flexible choice for application packaging, making it a valuable skill to master. That's why .NET invests in making containers easy to use for developers.

The Benefits of Containers

So why should you use containers? The answer lies in a uniform deployment and uniform execution of applications. Containers make the job of maintaining and operating your services much easier in the long term. In addition, the whole world of automated DevOps, tooling, alerting, and monitoring can be integrated into your solution.

Developer Setup

The first step is to install the .NET SDK. You can use the .NET CLI to create containers which by default creates Linux containers. You can create these containers on any operating system; Windows, Mac, Linux, or the Windows Subsystem for Linux. The choice is yours however you enjoy developing. Additionally, having Docker Desktop installed will enable you to run your containers after you create them with the .NET SDK.

Making Containers with .NET

Now, let's take a look at just how easy it can be to create containers with .NET. To start, let's first create a new web app with the following .NET CLI command:



dotnet new web -o container-webapp

Then we can navigate to the new directory that it was created in:



cd container-webapp

You can now run the application locally with dotnet run, but let's go ahead and create a container by publishing the app with the following command:



dotnet publish -t:PublishContainer

By running a single command, you can create a container of your web app. This is the same publish command you're already familiar with for publishing your web application, but now it's being used for containerization. The .NET SDK will provide you with information about the container it just created, such as the container name, the tag, and the base image it chose.

Speaking of the base image, it's like the operating system and software configuration that your application will be deployed onto. In this example, as a web app targeting .NET 8, the SDK chose an ASP.NET image from Microsoft with the 8.0 tag. You will see output from the command similar to the following that highlights this:



Building image 'conainer-webapp' with tag 'latest' on top of the base image 'mcr.microsoft.com/dotnet/aspnet:8.0'.
Pushed image 'conainer-webapp:latest' to local registry via 'docker'.

To get a closer look at the image we just built, we can use Docker Desktop. It's fascinating to see how the image is composed of different layers, each representing a portion of the file system or a change to the operating environment. These layers come together to create a runnable container.

Let's run the container with a docker run command that specifies the container name:



docker run -P container-webapp

Optionally, we could run the container directly from Docker Desktop instead of using the command. If we open Docker Desktop, we can access our running application by clicking on the port link next to our container:

And there you have it, a browser will open up with our new web app running in a container!

Next Steps: Deep Dive into Tooling & Publishing to the cloud

That wraps up our quick taste of containers and how .NET makes it easy to get started with them. This is only the first step, and I have a full beginner's series that dives deeper into the tooling experiences available on the command line as well as in Visual Studio and Visual Studio Code. Then I go into how you can take your containers and publish them to container registries. In addition, we have full training on Microsoft Learn for containers, microservices, and cloud-native development with .NET that I highly recommend you checkout.

Thanks for joining me on this quick introduction to containers with .NET.

AI-assisted content. This article was partially created with the help of AI. An author reviewed and revised the content as needed.

.NET Monthly Roundup - August 2023 - .NET 8 Preview 7, Visual Studio releases, perf and GC fun!

Jon Galloway — Fri, 08 Sep 2023 21:22:43 +0000

Welcome to our August .NET Monthly Roundup with Jon Galloway! In just 3 minutes, Jon breaks down the latest news from the month of August 2023 that .NET developers need to know.

What did you think?

With so much new information coming at you each month, we're looking at ways to bring you the highlights. Let us know if this helps, and how we can do it better next month!

Jon

Leveraging Existing Web Content to Build Hybrid Apps with .NET MAUI

James Montemagno — Fri, 04 Aug 2023 16:20:55 +0000

Are you a web developer intrigued by the idea of building native mobile & desktop applications? If you've been developing with Angular, React, or even just HTML and JavaScript, there's good news for you! In this post, we'll explore how you can leverage your existing web content to build native iOS, Android, Mac, and Windows apps using .NET MAUI and the experimental HybridWebView.

Why Reuse Web Content?

Imagine being able to reuse all the goodness you've created with your chosen web frameworks in your native mobile apps. By leveraging your existing web development skills, you can save time and effort by not starting from scratch with native mobile development. Plus, you can bring the power of your web components, designs, and functionality to the native world.

Additionally, building native apps with .NET MAUI enables you to access native APIs and controls, giving you the best of both worlds. You can mix and match UI components, create a seamless user experience, and even access platform-specific features. The possibilities are practically endless.

Introducing .NET MAUI

.NET MAUI is a powerful framework that builds on top of .NET for iOS, Android, Mac, and Windows (WinUI3), allowing you to create native apps with a unified API. I provides a single robust framework to make cross-platform app development easier than ever before.

Out of the box, .NET MAUI enables you to use C# and XAML to build native UIs from shared code and access the underlying native APIs from C#. You have the flexibility to create apps that run on multiple platforms without sacrificing the performance and user experience provided by native controls and APIs.

Building Hybrid Apps with Blazor Hybrid

If you're a Blazor developer, you're in luck! Blazor developers can easily reuse their Blazor components between their web applications and .NET MAUI applications. This powerful capability is included "in the box" which allows you to blend native and web UI components seamlessly.

You can mix Blazor and native controls to create a unified and consistent user interface. This means you can build your UIs once and use them across different platforms, reducing development effort and ensuring a consistent user experience. The hybrid web view experiment offers great potential for Blazor developers looking to extend their apps to the native mobile world.

Building Hybrid Apps with HTML, JavaScript, Angular, or React

.NET MAUI doesn't limit you to just Blazor. You can also leverage your skills in HTML, JavaScript, Angular, or React to build hybrid apps with .NET Maui. This is made possible by the introduction of the experimental HybridWebView, which enables you to incorporate web content into your native apps seamlessly.

To get started, you'll need to add the Ejl.MauiHybridWebView NuGet package to your MAUI app. This package provides all the necessary functionality for integrating web content. Once added, you can create your HTML, JavaScript, and CSS files to define the web user interface.

The hybrid web view works by embedding a native web view control into your app, allowing it to display your web content using the platform's native rendering capabilities. This ensures a consistent look and feel across different platforms, while still giving you the freedom to use your preferred web technologies.

Take It Further - Full React Application

If you want to take it a step further, you can even embed an entire React application within your .NET MAUI app. This is made possible by the flexibility and power of the HybridWebView to incorporate complex web applications into native apps seamlessly and communicate between JavaScript and C#.

By embedding a React application, you can bring the full power of React's component-centric approach to your native app development. This allows you to create highly interactive and dynamic user interfaces, leveraging the extensive React ecosystem of libraries and components. All while access native APIs and business logic written in C#.

With the capability to integrate web technology like React into your .NET MAUI apps, the possibilities for creating rich, engaging, and performant mobile experiences are virtually limitless.

Conclusion

Building native apps doesn't have to mean starting from scratch. With .NET MAUI, you can leverage your existing web development skills and components to create powerful and feature-rich native apps. Whether you're using Blazor, Angular, React, or just HTML and JavaScript, .NET MAUI provides a unified platform to build cross-platform apps that deliver native performance and access to native features.

So, why not explore the possibilities of reusing your existing web content with .NET MAUI? Start building your native mobile apps today and discover the countless opportunities to create amazing experiences for your users.

References

This article was partially created with the help of AI. James reviewed and revised the content as needed.

.NET Monthly Roundup - June 2023 - .NET 8 Preview 5, VS News, and more!

Jon Galloway — Fri, 07 Jul 2023 20:54:39 +0000

Welcome to our June .NET Monthly Roundup with Jon Galloway! In just 3 minutes, Jon breaks down the latest news from the month of June 2023 that .NET developers need to know.

What did you think?

With so much new information coming at you each month, we're looking at ways to bring you the highlights. Let us know if this helps, and how we can do it better next month!

Jon

DEV Community: .NET

Making AI smarter with an MCP server that manages short URLs

Setting Up: Adding an MCP Server to a .NET Aspire Solution

Required Dependencies

Integrating with Aspire

Configuring the MCP Server

Implementing the MCP Server Tools

Defining Tools with Attributes

The URL Manager Client

Using the MCP Server with GitHub Copilot Chat

Configuring Copilot to Use Your MCP Server

Selecting the Connection Type

Interacting with Your Custom Tools

Key Learnings and Future Directions

What Worked Well

Challenges and Considerations

Join the Community

.NET Updates February 2025 - .NET 10 Preview, Visual Studio 2022 v17.13, Gen AI for Beginners and more!

Links shared during the video

Share Your Thoughts

Different Containerising Options for .NET Developers

devkimchi / msbuild-for-containers

This provides sample .NET apps using container images with Dockerfile, with MSBuild, and with .NET Aspire support on Docker Desktop.

MSBuild for Containers

Prerequisites

Getting Started

Run with Dockerfile

Prerequisites

Containerise with Dockerfile

Containerise with dotnet publish

Container orchestration with docker compose

Container orchestration with .NET Aspire and Aspirate

More about MSBuild for Containers?

How use a Blazor QuickGrid with GraphQL

Adding a GraphQL query to Blazor

Adding the QuickGrid component

QuickGrid virtualization

Create an ItemsProvider

GraphQL Query with parameters

The final result

Conclusion

Video demo

References

Join us for Azure Developers - .NET Day on April 30!

Why Attend?

Speaker Lineup and Sessions

Enhancing Developer Productivity

Learn and Connect

.NET Monthly Roundup - March 2024 - .NET 9 Preview 2, Smart Components, AI fun, and more!

Top links

What did you think?

Earn your C# Certification with new Learning Series

How does the C# Certification learning series work?

What is C#?

The C# Roadmap

.NET Monthly Roundup - February 2024 - Top blog posts, VS News, .NET 9 Vision, and more!

Top links

What did you think?

An Introduction to the World of Containers with .NET 8

Containers with .NET For Beginners

What are Containers?

The Benefits of Containers

Developer Setup

Making Containers with .NET

Next Steps: Deep Dive into Tooling & Publishing to the cloud

.NET Monthly Roundup - August 2023 - .NET 8 Preview 7, Visual Studio releases, perf and GC fun!

Top links

What did you think?

Leveraging Existing Web Content to Build Hybrid Apps with .NET MAUI

Why Reuse Web Content?

Introducing .NET MAUI

Building Hybrid Apps with Blazor Hybrid

Building Hybrid Apps with HTML, JavaScript, Angular, or React

Take It Further - Full React Application

Conclusion

References

.NET Monthly Roundup - June 2023 - .NET 8 Preview 5, VS News, and more!

Top links

What did you think?

Run with `Dockerfile`

Containerise with `Dockerfile`

Containerise with `dotnet publish`

Container orchestration with `docker compose`