blazor-server-side

How to make a Blazor webserver app listen to a POST requests in an endpoint?


Coming from NodeJS, a simple example to listen to a POST request on an endpoint would be

var express = require("express");
var myParser = require("body-parser");
var app = express();
app.use(myParser.urlencoded({extended : true}));
app.post("/myendpoint", function(request, response) {
    console.log(request.body);
});
app.listen(8080);

I'm trying to do the same in a Blazor server app. I created a class that is as it appears below

using System;
using Microsoft.AspNetCore.Mvc;

namespace MyApp.Controllers
{
    [ApiController]
    [Route("api/myendpoints")]
    public class MyEndpointController
    {
        [HttpPost]
        public void MyEndpoint(string inputJSON)
        {
            Console.WriteLine(inputJSON);
        }
    }
}

When I do a POST request to https://localhost:5001/api/myendpoints/MyEndpoint with the following JSON in the body

{
    "postcontent": "Lorem ipsum..."
}

I get 400 Bad Request. The request cannot be fulfilled due to bad syntax. This response means that the server could not understand the request due to invalid syntax.

How would one make the app listen to the end point? Is the class MyEndpointController supposed to be passed somewhere on Startup.cs?


Solution

  • Found the answer. First a model has to be created that matches the structure of the incoming JSON. The input will be automatically deserialized into that object.

    For this example

    // MyModel.cs
    namespace MyApp.Models
    {
        public class MyModel
        {
            public string postcontent { get; set; }
        }
    }
    

    Then the Controller

    // MyEndpointController.cs
    using Microsoft.AspNetCore.Mvc;
    using System;
    using MyApp.Models;
    using System.Text.Json;
    
    namespace MyApp.Controllers
    
    {
        [ApiController]
        public class MyEndpointController
        {
            [HttpPost]
            [Route("api/MyEndpoint")]
            public void MyEndpoint(MyModel input)
            {
                Console.WriteLine(JsonSerializer.Serialize<MyModel>(input));
            }
        }
    }
    

    The received data on the method is deserialized into MyModel. To print it to the console, the object is serialized with JsonSerializer.Serialize<MyModel>(input).

    Finally, on Startup.cs in the public void Configure(IApplicationBuilder app, IWebHostEnvironment env) method, endpoints.MapControllers(); is supposed to be called when setting the endpoints

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    }); 
    

    Making a POST request with a consumer then has the server respond to the POST request and print the content on the server side. For example

    curl --location --request POST 'https://localhost:5001/api/MyEndpoint' \
    --header 'Content-Type: application/json' \
    --data-raw '{"postcontent": "Lorem ipsum..."}'