引言
在前文中我们介绍了如何使用ExtJS与.NET结合开发Grid页面，实现数据的展示和编辑功能，本篇博客将继续介绍如何通过Form提交数据并保存到数据库中。
准备工作
在开始介绍具体实例之前，我们先来准备一下所需的环境和工具：
- Visual Studio 2019
- .NET Core 3.1
- ExtJS 6.2
- SQL Server
确保以上工具和环境都已经安装配置完成。
创建新增功能
我们在前文的基础上，继续在Grid列表页面的基础上添加一个新增按钮，点击按钮后弹出一个Form表单，用户可以在表单中输入需要新增的数据。
首先，在前台页面的Grid组件中添加一个新的工具栏按钮：
{
xtype: 'button',
text: '新增',
handler: 'onAddButtonClick'
}
然后，在前台控制器中添加处理按钮点击事件的方法：
onAddButtonClick: function () {
var window = Ext.create('Ext.window.Window', {
title: '新增数据',
width: 400,
height: 300,
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: '姓名',
name: 'name'
}, {
xtype: 'textfield',
fieldLabel: '年龄',
name: 'age'
}],
buttons: [{
text: '保存',
handler: 'onSaveButtonClick'
}, {
text: '取消',
handler: function () {
window.close();
}
}]
}]
});
window.show();
},
以上代码中，我们创建了一个新的Window窗口，窗口中包含一个Form表单，用户可以在表单中输入需要新增的姓名和年龄字段。同时，我们也添加了一个保存按钮和一个取消按钮。
最后，在前台控制器中添加保存按钮点击事件的方法：
onSaveButtonClick: function () {
var form = this.getView().down('form');
var values = form.getValues();
Ext.Ajax.request({
url: '/api/person',
method: 'POST',
jsonData: values,
success: function () {
Ext.Msg.alert('提示', '保存成功');
form.reset();
},
failure: function () {
Ext.Msg.alert('提示', '保存失败');
}
});
},
以上代码中，我们通过Ext.Ajax的POST方法将输入的数据发送给后台API，保存到数据库中。如果保存成功，则弹出保存成功的提示信息，并重置表单；如果保存失败，则弹出保存失败的提示信息。
创建后台API
接下来，我们需要创建后台的API来接收前台发送的数据，并保存到数据库中。
首先，在后台项目中添加一个名为PersonController的控制器：
[Route("api/[controller]")]
[ApiController]
public class PersonController : ControllerBase
{
private readonly ApplicationDbContext _context;
public PersonController(ApplicationDbContext context)
{
_context = context;
}
[HttpPost]
public async Task<ActionResult<Person>> SavePerson(Person person)
{
_context.Persons.Add(person);
await _context.SaveChangesAsync();
return CreatedAtAction(nameof(GetPerson), new { id = person.Id }, person);
}
}
以上代码中，我们在PersonController中添加了一个SavePerson的方法，该方法接收一个Person对象，并将其保存到数据库中。
创建数据库模型
接下来，我们需要创建一个数据库模型来映射保存数据的表。
首先，在后台项目中添加一个名为Person的模型：
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
以上代码中，我们创建了一个Person模型，包含了姓名和年龄两个字段。
然后，在后台项目的ApplicationDbContext类中添加一个DbSet：
public class ApplicationDbContext : DbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
: base(options)
{
}
public DbSet<Person> Persons { get; set; }
}
测试运行
最后，我们可以启动项目，访问前台页面，点击新增按钮，在弹出的窗口中输入姓名和年龄字段，点击保存按钮，然后我们可以在数据库中看到新增的数据已经保存成功了。
结论
通过本篇博客的学习，我们学会了如何通过ExtJS与.NET结合开发实例，实现Grid之新增功能的实现。通过该实例，我们可以更好地理解和掌握前后端分离开发的流程和技巧，并且可以应用到实际的项目中。
希望本篇博客对您的学习有所帮助，欢迎交流和讨论！
本文来自极简博客，作者：前端开发者说，转载请注明原文链接：ExtJS与.NET结合开发实例(Grid之新增——Form提交篇)
