ASP.NET Core tutorial with Contentful

This ASP.NET Core tutorial will show you how to setup the Contentful client library for an ASP.NET Core application and how to access your content.

Pre-requisites

This tutorial assumes you understand the basic Contentful data model and that you have read and understand the getting started tutorial for the .Net client library.

Contentful.AspNetCore is built on .NET Core and targets .NET Standard 2.0. The client library is cross-platform and runs on Linux, macOS, and Windows.

Installation

Add the package to your ASP.NET Core solution using the NuGet package manager by running the following command in your NuGet package manager console.

1
Install-Package contentful.aspnetcore

Or running the following with the .NET CLI.

1
dotnet add package contentful.aspnetcore

Configuration

The Contentful.AspNetCore package implements the options pattern and the simplest way to configure your space id and access token is by using an appsettings.json file. Add the code below, but add your own values.

1
"ContentfulOptions": {
2
    "DeliveryApiKey": "<access_token>",
3
    "ManagementApiKey": "<cma_access_token>",
4
    "PreviewApiKey": "<preview_access_token>",
5
    "SpaceId": "<space_id>",
6
    "UsePreviewApi": false,
7
    "MaxNumberOfRateLimitRetries": 0
8
  }

You can override each separate option with environment specific config, environment variables or by any other Microsoft.Extensions.Configuration.IConfigurationSource. You can even implement your own.

Register services

Next, register the services that will use the configuration settings in your Startup.cs class. Add a using statement for Contentful.AspNetCore and in the ConfigureServices method add the following line.

1
services.AddContentful(Configuration);

Your first request

Once you have configured everything, you can now leverage the dependency injection of your ASP.NET Core application to retrieve the IContentfulClient or IContentfulManagementClient in your classes. Here’s an example for a controller.

1
public class SampleController : Controller {
2
    private readonly IContentfulClient _client;
3
4
    public SampleController(IContentfulClient client)
5
    {
6
        _client = client;
7
    }
8
}

By using constructor injection you can automatically retrieve an instance of IContentfulClient and use this in your actions to retrieve content.

1
public async Task<IActionResult> Index() {
2
    var products = _client.GetEntries<Product>();
3
}

For more information on how to retrieve content using the IContentfulClient and IContentfulManagementClient refer to our CDA tutorial and CMA tutorial respectively.

Working with assets and the image API

A new feature of ASP.NET core is taghelpers. In the ASP.NET core client library, there are two taghelpers that you can use when working with assets.

If you have an asset stored in Contentful and wish to output an anchor tag to that asset you can use the ContentfulAssetTagHelper. On the anchor tag add an asset_id attribute and the taghelper will automatically retrieve it from Contentful and add it to the href attribute.

1
<a asset-id="<asset_id>">link to asset</a>

If you want to retrieve the asset from a specific locale you can add the locale attribute.

1
<a asset-id="<asset_id>" locale="sv-SE">link to Swedish asset</a>

If the asset is an image you probably want to output an img tag instead of an anchor and can use the ContentfulImageTageHelper.

1
<contentful-image asset-id="<asset_id>" />

If you have the URL to the image available you can save a request by using the URL property instead.

1
<contentful-image url="<full_asset_file_path>" />

There are other attributes you can set that will use the Contentful Image API in the background.

1
<contentful-image
2
  url="<full_asset_file_path>"
3
  width="50"
4
  height="50"
5
  format="Png"
6
  resize-behaviour="Pad"
7
  background-color="#cc0000"
8
  image-focus-area="Face"
9
  corner-radius="10"
10
/>

These all correspond to similar values in our image API and will set the src attribute of the img correctly.

• The width and height attributes will set the width and height of the image and resize it accordingly.
• The format attribute lets you select if you wish your image to be of a specific format, available values are Png, Jpg or Webp.
• The resize-behaviour attribute lets you specify how the image should be resized to fit within the constraints of the width and height.
  • Available values are Pad, Crop, Fill, Thumb and Scale.
• The background-color attribute lets you specify what color the padding of the image should be when using the Pad resize behavior.
  • You can specify your value in using RGB or hash-notation. For example rgb:000080 or #000080.
• The image-focus-area attribute lets you specify which part of an image to focus on when doing resizing. Available values are Top, Left, Right, Bottom, Top_Right, Top_Left, Bottom_Right, Bottom_Left, Face or Faces.
• The corner-radius allows you to round the corner of the image by the specified radius.

There are two attributes specifically for jpeg images.

1
<contentful-image
2
  url="<full_asset_file_path>"
3
  jpg-quality="50"
4
  progressive-jpg="True"
5
/>

• The jpg-quality attribute lets you specify a number between 0 and 100 that corresponds to the quality of the outputted JPEG image.
• The progressive-jpg attribute lets you specify whether to use progressive JPEGs or not.

