如何通过从asp.NET MVC到Angular2数据 [英] How to pass data from asp.NET MVC to Angular2

问题描述

这是从一个ASP.NET MVC的控制器数据传递到角2.0组分的最佳方式。例如我们使用ASP.NET MVC模式，并想送它一个JSON版本的角，所以我们可以在角使用它。

What is the best way to pass data from an ASP.NET MVC controller to an Angular 2.0 component. For example we use the ASP.NET MVC Model and would like to send a JSON version of it to Angular, so we can use it in Angular.

目前的时刻，控制器所服务的观点，我们能够已有的数据推送到Angular2（模型）。因此不需要额外的AJAX调用来获取这些数据。

At the moment the controller is serving the view we are able to already push some data to Angular2 (the model). So additional AJAX call to fetch that data is not required.

不过，我很努力注入入角度成分。你怎么做到这一点？这有什么好推荐信吗？正如你可能已经注意到，我是很新的Angular2。

However I am struggling to "inject" it into the Angular component. How do you do this? Any good references for this? As you may have noticed, i'm quite new to Angular2.

我index.cshtml看起来是这样的。

My index.cshtml looks like this.

<div class="container">
<div>
    <h1>Welcome to the Angular 2 components!</h1>
</div>
<div class="row">
    <MyAngular2Component>
        <div class="alert alert-info" role="alert">
            <h3>Loading...</h3>
        </div>
    </MyAngular2Component>
</div>
</div>

亲切的问候，

罗布

推荐答案

您可能要查找与AngularJS类似的问题，没有棱角2具体的，作为事物的主要依据仍然是相同的：

You might want to look for similar questions related to AngularJS, not Angular 2 specific, as the main gist of the thing remains the same:

• 您希望您的服务器端剃刀引擎渲染某种观点（即HTML或JS直接）


• 此视图包含其中的部分内容从服务器模型实例或反正服务器数据填补了JS模板（如资源，字典等）


• 在为了正确地填补剃刀一个JS变量，C＃服务器端数据必须正确序列化为JSON格式

在<一个href=\"https://blog.mariusschulz.com/2014/03/25/bootstrapping-angularjs-applications-with-server-side-data-from-aspnet-mvc\"相对=nofollow>这个帖子通过马吕斯舒尔茨你可以看到他的串行数据，并使用该填充模板AngularJS 值组件：

In this post by Marius Schulz you can see as he serializes the data and uses that to fill a template AngularJS value component:

<script>
  angular.module("hobbitModule").value("companionship", @Html.Raw(Model));
</script>

同样的事情也可以作出如注入一些数据到 window.myNamespace.myServerData ，然后有Angular2引导其他供应商之间的数值。

Something similar could be made to inject some data e.g. into window.myNamespace.myServerData, and then have Angular2 bootstrap that value among other providers.

在这一职位由罗埃尔面包车Lisdonk 中，类似的方法被使用，再次向填写基于AngularJS模板，与 NG-INIT 指令：

In this post by Roel van Lisdonk, a similar approach is used, again, to fill an AngularJS-based template, with that ng-init directive:

<div ng-controller="main"
     ng-init="resources={ textFromResource: '@WebApplication1.Properties.Resources.TextFromResource'}">
  <h1>{{ title }}</h1>
  {{ resources.textFromResource }}
</div>

作为第一篇文章指出，有一些思考（在这里粘贴）：

As the first post points out, there's something to think about (pasting here):

提醒一句：我对所使用的方法可能不是很适合大量数据。由于JavaScript的数据被内联到HTML的响应，它是通过网络发送您请求页面每一次。

A word of caution: The method I'm about to use is probably not a good fit for large amounts of data. Since the JavaScript data is inlined into the HTML response, it's sent over the wire every single time you request that page.

此外，如果数据是特定于验证的用户，响应不能被缓存并再传递给不同的用户。考虑与.NET数据这种方式来引导你的角应用时，请记住这一点。

Also, if the data is specific to the authenticated user, the response can't be cached and delivered to different users anymore. Please keep that in mind when considering to bootstrap your Angular Apps with .NET data this way.

如果您提供的页面已经是动态的服务器端，即如果它已经填补了服务器端的数据比特的第二部分可能会少一个问题。

The second part may be less of an issue if your served page is already dynamic server-side, i.e. if it already has bits filled in out of server-side data.

心连心

这篇关于如何通过从asp.NET MVC到Angular2数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！