Question

我正在使用https://github.com/aspnet/JavaScriptServices

中的最新SPA模板

如何将序列化对象从MVC传递给Angular？这可能吗？

Answer 1

乍一看，您有两种选择。如果使用服务器端呈现，则可以使用asp-prerender-data标记帮助程序，否则，可以采用具有数据属性的经典方法。

例如（同时说明两种方法）：

<强> Index.cshtml

<app asp-prerender-module="ClientApp/dist/main-server"

     asp-prerender-data='@JavaScriptHelper.Json(this.Model)'
     data-serverData='@JavaScriptHelper.Json(this.Model)'>

     Loading...
</app>

<强>引导server.ts

现在在boot-server.ts中，如果使用服务器端预呈现，则可以通过params.data访问传递的服务器数据。此外，您应该将服务器数据与生成的html一起传递到客户端（boot-client.ts）。例如：

setImmediate(() => {
    resolve({
        html: state.renderToString(),

        globals: {
            serverData: params.data
        }

    });
    moduleRef.destroy();
});

<强>引导client.ts

如果使用服务器端呈现，则传递的数据（serverData: params.data）将附加到window对象。例如，您可以使用以下内容：

interface ServerData{ id: number, name: string};
let serverData : ServerData = JSON.parse((window as any).serverData);
console.log("My data", serverData);
console.log("id", serverData.id);

如果您已通过数据属性传递了对象，则：

interface ServerData{ id: number, name: string};
let root = document.getElementsByTagName('app')[0];
let serverData : ServerData = JSON.parse((root as any).dataset.serverdata);
console.log("My data", serverData);
console.log("id", serverData.id);

<强> JavaScriptHelper.cs

只是一个辅助类，使用某些设置将对象序列化为字符串。可能有一种更聪明的方式，但是......

using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using Newtonsoft.Json.Serialization;

public static class JavaScriptHelper{
    public static string Json(object obj)
        {
            JsonSerializerSettings settings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver(),
                Converters = new JsonConverter[]
                {
                    new StringEnumConverter(),
                },
                StringEscapeHandling = StringEscapeHandling.EscapeHtml
            };

            return JsonConvert.SerializeObject(obj, settings);
        }
}

P.S。在测试之前，不要忘记运行：webpack --config webpack.config.js

.NET Core SPA模板 - 将数据从MVC传递到Angular2

1 个答案: