reactjs 为嵌入在ASP.NET MVC Web应用程序中的React组件生成TypeScript客户端

kmpatx3s  于 2023-03-29  发布在  React
关注(0)|答案(1)|浏览(104)

问题是:是否可以自动生成一个TypeScript客户端,定义React组件和ASP.NET MVC控制器之间的数据传输?
背景是:我们有一个TypeScript React应用程序,它使用ASP.NET Core Web API,并使用NSwag自动生成一个TypeScript客户端,用于两者之间的交互。我们还有一个遗留的ASP.NET MVC Web应用程序,带有Razor页面,并被要求将TypeScript React组件集成到其中。
最初它只有一个组件,所以我们使用了一个相当简单的解决方案,即React组件使用fetch来调用一个返回JsonResult的ASP.NET MVC控制器动作方法。问题是我们被要求嵌入越来越多的React组件,而我们目前的解决方案需要手动定义NSwag自动处理的所有内容,例如ASP.NET MVC端的C# dto。React端的一个等价的.ts类,以及从C#到.ts的非平凡属性的Map,例如其他类,日期等。
例如,为了使用action方法GetFooFooController获取数据:

[HttpGet]
public async Task<IActionResult> GetFoo(int fooId)
{
    // get details from service
    // ...

    var foo = new FooDto
    {
        // translate service data for views
        // ...
    };

    return Json(foo);
}

我们需要定义模型等价的dto:

public class FooDto
{
    public int FooId { get; set; }
    public string FooName { get; set; }
    public DateTime FooDate { get; set; }
    public BarDto Bar { get; set; }
}

public class BarDto
{
    public int BarId { get; set; }
    public string BarName { get; set; }
}

然后用fetch中的response.json初始化React中的等价TypeScript类:

export interface IBarDto {
    barId: number;
    barName?: string | undefined;
}

export class BarDto implements IBarDto {
    barId!: number;
    barName?: string | undefined;

    constructor(data?: IBarDto) {
        if (data) {
            this.barId = data["barId"];
            this.barName = data["barName"];
        }
    }    
}

export interface IFooDto {
    fooId: number;
    fooName?: string | undefined;
    fooDate: Date;
    bar?: BarDto;
}

export class FooDto implements IFooDto {
    fooId!: number;
    fooName?: string | undefined;
    fooDate!: Date;
    bar?: BarDto;

    constructor(data?: IFooDto) {
        if (data) {
            this.fooId = data["fooId"];
            this.fooName = data["fooName"];
            this.fooDate = data["fooDate"] ? new Date(data["fooDate"].toString()) : <any>undefined;
            this.bar = data["bar"] ? new BarDto(data["bar"]) : <any>undefined;
        }
    }    
}

这是一个非常简单的Get操作示例;我们有越来越多的更复杂的GetPost操作被合并到系统中。理想情况下,我想使用Nswag来保持一致性,所以我首先生成了C# dtos的json模式并使用Nswag,但在这个阶段它仍然是一个手动过程。
有没有人对自动生成必要的TypeScript类有任何经验或建议?如果这意味着能够更好地管理类的创建以定义ASP.NET MVC和React组件之间的交互,我愿意改变我们的方法。但是在这个阶段,我们不能选择完全弃用ASP .NETMVC--遗留的应用程序和ASP。NET MVC控制器必须是React组件的接口。

yqhsw0fo

yqhsw0fo1#

如果有人感兴趣我在现有的MVC控制器中添加了单独的React特定的动作,包括请求和响应dto,并使用自定义的Route属性对其进行了装饰-根据Swashbuckle文档,您“必须为您想要在Swagger文档中表示的任何控制器使用属性路由我在Startup中添加了一个约定,以便标记有属性的操作将包含在Swagger文档中。这允许我使用NSwag来生成所需的TypeScript客户端和模型。

相关问题