Client-side web app consuming Web API, how to populate select box field values based on expectations of server-side Web API?

Question

I am working in a web application which has a server powered by ASP.NET Core MVC and the frontend is an Angular 5.0 Single Page Application using TypeScript.

In the client I have a page with a form and some <select> input controls. My design challenge here is that the choices in the <select> should be restricted to what values the Web API in my .NET Core expect.

Since the server and the client application are part of the same Visual Studio solution I wanted to try to minimize breaking changes in the Web API. One way I thought I might be able to do this is to have the client-side forms and inputs be somewhat dumb and to request from the server the valid values to populate the <select> controls with. This way I don't have to duplicate logic in the client and the server (For instance, if I defined an Enum in C# and again in TypeScript). There's a few down sides to this though that I can think of (like if I wanted to toggle visibility of other form fields based on the <select> value, I would have to hard-code logic in the client which makes assumptions about values.

Is this a good idea? What kind of other solutions could I use?

Answer 1

IF you are using ssr you can pass data to angular application from pre-rendering module.

In startup.cs

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

        });

Then in your main.server.ts file you can inject the array into angualar app.

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 },
    ]
  };

Then inject it wherever you want in your application.

@Inject(MY_ARRAY_OF_VALUES) private selectValues:string[]

Not tested I am not sure it works with arrays.So you may want to change the supplied data format to JSON with Newtonsoft.Json and deserialize it in Angular application.

Answer 2

One idea I got is to do something like:

1. Use an Angular Service to call the Web API and get the possible choices (so it will be a list).
2. Bind your possible choices list to a <select>.

Its pretty easy to make an Angular Service to do HTTP requests and get responses, you then put the possible choices in a variable in your component and then your View consumes that variable.