ASP.NET Logo

ASP.NET CMS

ButterCMS is an API-based CMS that seamlessly integrates with ASP.NET applications. Use ButterCMS and ASP.NET MVC to rapidly build CMS-powerede blogs, pages, and more.

Table of Contents

Introduction

Learn how to create dynamic pages using Butter.

Creating dynamic pages with Butter is a two-step process:

1) Setup custom content fields in Butter
2) Integrate the fields into your application

This guide uses C# with Microsoft's MVC web framework but Butter integrates with any .NET web app. If you need help after reading this, contact us via email, livechat, or book a time with to pair with one of our developers.

Setup content fields

Let's suppose we want to be able to create pages for retail-chain locations using ButterCMS and we're starting out with a basic static page template for a single location:

Controllers/BlogController.cs:

using System.Threading.Tasks;
using System.Web.Mvc;
using ButterCMS;
using Newtonsoft.Json;

namespace ButterCmsExample.Controllers 
{
    public class BlogController : Controller
    {
        private ButterCMSClient Client;

        private static string _apiToken = "b60a008584313ed21803780bc9208557b3b49fbb";

        public BlogController()
        {
            Client = new ButterCMSClient(_apiToken);
        }

        [Route("locations/chicago")]
        public async Task<ActionResult> ShowLocation()
        {
            return View("Location");
        }
    }
}

Views/Blog/Location.cshtml:

<h1>Widget Store - Chicago</h1>
<img src="/images/chicago.jpg">
<p>Our Chicago location is located at 566 Wacker Drive.</p>

Enabling new pages to be created with Butter is a two-step process:

  1. Setup custom content fields in Butter
  2. Integrate the fields into your application

To setup custom content fields, first sign in to the Butter dashboard.

Create a new workspace or click on an existing one. Workspaces let you organize content fields in a friendly way for content editors and have no effect on development or the API. For example, a real-estate website might have a workspace called "Properties" and another called "About Page".

Once you're in a workspace click the button to create a new content field. Choose the "Collection" type and name the field "Location Pages":

On the next screen, we’ll setup the properties for each page in the collection.

Now go back to the work space and create a location:

Integrating your app

To create these pages in our app, we create a dynamic route that fetches content for the page by using a URL parameter. Here's what the code looks like:

Controllers/BlogController.cs:

using System.Threading.Tasks;
using System.Web.Mvc;
using ButterCMS;
using Newtonsoft.Json;

namespace ButterCmsExample.Controllers 
{
    public class BlogController : Controller
    {
        private ButterCMSClient Client;

        private static string _apiToken = "b60a008584313ed21803780bc9208557b3b49fbb";

        public BlogController()
        {
            Client = new ButterCMSClient(_apiToken);
        }

        [Route("locations/{slug}")]
        public async Task<ActionResult> ShowLocation(string slug)
        {
            var json = await Client.RetrieveContentFieldsJSONAsync(
              new string[] { $"location_pages[slug={slug}]" }
            );
            ViewBag.Location = JsonConvert.DeserializeObject(json);
            return View("Location");
        }
    }
}

Views/Location.cshtml:

<h1>Widget Store - @ViewBag.Location.Name</h1>
<img src="@ViewBag.Location.FeatureImage" />
<p>@ViewBag.Location.Description</p>

That's it! If you browse to /locations/chicago, you'll see the content we just entered into Butter.

If you need help after reading this, contact us via email, livechat, or book a time with to pair with one of our developers.

About ASP.NET

ASP.NET is an open-source server-side web application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.

Headless CMS for these technologies and more

Ruby, Rails, Node.js, Python, ASP.NET, Flask, Django, Go, PHP, Laravel, Angular, React, Elixir, Phoenix, Meteor, Vue.js, Javascript, Heroku

Get started now

Sign up with Google Sign up with Github
or