客户端Web应用程序使用Web API，如何根据服务器端Web API的期望填充选择框字段值？

问题描述 投票：8回答：6

我在一个Web应用程序中工作，该应用程序具有由ASP.NET Core MVC提供支持的服务器，而前端是使用TypeScript的Angular 5.0单页面应用程序。

在客户端我有一个页面，其中包含一个表单和一些<select>输入控件。我的设计挑战是<select>中的选择应该限制在我的.NET Core中期望的Web API的值。

由于服务器和客户端应用程序是同一个Visual Studio解决方案的一部分，我想尝试最小化Web API中的重大更改。我认为我可以做到这一点的一种方法是让客户端表单和输入有些愚蠢，并从服务器请求填充<select>控件的有效值。这样我就不必在客户端和服务器中复制逻辑了（例如，如果我在C＃中定义了一个Enum，又在TypeScript中定义了一个Enum）。尽管我能想到这一点有一些不足之处（如果我想根据<select>值切换其他表单字段的可见性，我将不得不在客户端硬编码逻辑来对值进行假设。

这是一个好主意吗？我可以使用哪种其他解决方案？

javascript c# asp.net asp.net-mvc angular
6个回答
3
投票

如果您使用的是ssr，则可以从预渲染模块将数据传递给角度应用程序。

在startup.cs中

app.UseSpa(spa =>
        {
            ...
            spa.UseSpaPrerendering(options =>
            {
                ...
                options.SupplyData = (context, data) =>
                {
                    // Your c# array
                    data["selectValues"] = ["YOUR","ARRAY","OF","VALUES"];
                    // some other data
                };
            });

        });

然后在main.server.ts文件中，您可以将数组注入角度应用程序。

import { createServerRenderer } from 'aspnet-prerendering';
...
const options = {
    document: params.data.originalHtml,
    url: params.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP),
      { provide: APP_BASE_HREF, useValue: params.baseUrl },
      { provide: 'MY_ARRAY_OF_VALUES', useValue: params.selectValues },
    ]
  };

然后将其注入应用程序中的任何位置。

@Inject(MY_ARRAY_OF_VALUES) private selectValues:string[]

未经测试我不确定它是否适用于数组。因此，您可能希望使用Newtonsoft.Json将提供的数据格式更改为JSON，并在Angular应用程序中对其进行反序列化。

2
投票

我得到的一个想法是做一些事情：

  1. 使用Angular Service调用Web API并获得可能的选择（因此它将是一个列表）。
  2. 将您可能的选择列表绑定到<select>。

很容易使Angular Service执行HTTP请求并获得响应，然后将可能的选择放在组件中的变量中，然后View使用该变量。

0
投票

如果我已正确理解您的问题，您希望表单字段动态填充。假设3个表单字段1.Country 2.State 3.City您希望根据国家/地区填充状态。然后你可以很好地使用上面提供的解决方案。如果你想玩你的领域那么请注意Web api只给你一个响应。在MVC视图取决于你的模型，但在这不是这种情况。所以要解决这种情况要么你在客户端硬编码逻辑在值上或您选择您的web api响应模型，以获得一些额外属性，其中包含与您的表单字段一起使用的信息。

目前我正在使用ts MVC + web api处理相同类型的角度4项目

0
投票

我想你提出的解决方案是从服务器请求options并在select中填充它们的最佳解决方案。但我不理解你对硬编码逻辑和值假设的另一点。首先，如果你要创建一个Enum，那么你已经有了一组值，并且是你做出的一种假设。

0
投票

为了解决您的问题，实现最新框架功能的最佳方式来自Okan Aslankan的回答。现在看起来有点复杂，但我相信你能找到它的文档。

如果您想尝试别的东西，我还有一个更简单的实现想法。在您的C＃项目中制作一些其他API服务，这将有助于您填充<select>标记。在角度项目中进行类似的服务，这些服务将调用这些API以在需要时获取值。如果要根据以前的表单字段值修改<select>中的值，则使用Ajax脚本调用API而不是角度服务，并实时获取数据并在HTML上呈现数据。这两种方法都可用于解决整个解决方案中不同类型的场景。所以请选择，我相信其中任何一个都可以帮助您解决问题。

0
投票

您可以使用@ angular / forms中的FormGroup。你应该创建一个initForm（）函数，并在该函数中调用另一个发送api请求的函数来获取数据以从服务器填充表单。你可以调用你的<select>的功能（改变）事件。像这样的东西：

initForm(selectedOption?) {
       this.getFormData(selectedOption);
       userForm = new FormGroup({
                         name: new FormControl(this.formData.name),
                         age: new FormControl(this.formData.age)
                  }); 
}
getFormData(selectedOption?) {
   this.http('url')
    .map(res => res.json())
    .subscribe(data => {
       this.formData = data;
    });
}

HTML：

<select #selectOptions (change)="initForm(selectOptions.value)">
  <option *ngFor="let option of formData.choices"></option>
</select>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.