问题是:是否可以自动生成一个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方法GetFoo
从FooController
获取数据:
[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
操作示例;我们有越来越多的更复杂的Get
和Post
操作被合并到系统中。理想情况下,我想使用Nswag来保持一致性,所以我首先生成了C# dtos的json模式并使用Nswag,但在这个阶段它仍然是一个手动过程。
有没有人对自动生成必要的TypeScript类有任何经验或建议?如果这意味着能够更好地管理类的创建以定义ASP.NET MVC和React组件之间的交互,我愿意改变我们的方法。但是在这个阶段,我们不能选择完全弃用ASP .NETMVC--遗留的应用程序和ASP。NET MVC控制器必须是React组件的接口。
1条答案
按热度按时间yqhsw0fo1#
如果有人感兴趣我在现有的MVC控制器中添加了单独的React特定的动作,包括请求和响应dto,并使用自定义的Route属性对其进行了装饰-根据Swashbuckle文档,您“必须为您想要在Swagger文档中表示的任何控制器使用属性路由我在Startup中添加了一个约定,以便标记有属性的操作将包含在Swagger文档中。这允许我使用NSwag来生成所需的TypeScript客户端和模型。