I am currently working on an Umbraco website and developing a custom plugin for the backend that allows users to export an Excel worksheet from an HTML table. In order to achieve this functionality, I am utilizing AngularJS along with a C# controller. Below are the relevant files involved in this process.
//The C# Controller located at /App_Code/ExportBlankDictionaryController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Umbraco.Web.Editors;
using Umbraco.Core.Persistence;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.IO;
namespace AngularUmbracoPackage.App_Code
{
[Umbraco.Web.Mvc.PluginController("AngularUmbracoPackage")]
public class ExportBlankDictionaryController : UmbracoAuthorizedJsonController
{
//[System.Web.Http.AcceptVerbs("GET", "POST")]
//[System.Web.Http.HttpGet]
public void ExportExcell()
{
var keys = new System.Data.DataTable("BlankDictionaryItems");
keys.Columns.Add("Keys", typeof(string));
keys.Columns.Add("Description", typeof(string));
keys.Rows.Add("Enter First Dictionary Name Here", " ");
var grid = new GridView();
grid.DataSource = keys;
grid.DataBind();
HttpContext.Current.Response.ClearContent();
HttpContext.Current.Response.BufferOutput = true;
HttpContext.Current.Response.AddHeader("Content-disposition", "attachment; filename=BlankDictionaryItems.xls");
HttpContext.Current.Response.ContentType = "application/vnd.ms-excel";
HttpContext.Current.Response.Charset = "";
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
grid.RenderControl(htw);
HttpContext.Current.Response.Output.Write(sw.ToString());
HttpContext.Current.Response.Flush();
HttpContext.Current.Response.End();
}
}
}
// The AngularJS controller located at /App_Plugins/datatable/datatable.controller.js:
angular.module("umbraco")
.controller("AngularUmbracoPackage.ExportBlankDictionaryController", function ($scope, keyResource) {
keyResource.exportToExcell().then(function (response) {
alert("Table Generated!");
})
});
This is the datatable.resource.js file housed within the same directory:
// Adds the resource to umbraco.resources module:
angular.module('umbraco.resources').factory('keyResource',
function ($q, $http) {
// The factory object returned
return {
// This calls the API controller we setup earlier
exportToExcell: function () {
console.log("button clicked");
return $http.post("backoffice/AngularUmbracoPackage/ExportBlankDictionary/ExportExcell");
}
};
}
);
If needed, here's the package.manifest.json file:
{
propertyEditors:[
{
name: "DataTable editor",
alias: "my.datatable.editor",
editor:{
view: "~/app_plugins/datatable/table.html",
valueType: "JSON"
}
}
],
javascript: [
"~/app_plugins/datatable/datatable.controller.js",
"~/app_plugins/datatable/datatable.resource.js"
]
}
Below is the content of the table.html file which serves as the view:
<div class="ExportDiv" ng-controller="AngularUmbracoPackage.ExportBlankDictionaryController">
<table id="table1" class="table table-bordered" runat="server">
<thead>
<tr>
<th>Key</th>
<th>Populate Dictionary Item Names in Key Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enter First Dictionary Name Here</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-success" ng-click="exportToExcel()">Export Table</button>
The issue I'm facing is that while the Umbraco page loads successfully and the alert is triggered upon opening the developer section of Backoffice, clicking the Export Table button does not result in any action. My goal is to have the Excel sheet download when this button is clicked. Can you please assist me in troubleshooting this problem? Thank you!