C# AJAX与前端Angular的集成实践

发布时间：2024-09-09 15:38:14 作者：小樊
来源：亿速云阅读：81

在这个实践中，我们将使用C#作为后端服务器端语言，AJAX进行异步通信，以及Angular作为前端框架。我们将创建一个简单的应用程序，该应用程序可以从服务器获取数据并在前端显示。

创建C# Web API项目首先，我们需要创建一个C# Web API项目。在Visual Studio中，选择 “File” > “New” > “Project”，然后选择 “ASP.NET Web Application (.NET Framework)”。给项目命名，例如 “MyWebAPI”，然后点击 “OK”。
添加一个API控制器在解决方案资源管理器中，右键单击 “Controllers” 文件夹，然后选择 “Add” > “Controller”。选择 “Web API 2 Controller - Empty”，然后点击 “Add”。给控制器命名，例如 “DataController”。
在DataController中添加一个GET方法，用于返回数据。例如：

using System.Collections.Generic;
using System.Web.Http;

namespace MyWebAPI.Controllers
{
    public class DataController : ApiController
    {
        [HttpGet]
        public IHttpActionResult GetData()
        {
            var data = new List<string>
            {
                "Hello",
                "from",
                "the",
                "server"
            };
            return Ok(data);
        }
    }
}

配置CORS 在WebApiConfig.cs文件中，启用CORS（跨域资源共享）以允许来自不同域的请求。在Register方法中添加以下代码：

using System.Web.Http;

namespace MyWebAPI
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            var cors = new System.Web.Http.Cors.EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

创建Angular前端项目使用Angular CLI创建一个新的Angular项目。在命令提示符中，运行以下命令：

npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app

安装CORS代理在Angular项目中，我们需要一个CORS代理来绕过浏览器的同源策略。在命令提示符中，运行以下命令：

npm install cors-anywhere --save

配置代理在Angular项目的根目录下，创建一个名为 “proxy.conf.json” 的文件，并添加以下内容：

{
  "/api": {
    "target": "http://localhost:5000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

在 “package.json” 文件中，将 “start” 脚本更改为：

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json",
  ...
},

创建一个服务在Angular项目中，创建一个名为 “data.service.ts” 的服务，用于处理与后端的通信。在命令提示符中，运行以下命令：

ng generate service data

编辑 “data.service.ts” 文件，添加以下内容：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData(): Observable<string[]> {
    return this.http.get<string[]>('/api/data');
  }
}

在组件中使用服务在 “app.component.ts” 文件中，使用 “DataService” 获取数据并将其显示在视图上。修改 “app.component.ts” 文件，添加以下内容：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
  data: string[];

  constructor(private dataService: DataService) {
    this.getData();
  }

  getData() {
    this.dataService.getData().subscribe(response => {
      this.data = response;
    });
  }
}

在视图中显示数据在 “app.component.html” 文件中，使用 “data” 变量显示从服务器获取的数据。修改 “app.component.html” 文件，添加以下内容：

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <ul *ngIf="data">
    <li *ngFor="let item of data">{{ item }}</li>
  </ul>
</div>

运行项目首先，确保C# Web API项目正在运行。然后，在Angular项目的命令提示符中，运行以下命令：

ng serve

现在，打开浏览器并导航到 “http://localhost:4200”。你应该能看到从服务器获取的数据。

这就是C# AJAX与前端Angular的集成实践。在这个示例中，我们创建了一个简单的应用程序，该应用程序从C# Web API服务器获取数据并在Angular前端显示。

C# AJAX与前端Angular的集成实践

相关阅读