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
• Setup content fields
• Integrate your app

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.