将MVC视图渲染为电子邮件的字符串(使用Angular)

时间:2014-04-30 19:20:11

标签: angularjs razor asp.net-mvc-5

技术:MVC5,ASP.NET 4.5,Angular 1.2.16

我使用Angular的ng-repeat语句动态生成我的cshtml视图的许多部分。 我还希望能够将页面通过电子邮件发送给用户。

我试图避免在我的控制器上重新创建整个Html。

我的观点:

<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>

我在我的角度控制器的$ html调用中调用我的mvc控制器方法。

这是mvc控制器:

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;
        }

}

它生成的html中包含angular语句而不是视图的最终呈现。

关于如何获得角度渲染html的任何想法?

1 个答案:

答案 0 :(得分:2)

我的建议是将POST从客户端返回到服务器的角度呈现的HTML内容{{1}},服务器可以通过电子邮件将其转发给用户。这样您就不必进行任何类型的服务器端渲染。您已经获得了客户端呈现的内容,因此您也可以使用它。

除此之外,我唯一能想到的是使用无头浏览器来呈现内容。我不知道任何无头.NET浏览器,但对于Node.js,有Phantom.js,这是一个无头浏览器,可以在服务器上呈现您的角度内容。

希望有所帮助。