it-swarm.com.de

Serverseitige C # MVC mit AngularJS

Ich benutze .NET MVC gerne und habe es in der Vergangenheit ziemlich oft benutzt. Ich habe auch SPAs mit AngularJS erstellt, ohne dass eine andere Seite als die ursprüngliche geladen wurde. Ich denke, ich möchte in vielen Fällen eine Mischung aus beiden verwenden. Richten Sie die Anwendung zunächst mit .NET MVC ein und richten Sie die Routing-Serverseite ein. Richten Sie dann jede Seite als Mini-SPA ein. Diese Seiten können mit vielen clientseitigen Funktionen sehr komplex sein.

Meine Verwirrung besteht darin, wie die Bindung der Modellansicht sowohl mit .NET MVC als auch mit dem AngularJS-Bereich behandelt wird. Vermeide ich die Verwendung von Rasiermesser-HTML-Helfern? Die HTML-Helfer erstellen das Markup hinter den Kulissen, sodass es beim Versuch, mithilfe der Helfer eckige Tags hinzuzufügen, unordentlich werden kann. So fügen Sie beispielsweise ng-model zu @ Html.TextBoxFor (x => x.Name) hinzu. Auch ng-repeat würde nicht funktionieren, weil ich mein Modell nicht in den Bereich lade, oder? Ich möchte immer noch eine c # foreach-Schleife verwenden?

Wo zeichne ich die Trennlinien? Hat jemand .NET MVC und AngularJS dazu gebracht, gut zusammen zu spielen, und was sind Ihre architektonischen Vorschläge dazu?

12
Ryan Langton

Sie können sicherlich jede Mischung aus clientseitigem und serverseitigem Rendering verwenden, aber ich würde davon abraten, ASP.NET MVC-Helfer mit AngularJS-Direktiven zu mischen. Auf den ersten Blick scheint dies eine gute Idee zu sein, da Sie bereits daran gewöhnt sind, diese Helfer zu verwenden, und nicht "rohes HTML" schreiben müssen, aber sie den Zweck der clientseitigen Anwendungen nicht erfüllen: Trennung von Bedenken, Reaktionsfähigkeit, Datenbindung und Testbarkeit.

Es gibt definitiv einen Ort, an dem Mini-SPAs in einer größeren, traditionellen Webanwendung erstellt werden können, insbesondere wenn Sie eine Legacy-Anwendung konvertieren oder wenn Teile der größeren Anwendung kein SPA benötigen oder am besten ohne dieses bereitgestellt werden. Wenn Sie jedoch eine bestimmte Seite - oder einen Teil der Seite - auf dem Client rendern möchten, kaufen Sie sich vollständig ein und lassen Sie AngularJS das tun, was es zu tun weiß.

Angenommen, Sie haben ein Produktmodell (eine Liste mit Aufzählungen) und möchten dieses auf der Seite in einer Liste rendern. Sie haben drei Möglichkeiten, die mir einfallen:

  1. Verwenden Sie ein Rasiermesser @ForEach und rendern Sie es serverseitig. Akzeptieren Sie jedoch, dass Ihre clientseitige AngularJS-Anwendung diese Liste nicht kennt und sie nicht an ihr Modell bindet
  2. Warten Sie, bis die Seite geladen und AngularJS-Bootstraps erstellt wurden, und rufen Sie dann Ihre serverseitige MVC-Anwendung für einige JSON-Daten auf und fügen Sie sie in das Modell ein. Verwenden Sie ng-repeat, um die Liste zu rendern.
  3. Verwenden Sie Rasiermesser, um das Produktmodell auf dem Server in eine JSON-Zeichenfolge zu serialisieren und diese in den AngularJS-Controller einzubetten, den Sie zurücksenden. Verwenden Sie ng-repeat, um die Liste zu rendern und die clientseitige Datenbindung zu nutzen.

Die letzte Option ist hässlich. Ich kann mir keinen wirklich guten Grund dafür vorstellen, es sei denn, Sie benötigen eine clientseitige Datenbindung und müssen für jeden API-Aufruf bezahlen.

Das erste wäre gut, wenn Sie keine Datenbindung auf dem Client benötigen (es ist eine schreibgeschützte Liste) oder wenn Sie SEO benötigen.

Das zweite ist die Art und Weise, wie ich es in den meisten Szenarien tun würde. Sie haben sich aus einem bestimmten Grund für AngularJS entschieden - lassen Sie es seinen Job machen.

Verwenden Sie keine MVC-Helfer, nur weil sie dort sind. AngularJS bietet seine eigenen Anweisungen, die fast das Gleiche tun. Und wenn Sie mehr brauchen, schreiben Sie Ihre eigenen. Ein Teil der Verwendung eines clientseitigen Frameworks besteht darin, sich der Philosophie anzuschließen: Der Server ist für serverbezogene Dinge wie Authentifizierung, Servervalidierung und Bereitstellung von Daten über eine API verantwortlich, und der Client ist dafür verantwortlich, eine Front-End-Anwendung zu sein. Halten Sie Ihre Bedenken getrennt.