The output from a contentful-image will be a regular img tag and every attribute added to it that is not part of the taghelper will be retained. This means that you can, for example, specify an alt text or class directly on the taghelper and the outputted image will keep it.

1
<contentful-image
2
  url="<full_asset_file_path>"
3
  width="50"
4
  height="50"
5
  alt="<alt_text>"
6
/>

You can also use the contentful-image to output a srcset for different image sizes.

1
<contentful-image
2
  url="<full_asset_file_path>"
3
  width="50"
4
  height="50"
5
  alt="<asset_name>"
6
>
7
  <contentful-source />
8
  <contentful-source size="800w" width="800" />
9
</contentful-image>

Each contentful-source can have the same properties as a contentful-image and will generate a srcset url with those properties. If you omit the size attribute the width of the contentful-image will be used. The example above would output an img tag like this.

1
<img
2
  src="asset_url?w=50&h=50"
3
  alt="<alt_text>"
4
  srcset="asset_url?w=50&h=50 50w, asset_url?w=800&h=50 800w"
5
/>

Working with webhooks and middleware

Webhooks offer a clean and simple way to let Contentful notify an application when something changes with your content. A simple approach to set a webhook up would be to create a controller with an action and let Contentful call that action when something occurs.

1
public class WebHookController : Controller {
2
3
    [HttpPost]
4
    public IActionResult Consumer(dynamic payload) {
5
        //Do something when the hook is triggered
6
7
        return Json("All is well");
8
    }
9
}

This works fine, but it can feel overly complicated to have to create a controller to be able to consume a webhook. The ASP.NET Core client library offers another way by using a middleware component that you set up in your Startup.cs.

Add the following to your Configure method.

1
app.UseContentfulWebhooks(consumers => {
2
3
});

This injects the middleware into the pipeline. The middleware will automatically catch any incoming webhook requests from Contentful and iterate through any added consumers and execute them one at a time.

To add a consumer use the AddConsumer method.

1
app.UseContentfulWebhooks(consumers => {
2
       consumers.AddConsumer<Entry<dynamic>>("<webhook-name>", "<topic-type>", "<topic-action>", (s) =>
3
            {
4
                //This is the consumer method
5
                return null;
6
            }
7
        );
8
});

Each call to AddConsumer takes at least 4 parameters:

• The webhook name which is the name of the webhook you specified in Contentful.
• The topic type which is Entry, Asset or ContentType.
• The topic action which is create, save, auto_save, archive, unarchive, publish, unpublish or delete. For any of the values, you can pass in "*" as a wildcard.
• Func<T, object> where you specify T as part of the method signature. This is the actual consumer, the code that will be triggered.

If you, for example, want to add a consumer for a webhook triggered every time an entry is created, you add a consumer like the below.

1
app.UseContentfulWebhooks(consumers => {
2
  consumers.AddConsumer<dynamic>("*", "Entry", "create", (s) =>
3
      {
4
          //Code to notify someone a new entry has been created
5
6
          //Return an object that will be serialized into Json and viewable in the Contentful web app
7
          return new { Result = "Ok" };
8
      }
9
  );
10
});

It’s valid to add multiple consumers for the same request type. They will execute in order.

1
app.UseContentfulWebhooks(consumers => {
2
3
       consumers.AddConsumer<dynamic>("*", "Entry", "create", (s) =>
4
            {
5
                return new { Result = "Ok" };
6
            }
7
        );
8
9
        consumers.AddConsumer<dynamic>("*", "Entry", "*", (s) =>
10
            {
11
                return new { Result = "Ok again!" };
12
            }
13
        );
14
});

You can add authorization by setting the WebhookAuthorization property.

1
app.UseContentfulWebhooks(consumers => {
2
3
       consumers.AddConsumer<dynamic>("*", "Entry", "create", (s) =>
4
            {
5
                return new { Result = "Ok" };
6
            }
7
        );
8
9
        consumers.WebhookAuthorization = (httpcontext) => false;
10
});

WebhookAuthorization is a Func<HttpContext, bool> that you can set to any method accepting an HttpContext and return a bool.

1
app.UseContentfulWebhooks(consumers => {
2
3
        consumers.WebhookAuthorization = YourAuthorizationMethod;
4
});

In your method, you can then inspect the HttpContext and verify that the request is authorized. If it is, return True, else return False and the request will fail with a 401 error.

You can add per-consumer authorization.

1
app.UseContentfulWebhooks(consumers => {
2
3
       consumers.AddConsumer<dynamic>("*", "Entry", "create", (s) =>
4
            {
5
                return new { Result = "Ok" };
6
            },
7
            (httpContext) => {
8
                var authorized = false;
9
10
                //Check whether the request is authorized and set the authorized variable accordingly.
11
12
                return authorized;
13
            }
14
        );
15
16
});

This consumer authorization is a Func<HttpContext, bool> and the principle is the same, but this authorization will only execute for the specific consumer and not for every request.

Next steps

• Explore the .NET client library GitHub repository