AjaxService.Gen

AjaxService is a source-generator, it can generate ajax calls in typescript based on your c# api endpoints.

Table of contents

• Table of contents
• Features
• Install
• How to Use
• Recommendations
  • only one parameter
  • DO NOT use circular objects
  • Use Attributes
  • [FromBody] and Complex Object
  • Jagged/Multidimensional arrays
• Demo
  • models
  • Endpoints

Features

• detects parameters and return types automatically.
• create models and classes based on associated types.
• support [FromBody],[FromHeader],[FromQuery] (in other words, it can handle body,header and query types).
• validates parameter types and creates valid ajax calls.
• uses best practices for generated typescript code.
• uses built-in fetch api with asynchronous functionality.
• generates immutable classes.
• generates constructor for classes with default value.

Install

dotnet cli: dotnet add package AjaxService.Gen --version 1.0.3

nuget: NuGet\Install-Package AjaxService.Gen -Version 1.0.3

reference: <PackageReference Include="AjaxService.Gen" Version="1.0.3" />

How to Use

after installing the package. you have access to [Ajax] attribute.

add it to your endpoint and pass dawn the url:

[Ajax("http://mysite.com/url/to/endpoint")]
public User GetUser(int id)
{
    return new User();
}

then build your project.

it will create a tsFiles directory in your project and 2 files:

• AjaxService.ts
• Models.ts

Now you can use your endpoint in client code:

import AjaxService:

import {AjaxService} from "./AjaxService";

create an instance of your controller:

let controller = new AjaxService.HomeController();

in my case, my controller was HomeController,make sure to replace it with yours.

and at the end, call the endpoint:

let result = await controller.GetUserAsync(1);

to use the result you have to await the call and also check the status of call:

if (result.IsRight()) {
    console.log(result.Value);
    return;
}
console.log(result.Error);

Recommendations

I highly suggest to use only one parameter for your endpoint and put everything inside it, for example instead of this:

void UpdateUser(string name,int age,datetime birthDate){
    //update
}

wrap your input in one single object:

class UpdateUserDto{
    public string name { get; set; }
    public int age { get; set; }
    public datetime birthDate { get; set; }
}

and use that in your endpoint:

void UpdateUser(UpdateUserDto user){
    //update user
}

DO NOT use circular parent child objects, example:

class Parent{
    public string name { get; set; }
    public Child MyChild { get; set; }
}
class Child { 
    public Parent MyParent { get; set; }
}

it would presumably blow your pc with infinte object creations(perhaps i handled it but i just cant remember!)

Use Attributes to specify type of an parameter, supported types are:

• [FromBody]
• [FromHeader]
• [FromQuery]

⚠️ if you dont specify anything with these Attributes, AjaxService by default uses [FromBody] for complex objects(classes) and [FromQuery] for simple types(string,int,bool...etc).

Only One [FromBody], only one Complex Object

since AjaxService does not support [FromForm], you can only have one complex object as an argument, otherwise it wont be able to send the data. for example this does not work:

void UpdateUser(User user, UserAge age){ 
    // will throw exception on compile time
}

also if you asign a simple type to [FromBody] and your endpoint has a complex type; that will also throw,e.x:

void UpdateUser([FromBody]int age,User user){

}

because, only one argument can be passed as [FromBody] and there is no any other option for complex objects.

Jagged/Multidimensional arrays are ignored.

I mean, not completely, if you have the followings:

int[][] or List<int[]> or List<int>[] ..etc

they all will be same as int[]. because it cant be fit in a request IF their type is not [FromBody].

so in [FromHeader] and [FromQuery] they are same as a simple array, however you can always put them in an object and thay way it will work.

Demo

models:

From:

To:

Endpoints:

From:

To: