Render MVC View as a string for Email (With Angular) - angularjs

Question

Technologies: MVC5, ASP.NET 4.5, Angular 1.2.16
I am dynamically generating many parts of my cshtml view using Angular's ng-repeat statement.
I also want the ability to be able to email the page to a user.
I am trying to avoid recreating the entire Html on my controller.
My View:
<div class="col-md-12 form-horizontal" ng-controller="StatusListController">
<div class="adminButtons" ng-if="currentUser.netId == adminUser">
#*#Html.ActionLink("Send Email","Email","Home")*#
<button type="button" class="btn btn-primary" ng-click="statusEmail()">
Send Email
</button>
<button type="button" class="btn btn-danger" ng-click="statusReset()">
Reset
</button>
</div>
<div class="table-responsive">
<table class="table table-hover ">
<thead>
<tr class="tableHeaderRow">
<th class="col-md-3">
Name
</th>
<th class="col-md-7">
Workload Status
</th>
<th class="col-md-2">
Office
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="associate in associateList">
<td>
{{associate.AssociateName}}
</td>
<td>
<span class="col-md-3 tableLabel">
Short-Term:
</span>
<div class="col-md-9 tableValue"
ng-class="{
'statusBusy': associate.Status == 'busy',
'statusFlex': associate.Status == 'Flexible',
'statusFree': associate.Status == 'Available'
}">
{{associate.Status}}
</div>
<br />
<span class="col-md-3 tableLabel">
Mid-Term:
</span>
<div class="col-md-9 tableValue" ng-class="{
'statusBusy': associate.Status2 == 'busy',
'statusFlex': associate.Status2 == 'Flexible',
'statusFree': associate.Status2 == 'Available'
}">
{{associate.Status2}}
</div>
</td>
<td>
{{associate.Office}}
</td>
</tr>
</tbody>
</table>
</div>
I am calling my mvc controller method on an $html call from my angular controller.
Here's the mvc controller:
public virtual string RenderViewToString(ControllerContext controllerContext, string viewPath, string layoutPath, bool partial)
{
try
{
// first find the ViewEngine for this view
var viewEngineResult = partial
? ViewEngines.Engines.FindPartialView(controllerContext, viewPath)
: ViewEngines.Engines.FindView(controllerContext, viewPath, null);
if (viewEngineResult == null)
{
throw new FileNotFoundException("View cannot be found.");
}
// get the view and attach the model to view data
var view = viewEngineResult.View;
using (var sw = new StringWriter())
{
var viewPage = new ViewPage
{
ViewContext =
new ViewContext(controllerContext, view, controllerContext.Controller.ViewData, controllerContext.Controller.TempData, sw)
};
view.Render(viewPage.ViewContext, sw);
return sw.ToString();
}
}
catch (Exception ex)
{
Console.WriteLine(ex.ToString());
throw;
}
}
The html that it generates has the angular statements in it and not the final render of the view.
Any ideas on how I can get the angular rendered html?

Answer 1

My suggestion would be to just POST your angular-rendered HTML content from the client back to your server, where you server can forward it via email to the user. That way you don't have to do any sort of server-side rendering. You've already got the content rendered by the client, so you might as well use it.
Apart from that, the only other thing I can think of is using a headless browser to render the content. I'm not aware of any headless .NET browsers, but for Node.js there is Phantom.js, which is a headless browser that would render your angular content on the server.
Hope that helps.