.NET Core SPA模板-将数据从MVC传递到Angular2 [英] .NET Core SPA Templates - Passing data from MVC to Angular2

问题描述

我正在使用 https://github.com/aspnet/JavaScriptServices 中的最新SPA模板

I am using the latest SPA template from https://github.com/aspnet/JavaScriptServices

如何将序列化对象从MVC传递到Angular？

How can I pass a serialized object from MVC to Angular? Is this possible?

推荐答案

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

At first glance you have two options. If you use server-side rendering, you can use the asp-prerender-data tag helper, otherwise, you can adopt the classical approach with data attributes.

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

For example (illustrating both approaches at the same time):

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>

boot-server.ts

现在在boot-server.ts中，如果使用服务器端预渲染，则可以通过 params.data 访问传递的服务器数据。同样在这里，您应该将服务器数据以及生成的html传递到客户端（ boot-client.ts ）。例如：

Now in boot-server.ts, if you use server-side prerendering, you can access the passed server data via params.data. Also here you should pass your server data to the client side (boot-client.ts) along with the generated html. For example:

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

        globals: {
            serverData: params.data
        }

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

boot-client.ts

如果使用服务器端渲染，则传递的数据（ serverData：params.data ）将附加到 window 对象。例如，您可能会有类似的内容：

If you use server-side rendering, the passed data (serverData: params.data) will be attached to the window object. For example, you could have something like:

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

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

If you have passed the object via data attributes, then:

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

只是一个帮助程序类，它通过一些设置将对象序列化为字符串。也许有一种更聪明的方法，但是.....

Just a helper class serializing an object to string with some settings. There might be a smarter way, but.....

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

p.s. Before testing don't forget to run: webpack --config webpack.config.js

这篇关于.NET Core SPA模板-将数据从MVC传递到Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！