海运系统的部门管理页面搭建完成后，页面上有数据表格，数据表格中暂时还没有数据。因为数据库里面还没有数据，所以数据表格里面查询不了数据。这时只需在页面上和控制中写新增的代码，就可以将数据保存在数据库中。
下面是部门管理的数据新增，控制器对应的页面里面写新增的代码。在新增的按钮里面我定义了一个点击事件，现在给定义的点击事件写一些代码。List是在页面加载的时候定义的一个自定义变量，它的作用是判断是新增数据还是修改数据。因为新增和修改我是用同一个模态窗体的，在模态窗体里面有一个保存的按钮，新增和修改都是用同一个模态窗体，所以在保存数据的时候需要判断一下。
然后下面一条代码的作用是，在模态窗体弹出来的时候清空form表单里面的内容，可以称之为重置表单，可以实现这一个功能是因为我在form表单里面设置了一个隐藏的input标签，标签的属性是重置可以实现重置form表单的效果，将这个标签隐藏起来是为了模态窗体的样式好看一些。
下面还有两条代码，其中一条代码是设计模态窗体中的h1标签里面的内容。在弹出新增模态窗体的时候，模态窗体里面的标题也会发生改变。新增按钮里面的最后一条代码是弹出模态窗体，在点击新增按钮的时候，模态窗体就会弹出来，要获取到这个模态窗体的ID值，才会有效果。如果运行不了，有可能是没引用Bootstrap4的插件或者是JQuery的插件。
写完新增按钮里面的代码后，还需要写模态窗体里面保存按钮的代码。写保存按钮的代码是因为在新增的模态窗体里面填写数据后，还需要将数据保存到数据库里面去。
在模态窗体的保存按钮里面先获取到数据，就是需要填写的数据，然后通过if语句判断获取到的数据是否为空，如果为空就通过else给它一个提示。获取数据的来源呢是模态窗体里面的input标签的id值，input标签里面name属性要和数据库里面的字段对应，这样在填写数据后才能获取到数据返回回来。
通过if语句判断后如果填写的数据不为空就接着写下面的代码，再次通过if语句判断是新增还是修改，如果自定义的变量list是true就是新增，false是修改。然后获取到模态窗体里面form表单的ID值写异步提交的代码。具体的写法都在图片上面，注释也标注了，弹出层的代码是要用到layer框架的js插件才能实现效果。
模态窗体里面的保存按钮代码写完后，来到控制器写C#的代码。在控制这里自定义一个名称，将页面获取到的值传递过来，就是页面新增保存按钮里面代码获取到的ID值传递到控制器。然后在控制器这里通过if语句判断一下传递过来的数据是否为空，为空通过else给它一个提示，这样在运行报错的时候就能通过提示找到对应的代码进行修改。
下面的图片上面是控制器数据新增的代码，这里我只截图了新增数据的关键代码。首先要在控制器创建一个方法，方法名称自定义命名，然后接受页面传递过来的数据。参数接受数据后，通过if语句判断接受的数据是否完整。然后实例化需要新增的表，然后就是新增数据了，新增数据后将数据保存在数据库里面。
控制器的新增代码写完之后，来到新增模态窗体的form表单这里。在form表单里面的action的属性里面将之前在控制器里面写的新增代码的名称复制过来，它的作用是向控制器里面的方法提交获取的数据数据。用form表单向控制器方法提交数据需要用到一个插件，不引入插件可能数据提交会失败。
下面是新增数据后运行效果图片：
总结：新增数据的时候要熟悉页面的布局，这样才能清楚的知道去那里获取数据。有时候新增失败了就是可能没有获取到新增模态窗体里面的input标签的数据，获取数据的时候是获取到input标签的ID值，如果获取数据失败了就去页面上查看input标签里面的name的值是否和数据库表里面的字段对应。
插件的引用也很重要，有时候一些功能自己是敲不出来的。这时候就要用到插件完成对应的功能，插件引用前要熟悉插件的使用方法，插件的代码多运用几次就会知道了。