# Edit Templates in an ASP.NET Core MVC Application (.NET Core)

> The ReportingCloud Editor Widget integrates with ASP.NET Core MVC to enable browser-based template editing. The cross-platform application lists templates from cloud storage, loads them into the editor widget via the Web API, and saves modifications back using Base64-encoded data.

> **Note:** This article is outdated and may no longer be accurate.

- **Author:** Bjoern Meyer
- **Published:** 2018-07-18
- **Modified:** 2026-07-17
- **Description:** The ReportingCloud Editor Widget integrates with ASP.NET Core MVC to enable browser-based template editing. The cross-platform application lists templates from cloud storage, loads them into the editor widget via the Web API, and saves modifications back using Base64-encoded data.
- **4 min read** (723 words)
- **Tags:**
  - JavaScript
  - .NET Core
  - Reporting
  - ReportingCloud
  - Widget
- **Web URL:** https://www.textcontrol.com/blog/2018/07/18/edit-templates-in-a-net-core-mvc-application/
- **LLMs URL:** https://www.textcontrol.com/blog/2018/07/18/edit-templates-in-a-net-core-mvc-application/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2018/07/18/edit-templates-in-a-net-core-mvc-application/llms-full.txt
- **GitHub Repository:** https://github.com/TextControl/ReportingCloud.Widget.Core

---

We just published an ASP.NET Core MVC Web Application that shows how to use the [ReportingCloud Web API](https://www.reporting.cloud/) and the ReportingCloud Editor Widget to edit templates in any browser. This project is targeting .NET Core, is cross-platform and therefore, can be deployed to Windows, macOS, and Linux

The following screenshot shows this demo project:

![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2018/07/18/a/assets/screenshot_widget.webp "ASP.NET Core Web Application")

This very basic sample lists all templates located in your ReportingCloud template storage. When clicking on a template name, the template is loaded into the editor and saved back to your template storage when pressing the *Save Template* button.

### How Does It Work?

The project uses [TXTextControl.ReportingCloud.Core](https://www.nuget.org/packages/TXTextControl.ReportingCloud.Core/), the Microsoft .NET Core wrapper classes for Text Control ReportingCloud.

The *Index* action of the *HomeController* uses ReportingCloud to retrieve all templates using the [Templates/List](https://docs.reporting.cloud/docs/endpoint/templates/list) endpoint and returns this list to the view.

```
public IActionResult Index()
{
    // create a ReportingCloud object with stored API-Key
    ReportingCloud rc = new ReportingCloud(RCSettings.APIKey);

    // return a list of templates
    return View(rc.ListTemplates());
}
```

In the view, a table is created based on the templates:

```
@model List<TXTextControl.ReportingCloud.Template>

...

@foreach (var template in Model)
{
    <tr>
        <td><a onclick="LoadDocument('@template.TemplateName')">@template.TemplateName</a></td>
        <td class="text-right"><small>@(template.Size / 1024) KB</small></td>
        <td class="text-right"><small>@String.Format("{0:d}", template.Modified)</small></td>
    </tr>
}
```

When clicking on a template file name, the following JavaScript calls a controller method to load the selected template from the ReportingCloud template storage. The returned document is then loaded into the editor widget.

```
function LoadDocument(template) {
  var serviceURL = "/ReportingCloud/Template?TemplateName=" + template;

  // call the "GET Template" controller method with a template name
  $.ajax({
      type: "GET",
      url: serviceURL,
      contentType: 'application/json',
      success: successFunc,
      error: errorFunc
  });

  function successFunc(data, status) {

      streamType = TXTextControl.StreamType.InternalUnicodeFormat;

      // create the proper StreamType based on the extension
      if (template.endsWith("docx")) {
          streamType = TXTextControl.StreamType.WordprocessingML;
      }
      else if (template.endsWith("doc")) {
          streamType = TXTextControl.StreamType.MSWord;
      }
      else if (template.endsWith("rtf")) {
          streamType = TXTextControl.StreamType.RichTextFormat;
      }

      // load the document into the widget
      textControl1.loadDocument(streamType, data);

      // enable the save button and set heading
      $("#saveBtn").removeAttr("disabled");
      loadedDocument = template;
      $("#documentName").text(loadedDocument);
  }

  function errorFunc(data, success) {
      console.log(data);
  }
}
```

The controller method *Template* uses the ReportingCloud Web API to retrieve the template and returns it as a Base64 encoded string that can be loaded into the editor.

```
[HttpGet]
public IActionResult Template([FromQuery] TemplateRequest templateRequest)
{
    // create a ReportingCloud object with stored API-Key
    ReportingCloud rc = new ReportingCloud(RCSettings.APIKey);

    // download document from ReportingCloud template storage
    byte[] document = rc.DownloadTemplate(templateRequest.TemplateName);

    // return Base64 string version
    return new OkObjectResult(Convert.ToBase64String(document));
}
```

This project doesn't use any references to TX Text Control and uses only ReportingCloud functionality - completely cross-platform.

### How to Use the Sample?

In order to use the sample project, you will need to perform some easy steps including the creation of a ReportingCloud account:

1. Create a ReportingCloud account here:
    
    [https://portal.reporting.cloud/account/register/](https://portal.reporting.cloud/Account/Register/)
2. In your [Manage Account](https://portal.reporting.cloud/Manage/Index/) area, create an API Key:
    
    ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2018/07/18/a/assets/account.webp "ASP.NET Core Web Application")
3. In the [Widgets](https://portal.reporting.cloud/Widget/Manage/) area, create a new widget location. If you are testing the sample project on your local machine from within Visual Studio, use *localhost* as the hostname:
    
    ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2018/07/18/a/assets/widget.webp "ASP.NET Core Web Application")
4. Click on *Create Tag* to create a customized JavaScript tag.
5. Download the Visual Studio project from [GitHub](https://github.com/TextControl/ReportingCloud.Widget.Core/archive/master.zip) and open it in Visual Studio.
6. Find the file *appsettings.json*, open it and add your API Key to the *APIKey* value. In our sample, this JSON looks like this:
    
    ```
    {
      "ReportingCloudSettings": {
        "APIKey": "HUOJVK04b7e7ZhD15tUS5Xq3iOgEg5hHRRqGMriZ8"
      },
      "Logging": {
        "IncludeScopes": false,
        "LogLevel": {
          "Default": "Warning"
        }
      }
    }
    ```
7. Find the file *Index.cshtml* in the *Views -> Home* folder, open it and add replace the JavaScript tag in line 7 with your created JavaScript tag:
    
    ```
    <script src="https://portal.reporting.cloud/Widget/Script/FQ2WTQFTx9HXcouF8xNoBfGhbqbD9TFrKpceM4DWs"></script>
    ```
8. Compile and start the application.

We would love to hear your feedback about ReportingCloud and this cross-platform widget. Contact us to join the conversation.

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [ReportingCloud Editor Widget Released to Beta](https://www.textcontrol.com/blog/2018/07/13/reportingcloud-editor-widget-released-to-beta/llms.txt)
- [Integrate Documents in any Platform: Visit us at BASTA! 2018](https://www.textcontrol.com/blog/2018/09/06/first-impressions-of-that-conference-2018/llms.txt)
- [Technology Preview: Embeddable HTML Widget to integrate Document Editing to Angular, React and other Frameworks](https://www.textcontrol.com/blog/2018/03/01/embeddable-html-widget-for-all-frameworks/llms.txt)
- [Tutorial: Merging your First Template using the ReportingCloud .NET Core Wrapper in Visual Studio Code](https://www.textcontrol.com/blog/2017/10/21/merging-your-first-template-using-the-reportingcloud/llms.txt)