c# - tag - Cómo pasar datos de asp.NET MVC a Angular2

tag helpers asp net core

Question

Cuál es la mejor manera de pasar datos de un controlador MVC de ASP.NET a un componente Angular 2.0. Por ejemplo, usamos el modelo MVC de ASP.NET y nos gustaría enviar una versión de JSON a Angular, para que podamos usarlo en Angular

En el momento en que el controlador está sirviendo la vista, ya podemos enviar algunos datos a Angular2 (el modelo). Por lo tanto, no se requiere una llamada AJAX adicional para recuperar esos datos.

Sin embargo, estoy luchando para "inyectarlo" en el componente Angular. ¿Cómo haces esto? ¿Alguna buena referencia para esto? Como habrás notado, soy bastante nuevo en Angular2.

Mi index.cshtml se ve así.

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

Saludos cordiales,

Robar

Answer 1

Encontré una solución mucho más simple. ¡No intentes obtener el atributo en el constructor! Utilice el hook ngOnInit() lugar. La propiedad será accesible siempre y cuando haya sido decorada con @Input() . Simplemente parece que no está disponible cuando se llama al constructor.

Componente HTML:

<MyComponent [CustomAttribute]="hello"></MyComponent>

Componente TS:

export class MyComponentComponent {
    @Input()
    public CustomAttribute: string;

    constructor() {}

    ngOnInit() {
        console.log("Got it! " + this.CustomAttribute);
    }
}

Answer 2

Es posible que desee buscar preguntas similares relacionadas con AngularJS, no específicas de Angular 2, ya que la idea principal sigue siendo la misma:

• desea que su motor Razor del lado del servidor genere algún tipo de vista (es decir, HTML o JS directamente)
• esta vista contiene una plantilla JS en la que parte del contenido se llena desde una instancia de modelo de servidor o, de todos modos, datos del servidor (por ejemplo, un recurso, diccionario, etc.)
• Para llenar correctamente una variable JS desde Razor, los datos del lado del servidor C # deben ser serializados correctamente en un formato JSON.

En esta publicación de Marius Schulz puede ver cómo serializa los datos y los utiliza para completar un componente de value AngularJS de plantilla:

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

Se podría hacer algo similar para inyectar algunos datos, por ejemplo, en window.myNamespace.myServerData , y luego hacer que Angular2 reinicie ese valor entre otros proveedores.

En este post de Roel van Lisdonk, se usa un enfoque similar, de nuevo, para llenar una plantilla basada en AngularJS, con esa directiva ng-init :

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

Como señala el primer post, hay algo que pensar (pegar aquí):

Una advertencia: el método que estoy a punto de usar probablemente no sea adecuado para grandes cantidades de datos. Dado que los datos de JavaScript están incorporados en la respuesta HTML, se envían por cable cada vez que solicita esa página.

Además, si los datos son específicos para el usuario autenticado, la respuesta ya no se puede almacenar en caché y entregar a diferentes usuarios. Tenga esto en cuenta cuando considere arrancar sus aplicaciones angulares con datos .NET de esta manera.

La segunda parte puede ser un problema menor si su página servida ya es dinámica del lado del servidor, es decir, si ya tiene bits rellenados fuera de los datos del lado del servidor.

HTH

Answer 3

La mejor manera que he encontrado para pasar datos desde MVC (o cualquier página de alojamiento / inicio) es especificar los datos como un atributo en el componente bootstrapped, y usar ElementRef para recuperar el valor directamente.

A continuación se muestra un ejemplo de MVC derivado de esta respuesta , que indica que no es posible usar @Input para componentes de nivel raíz.

Ejemplo:

//index.cshtml
<my-app username="@ViewBag.UserName">
    <i class="fa fa-circle-o-notch fa-spin"></i>Loading...
</my-app>


//app.component.ts
import {Component, Input, ElementRef} from ''@angular/core'';

@Component({
    selector: ''my-app'',
    template: ''<div> username: <span>{{username}}</span> </div>''
})
export class AppComponent {
    constructor(private elementRef: ElementRef) {}

    username: string = this.elementRef.nativeElement.getAttribute(''username'')
}

Si desea recuperar datos más complejos que no son adecuados para un atributo, puede usar la misma técnica, simplemente coloque los datos en un elemento HTML <input type=''hidden''/> o un elemento <code> oculto, y use JS simple para recuperar el valor.

myJson: string = document.getElementById("myJson").value

Advertencia: acceda al DOM directamente desde una aplicación vinculada a datos como Angular, rompe el patrón de enlace de datos y debe usarse con precaución.

Answer 4

Primero debe agrupar sus servicios y controladores en archivos de módulos separados y cargar los servicios antes que los controladores. Por ejemplo:

dist
|--services.js
|--controllers.js

Luego, debe cargar el código JavaScript de los Servicios a través del resultado de ASP.NET MVC JavaScript, aquí debe insertar sus datos de inicio.

public class ScriptController: Controller
{
  public ActionResult GetServices(){
   string file= File.ReadAllText(Server.MapPath("~dist/services.js"));
   //modify the file to inject data or 
   var result = new JavaScriptResult();         
   result.Script = file;
   return result;     
}

Luego en el index.html carga los scripts de la siguiente manera

<script src="/script/getservices"></script>
<script src="/dist/controller.js"></script>

De esta manera puede inyectar datos en el código angular durante la carga. Sin embargo, incluso esto tiene un impacto en el rendimiento debido al tiempo empleado en recuperar la vista, compilar la vista y vincular los datos a la vista. Para una carga inicial, el rendimiento aún se puede mejorar si usa Server Side Rendering.

Answer 5

Puede usar la función de Input expuesta por @angular/core , tengo, por ejemplo, un componente Angular 2 para mostrar mensajes de información al usuario de la aplicación

Mi plantilla HTML toma una propiedad de Angular 2 Message

<div class="alert alert-info col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
    <i class="fa fa-info-circle"></i> {{ Message }}
</div>

La propiedad Message se pasa como una entrada a mi componente Angular 2 llamado informationmessage.component.ts, por ejemplo

import { Component, Input } from ''@angular/core'';

@Component({
    selector: ''informationmessage'',
    templateUrl: ''../Templates/informationmessage.component.html''
})
export class InformationMessageComponent {
    @Input() Message: string;
}

Luego paso los datos a mi InformationMessageComponent mediante el enlace de propiedades en la página HTML, por ejemplo.

<informationmessage [Message]="InformationMessage"></informationmessage>

Puede reemplazar InformationMessage en el ejemplo anterior con los datos que obtiene de su controlador MVC, por ejemplo

<informationmessage [Message]="@Model.InformationMessage"></informationmessage>

Tenga en cuenta: no probé este escenario, pero no hay ninguna razón técnica para que no funcione, al final del día, simplemente está vinculando un valor a una propiedad de Angular 2.

Answer 6

src / ApplicationConfiguration.ts

export class ApplicationConfiguration {
    public setting1: string;
    public setting2: string;
}

src / main.ts

declare var config : ApplicationConfiguration;
var providers = [{ provide: ApplicationConfiguration, useValue: config }];
platformBrowserDynamic(providers).bootstrapModule(AppModule)
.catch(err => console.log(err));

src / index.html

  <script type="text/javascript">
    var config = {setting1: "value1", setting2: "value2"};
  </script>

src / app / app.component.ts

export class AppComponent {

  private _config : ApplicationConfiguration;

  constructor(config: ApplicationConfiguration) {

    this._config = config;

  }

}