Blazor HTTPRequestMessage with several named parameters

Question

Using the most recent version of VS 2019 Community with SDK 5.0.101

I have created an Editform and I can see on the button submit action that all the properties of the model have valid values.

I created the action method of the onvalidsubmit event as an async Task In this method I perform some custom checks (and return to the form with any errors found).

Once there are no errors I have to send a request to an external site (which is like a black box) I know a little about what it is expecting and what it should return. This url opens as a form so I am trying to create the message with all the parameters needed to get the response (i.e. all entries filled out on the form), which on the form is retrieved via a submit button.

I've looked for a good example and could not find one that answers my how-to-do question.

Here are the steps that I created so far: var client = _clientFactory.CreateClient();

I am not sure if I have to add some value to client.DefaultRequestHeaders.Content

Also, do I need to serialize the parameters (json) or can I just enter values on the call as var request = new HttpRequestMessage(HttpMethod.Get,""https://theuUrlIwanttoget.com"

Do I need a question mark after the .com?

Can I enter the named parameters simulating json i.e. (BTW not sure if they are named or positional so I am keeping the order I saw in some documentation) "{nameparameter1 : value, nameparameter2 : value, etc...}");

Should the values be passed as string "value"? Don't know the inner work of the site so I was going to experiment and check return codes

With another technology like PHP I know that you could embed a 'command = submit' into the parameters and it would trigger the submit button on the URL form. Is there a way to accomplish this with HTTPrequestmessage?

Next the client has to await client.PutAsync(... and I have to read the response.

If someone could direct me to documentation that will teach me how to call a site with parameters so that I could proceed I'd very much appreciate.

Answer 1

If you have to interact with such a "legacy" app, as you mentioned in your comment, the first step is to analyze what request is sent to the application, ones the form is submitted. Usually, you could "guess" it is based on the name of the form inputs. However, sometimes javascript interfere, so the most promising way is to submit the form and use the network tab of the browser's developer tools (F12). Personally, I like the way Chrome (and Edge) display the request, but Firefox hasn't excellent support too.

I like to preserve the request during request while analyzing. You should see the Request URL, the method, and the date.

You said it is a GET request. Unusual for forms but possible. In this case, the parameters are appended to the URL, and the debug output should look similar to this.

Equipped with these insights, we can jump to the Blazor side of things. Let's assume the following model is used inside the blazor application and in the legacy application.

public class ItemModel
{
   public String Name { get; set; }
   public String Description { get; set; }
}

HttpPost with form data

    public async Task SendFormData(ItemModel input)
    {
        HttpClient client = _clientFactory.CreateClient();

        String url = "<URL of your legacy app method from the network tab>";

        var values = new Dictionary<String, String>
        {
            { nameof(ItemModel.Name), input.Name  },
            { nameof(ItemModel.Description), input.Description  },
        };

        var requestContent = new FormUrlEncodedContent(values);

        var response = await client.PostAsync(url, requestContent);
    }

GET with URL appending

    public async Task SendDataAsGet(ItemModel input)
    {
        HttpClient client = _clientFactory.CreateClient();

        String url = "<URL of your legacy app method from the network tab>";
        String urlWithValues = $"{url}?{nameof(ItemModel.Description)}={input.Name}&{nameof(ItemModel.Name)}={input.Description}";

        var response = await client.GetAsync(urlt);
    }

Remember that your model in the blazor application can be different from those you send to the legacy app. You could also apply any transformation if necessary. So you could substitute things like nameof(ItemModel.Name) with NameOfLegacyProperty to make it work.