Angular 2 and C#/.NET

Question

I know you can use C# and .NET with Angular 2, but I've only seen it done in the layouts. Can you include C# in the component files? For example, there is a dashboard.component.html file in the Tour of Heroes tutorial on the Angular 2 website. Could you change that to dashboard.component.cshtml and include C#/Razor?

Answer 1

I am 90% sure you can't do this without a hack. Even though they look like a standard HTML file, they are separate as a convenience. They are typically streamed into your JS code on build.

That said, my 10% answer is that you could probably do something that would wrap a server call in a JS nugget so you could keep the actual CHTML server-side. You should be able to bake a script section that calls out like this: ASP.NET MVC rendering partial view with jQuery ajax

Answer 2

Can you give your scenario of why you would want to do this?

Angular 2 (Javascript/Typescript) is client side (though it still uses a transpiler to convert TS to JS.

While cshtml files are compiled through the ASP.NET compiler as they are apart of the declarative resources in ASP.Net structure.

Razor syntax needs an engine that understands what the symbols means the compiler holds references to these so that when it's interpreted it generates the correct code under the hood. However they are dynamically compiled by the ASP.NET runtime.

See more info here: Why isn't a compilation needed when updating cshtml files with .net code?

https://weblogs.asp.net/scottgu/introducing-razor

Answer 3

Can you include C# in (angular 2) component files? The answer is no and why would you want to do that anyway? I use Angular2 and Asp.net MVC together all the time. But it's important, conceptually, to understand a few things:

Let asp.net handle the backend, and let Angular2 handle the front end.

Otherwise don't mix the two (unless you are into Angular Universal in which your ng2 app is pre-rendered on the server, but this is a special topic).

I separate these concerns so completely that, when I am developing, I use the angular-cli within the context of Visual Studio Code, i.e. not one byte of .net is present in the Angular2 development environment.

Now of course your ng2 app is probably going to want to make calls to "the server", i.e. make http calls etc such as the following:

    getMeSomeServerData(someVar: string): Promise < IGenericRestResponse > {
      let headers = new Headers();
      headers.append("Content-Type", "application/json");
      let url = this.apiUrl + "getMeSomeServerData";
      let post = this.http.post(url, JSON.stringify(someVar), {
        headers: headers
      }).map(response => response.json());
      return post.toPromise();
    }

The key thing to notice here is:

this.apiUrl

When I am in development mode I make this refer to my back-end project located at something like http://localhost:1234/ which refers to an asp.net MVC project i am running concurrently in Visual Studio. So the back-end looks something like this:

 [HttpPost()]
 [Route("getMeSomeServerData")]
 public JsonNetResult GetMeSomeServerData(string someVar) {
   GenericRestResponse response = new GenericRestResponse();
   response.Error = false;
   // do somthing 
   return new JsonNetResult(response);
 }

Note: you have to configure your asp.net mvc backend for CORS or cross-origin HTTP requests since your ng2 app is not on your mvc project domain.

Now, if you like, you CAN have your backend service return text, i.e HTML. Which means you can even go so far as to return partial cshtml views, which is just text after all. Then on the front end, your ng2 app can inject the html however you like. This generally defeats the purpose of Angular 2, in my opinion, and your server can become bogged down with rendering views. But it's up to you.

In any case, when you want to deploy your app for production, then you use the the angular-cli command to bundle and optimize your ng2 app ("ng build -prod"). Then copy all the assets in the "prod" folder to your asp.net mvc project (gulp makes this fast and easy). Use ONE razor view and one razor view only to server your webpage. Here is an example of such a view, Home.cshtml:

<!DOCTYPE html>

<html>

<head>
  <base href="/">
   <script type="text/javascript" src="~/assets/js/styles.bundle.min.js"></script>

</head>

<body>
  <app>Loading...</app>
  <script type="text/javascript" src="~/assets/js/main.bundle.min.js"></script>
</body>

</html>

And THATS ALL you use razor views for: to serve your initial SPA page view. Just don't forget to change your "apiUrl" in your app to reflect the http calls are going locally.

Answer 4

You can create an Asp.Net MVC application and then add the Angular Libraries and setup your App to use the default Layout and default controller Index action.

Then you can create partial actions and use its URL as a template for the Angular route, ex:

templateUrl: 'YourController/YourPartialAction'

Although this will work, but I don't think it is recommended cause you mixed both MVC and Angular, Angular is supposed to be totally client side and separated from your back end