Angular 2 and C#/.NET

本文关键字：NET and Angular | 更新日期: 2023-09-27 18:11:31

我知道你可以在Angular 2中使用c#和。net，但我只在布局中看到过这样做。你能在组件文件中包含c#吗?例如，在Angular 2网站的英雄指南教程中有一个dashboard.component.html文件。你能把它改成dashboard.component.cshtml并包括c#/Razor吗?

Angular 2 and C#/.NET

我有90%的把握你不可能做到这一点。尽管它们看起来像一个标准的HTML文件，但为了方便起见，它们是分开的。它们通常在构建时流式传输到JS代码中。

也就是说，我的10%的答案是，你可能会做一些事情，将一个服务器调用包装在一个JS块，这样你就可以保持实际的CHTML服务器端。您应该能够烤出一个脚本部分，调用如下:. NET MVC用jQuery渲染局部视图

您能给出您为什么要这样做的场景吗?

Angular 2 (Javascript/Typescript)是客户端(尽管它仍然使用转译器将TS转换为JS)。

而cshtml文件是通过ASP. js编译的。. NET编译器，因为它们是ASP中声明性资源的一部分。网结构。

Razor语法需要一个能够理解符号含义的引擎，编译器保存对这些符号的引用，这样当它被解释时，它就会在底层生成正确的代码。但是，它们是由asp.net动态编译的。网运行时。

在这里查看更多信息:为什么用。net代码更新cshtml文件时不需要编译?

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

你能在(angular 2)组件文件中包含c#吗?答案是否定的，你为什么要这样做呢?我一直使用Angular2和Asp.net MVC。但从概念上讲，理解一些事情是很重要的:

让asp.net处理后端，让Angular2处理前端。

否则，不要把它们混在一起(除非你使用的是Angular Universal，你的ng2应用是在服务器上预渲染的，但这是一个特殊的主题)。

我把这些问题完全分开了，当我在开发时，我在Visual Studio Code的上下文中使用angular-cli，也就是说，在Angular2开发环境中没有。net的一个字节。

当然，你的ng2应用可能会想要调用"服务器"，即进行http调用等，如以下所示:

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

这里需要注意的关键是:

this.apiUrl

当我处于开发模式时，我使这指的是我的后端项目位于类似http://localhost:1234/，指的是我在Visual Studio中并发运行的asp.net MVC项目。所以后端看起来像这样:

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

注意:你必须为CORS或跨域HTTP请求配置你的asp.net mvc后端，因为你的ng2应用程序不在你的mvc项目域上。

现在，如果你喜欢，你可以让你的后端服务返回文本，即HTML。这意味着您甚至可以返回部分cshtml视图，这毕竟只是文本。然后在前端，你的ng2应用可以随心所欲地注入html。在我看来，这通常会违背Angular 2的目的，你的服务器可能会因为渲染视图而陷入困境。但这取决于你。

无论如何，当你想把你的应用部署到生产环境中时，你可以使用angular-cli命令来捆绑和优化你的ng2应用("ng build -prod")。然后将"prod"文件夹中的所有资源复制到asp.net mvc项目中(gulp使此操作快速而简单)。使用一个剃刀视图和一个剃刀视图只为服务器您的网页。下面是这样一个视图的例子，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>

这就是你使用剃刀视图的全部目的:为你的初始SPA页面视图服务。只是不要忘记在你的应用程序中改变你的"apiUrl"来反映http调用是在本地进行的。

您可以创建一个Asp。. Net MVC应用程序，然后添加Angular库，并设置你的应用程序使用默认布局和默认控制器索引操作。

然后你可以创建部分动作，并使用它的URL作为Angular路由的模板，例如:

templateUrl:"YourController/YourPartialAction"

虽然这将工作，但我不认为它是推荐的，因为你混合了MVC和Angular, Angular应该是完全客户端，从你的后端分离

相关文章：