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

附言测试前不要忘记运行: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屋！