Nichts davon bedeutet, dass Sie ASP.NET MVC nicht für das Routing, die Authentifizierung oder die Gesamtstruktur Ihrer App verwenden können. Alles, was Ihre AngularJS-Apps umgibt. Sobald Sie sich jedoch in einem Mini-SPA befinden, tun Sie dies auf die SPA-Weise.

Diese Philosophie habe ich bei der Integration von ASP.NET MVC in AngularJS verwendet. Die serverseitige MVC ist allein dafür verantwortlich, die erste Seite zu rendern und anschließend eine semi-RESTful-API bereitzustellen. Es verwendet ASP.NET MVC, um URLs weiterzuleiten, sich zu authentifizieren und andere Extras. Aber es gibt fast keinen Rasierer und definitiv keine HTML-Helfer.

17
Aaron Greenwald

Ich bin kein .NET MVC-Programmierer, habe aber viel PHP-, Java- und AS3-Programmierung durchgeführt und vor relativ kurzer Zeit auch auf AngularJS umgestellt.

Mein allgemeines Gefühl ist, dass das Back-End nur RESTful sein sollte und das Front-End nicht wirklich berühren sollte und das Front-End nur vom Back-End für Daten abhängen sollte. Es gibt einige Ausnahmen, wenn es besser ist, Ansichten serverseitig zu erstellen (möglicherweise zum Beispiel für einen konsistenten Export oder wenn das Zwischenspeichern von Ansichten erheblich hilft).

Der Vorteil der klaren Trennlinie besteht darin, dass Ihre Teams unabhängig arbeiten können oder dass Sie als Ein-Mann-Shop sich jeweils auf eine Aufgabe/ein Problem konzentrieren können (kann das Back-End getrennt vom Front-End debuggen). . Wenn Ihr Projekt erweitert wird und die Clients eine native Anwendungslösung benötigen, können Sie Ihr RESTful-Backend (REST ist nicht nur erforderlich, scheint aber der richtige Weg zu sein) weiterhin verwenden und das Frontend einfach neu schreiben.

8
shaunhusain

Ich erstelle eine App, die eine Kombination aus MVC auf dem Server und AngularJS auf dem Client ist.

Auf dem Server:

Ich fand es am einfachsten, eine Reihe von RESTful-Web-APIs zu erstellen, um dem Client Datendienste bereitzustellen. Ich führe auch eine Validierung auf dem Server durch, um sicherzustellen, dass niemand betrügt (Senden von Daten mit einem anderen Client als der Webseite). Ich baue auch die Webseite (obwohl ein Controller und eine minimale Ansicht) zusammen, um alle benötigten Bibliotheken zu laden. Da ich die Webseite fast ohne Änderungen von der Ansicht zum endgültigen HTML-Code erstelle, sollte ich AngularJS durch etwas anderes ersetzen können.

Auf dem Client:

Auf dem Client habe ich AngularJS verwendet, um alles zu erledigen, vom Aufrufen der Web-APIs bis zur lokalen Validierung. Es gibt dem Benutzer die "sofortige" Antwort, die vom neuesten Push im Web gepusht wird. Sie können Ihre Seite dynamisch oder relativ statisch gestalten. Durch die Verwendung einer Architektur, bei der Bedenken getrennt werden, kann ich das Back-End durch alles ersetzen, was eine RESTful-API unterstützt.

4
Adam Zuckerman

Wir haben eine App erstellt, die eine Kombination aus AngularJS und MVC ist

Die Best Practices besagen, dass wir bei Verwendung von MVC und angleJS die MVC-Web-API auf der Serverseite verwenden sollten, um Daten vom Server abzurufen. Auf der Clientseite sollten wir das Angularjs-Framework zum Binden von JSON-Daten mit HTML-Steuerelementen verwenden.

1

Sicher ... wenn Sie ein SPA haben, das die Seite beschreibt und nur Daten benötigt, die zur Verfügung gestellt werden, dann benötigen Sie einen RESTful-Server, der die erforderlichen Daten abruft und zurückgibt. Nichts mehr.

Wenn Sie versuchen, beides zu mischen, dann machen Sie die Dinge möglicherweise sehr kompliziert. Sicher, die Verwendung von MVC zum Generieren der ersten Seiten ist eine anständige Idee, aber wenn dies erledigt ist, möchten Sie immer noch, dass die AngularJS-Aufrufe REST Datenanforderungen) ausführen. Die Kombination der beiden scheint am einfachsten zu sein, wenn Sie die 2 beibehalten Technologien trennen.

0
gbjbaanb