使用Web API的客戶端Web應用程序，如何根據服務器端Web API的期望填充選擇框字段值？

Question

我在一個Web應用程序中工作，該應用程序具有由ASP.NET Core MVC驅動的服務器，前端是使用TypeScript的Angular 5.0單頁應用程序。

在客戶端中，我有一個帶有表單的頁面和一些<select>輸入控件。 我在這里的設計挑戰是， <select>中的<select>應限於.NET Core中Web API期望的值。

由於服務器和客戶端應用程序是同一Visual Studio解決方案的一部分，因此我想盡量減少Web API中的重大更改。 我認為我可能能夠執行此操作的一種方法是使客戶端表單和輸入有些呆板，並從服務器請求有效值以填充<select>控件。 這樣，我不必在客戶端和服務器中重復邏輯（例如，如果我在C＃和TypeScript中定義了一個Enum）。 盡管我可以想到一些缺點（例如，如果我想基於<select>值切換其他表單域的可見性，那么我將不得不在客戶端中對值進行假設的邏輯硬編碼。

這是一個好主意嗎？ 我還可以使用哪種其他解決方案？

Answer 1

如果使用的是ssr，則可以從預渲染模塊將數據傳遞到angular應用程序。

在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文件中，您可以將數組注入到angualar應用程序中。

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應用程序中反序列化。

Answer 2

我得到的一個主意是做類似的事情：

1. 使用Angular Service調用Web API並獲得可能的選擇（因此它將是一個列表）。
2. 將您可能的選擇列表綁定到<select> 。

使Angular Service進行HTTP請求並獲取響應非常容易，然后將可能的選擇放在組件的變量中，然后View會使用該變量。

Answer 3

如果我正確理解了您的問題，則希望您的表單域是動態填充的。假設3個表單域1.Country 2.State 3.City您希望基於國家/地區填充State。 然后，您可以很好地使用上面提供的解決方案。 如果您想使用自己的字段，請注意Web api僅會給您響應。在MVC視圖中取決於您的模型，但實際情況並非如此。因此要解決這種情況，您可以在基於客戶端的硬代碼邏輯中進行處理值，或者您選擇Web api響應模型來獲得一些額外的屬性，其中包含與表單字段一起使用的信息。

目前，我正在使用ts MVC + web API從事相同類型的Project Angaulr 4

Answer 4

我想您提出的解決方案是迄今為止最好的解決方案，可以從服務器請求options並在您的select填充它們。 但是我不理解您對硬編碼值的邏輯和假設的其他觀點。 首先，如果要創建一個Enum則您已經有一組值，這是您所做的一種假設。

Answer 5

為了解決您的問題，實現最新框架功能的最佳方法將來自Okan Aslankan的答案。 現在看來似乎有點復雜，但是我相信您將能夠找到它的文檔。

如果您想嘗試其他任何東西，我還有一個實現想法，可能看起來更簡單。 在C＃項目中提供一些其他的API服務，這將幫助您填充<select>標記。 在angular項目中提供類似的服務，該服務將在需要時調用這些API來獲取值。 如果要根據以前的某些表單字段值修改<select>值，請使用Ajax腳本而不是angular服務來調用API，並實時獲取數據並將其呈現在HTML上。 這兩種方法都可以用於解決整個解決方案中不同類型的方案。 因此，選擇一個，我相信他們中的任何一個都會幫助您解決問題。

Answer 6

您可以使用@ 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>