Communication Routes

The most common method of communication remains HTTP requests from the client to the server to obtain the desired information. To avoid issues with duplicate defined routes, each route is prefixed with the application name. In your case, the routes concerning your application will all begin with Demo.

By convention, HTTP communication is located in the Routes folder. A route is already present in the base code.

using AventusSharp.Routes;
using AventusSharp.Tools.Attributes;
using Core.Routes;

namespace Demo.Routes
{
    public class MainRouter : Router
    {
        [NoExport]
        public Component Index()
        {
            return new Component("Main");
        }
    }
}

The route does not have a method, and its path is Index. By convention, Index corresponds to the URL /. You can assume that an HTTP route http://localhost:5000/Demo/ (GET) exists. Inspecting the source code returned will show that this URL returns the tag <demo-main></demo-main>. This is the URL that is called when you open the page by clicking on the Demo application icon.

Now, you will add a new route called HelloWorld, which will return “Hello world”.

using AventusSharp.Routes;
using AventusSharp.Routes.Attributes;
using AventusSharp.Tools.Attributes;
using Core.Routes;
using Path = AventusSharp.Routes.Attributes.Path;

namespace Demo.Routes
{
    public class MainRouter : Router
    {
        [NoExport]
        public Component Index()
        {
            return new Component("Main");
        }

        [Get, Path("/HelloWorld")]
        public string HelloWorld()
        {
            return "Hello world";
        }
    }
}

Don’t forget to recompile and restart the project. You can now navigate to the URL: http://localhost:5000/Demo/HelloWorld (GET) to see your text appear.

Dynamic URL Parameters

You can also retrieve parameters directly from the URL.

using AventusSharp.Routes;
using AventusSharp.Routes.Attributes;
using AventusSharp.Tools.Attributes;
using Core.Routes;
using Path = AventusSharp.Routes.Attributes.Path;

namespace Demo.Routes
{
    public class MainRouter : Router
    {
        [NoExport]
        public Component Index()
        {
            return new Component("Main");
        }

        [Get, Path("/HelloWorld/{name}")]
        public string HelloWorld(string name)
        {
            return "Hello world " + name;
        }
    }
}

You can now visit the URL http://localhost:5000/Demo/HelloWorld/John (GET) to see your text appear. The result will be “Hello world John.” Note that “John” is case-insensitive in the URL.

Creating a POST Route for Todos

Next, you will create an HTTP POST route that will allow you to create todos.

using AventusSharp.Routes;
using AventusSharp.Routes.Attributes;
using AventusSharp.Tools;
using AventusSharp.Tools.Attributes;
using Core.Routes;
using Demo.Data;
using Demo.Logic.DM;
using Path = AventusSharp.Routes.Attributes.Path;

namespace Demo.Routes
{
    public class MainRouter : Router
    {
        [NoExport]
        public Component Index()
        {
            return new Component("Main");
        }

        [Post, Path("/todo")]
        public ResultWithError<Todo> CreateTodo(Todo todo)
        {
            // Simply apply the logic of the DM
            return TodoDM.GetInstance().CreateWithError(todo);
        }
    }
}

The todo parameter is not explicitly populated, so the code will assume that it is either a dependency injection (which will not be covered in this tutorial) or an element found in the body of the request.

Now you need to allow your frontend to call this backend route. To facilitate this, Aventus includes a compiler that transforms backend logic into frontend code. To launch it, ensure your Docker is stopped, and you can either right-click on your C# file and select Aventus: Export Sharp, or directly open the command launcher (Ctrl + Shift + P) and search for Aventus: Export Sharp.

This action will compile your C# code to the Front/src/generated folder, where you will find your models, errors, and routes.

In the generated file MainRouter.lib.avt, you will see that a function called CreateTodo exists, which requires a body content parameter of type Todo or FormData, and it will return a result that may include a todo if everything goes well; otherwise, it will return a list of errors. Note that there is no function for the Index route in our exported file due to the [NoExport] attribute, which informs the compiler not to create a TypeScript route.

To simplify the implementation of CRUD operations in HTTP requests, a predefined class is provided in AventusSharp. Therefore, you will create a new file named TodoRouter.cs. By convention, it is essential to separate routes according to their domain. Then, you will inherit your class from the StorableRouter<> class. Don’t forget to remove the CreateTodo function inside the file MainRouter.cs.

using AventusSharp.Routes;
using Demo.Data;

namespace Demo.Routes
{
    public class TodoRouter : StorableRouter<Todo>
    {

    }
}

You can now export your C# code to Aventus. This will create a new file called TodoRouter.lib.avt.

import { Todo } from '../Data/Todo.data.avt';
import { DemoRouter } from '../DemoRouter.lib.avt';

namespace Routes {

    export class TodoRouter extends AventusSharp.Routes.StorableRouter<Todo> {
        public constructor(router?: Aventus.HttpRouter) {
            super(router ?? new DemoRouter());
        }
        public StorableName() {
            return "Todo";
        }
    }

}

Congratulations! You now know how to create HTTP routes and export them from the backend to the frontend. You can now proceed to the display implementation.