abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十五)
core)+easyui+efcore实现仓储管理系统目录
abp(net core)+easyui+efcore实现仓储管理系统——abp总体介绍(一）
abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)
abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三)
abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四)
abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务（五）
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器（六）
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七）
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之增删改视图（八）
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试（九）
abp(net core)+easyui+efcore实现仓储管理系统——多语言（十）
abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十一)
abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十二)
abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十三)
abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十四)
上接(abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十四))，在这一篇文章中我们实现更新与删除供应商的相关功能。
十、创建更新供应商视图
（一）创建js文件
我们先来看一下 “abp.tplms.web.mvc”项目中的wwwroot目录下的view-resources\users目录中的_editusermodal.js文件，然后参照此文件来写修改供应商的脚本文件。
1. 在visual studio 2017的“解决方案资源管理器”中，找到领域层“abp.tplms.web.mvc”项目中的wwwroot目录下的view-resources目录。使用鼠标右键单击“supplier”文件夹，然后选择“添加” > “新建项…”。 在“添加新项-abp.tplms.web.mvc”对话框中，选择“javascript文件”，并将名称命名为_editsuppliermodal.js。
2. 在_editsuppliermodal.js文件中，我们写入编辑供应商的有关脚本，具体代码如下。
(function ($) {
var _supplierservice = abp.services.app.supplier;
var _$modal = $('#suppliereditform');
var _$form = $('form[name=suppliereditform]');
function save() {
if (!_$form.valid()) {
return;
}
var supplier = _$form.serializeformtoobject(); //serializeformtoobject is defined in main.js
abp.ui.setbusy(_$form);
_supplierservice.update(supplier).done(function () {
_$modal.modal('hide');
location.reload(true); //reload page to see edited supplier!
}).always(function () {
abp.ui.clearbusy(_$modal);
});
}
//handle save button click
_$form.closest('div.modal-content').find(".save-button").click(function (e) {
e.preventdefault();
save();
});
//handle enter key
_$form.find('input').on('keypress', function (e) {
if (e.which === 13) {
e.preventdefault();
save();
}
});
$.adminbsb.input.activate(_$form);
_$modal.on('shown.bs.modal', function () {
_$form.find('input[type=text]:first').focus();
});
})(jquery);
（二）创建修改供应商视图
我们先来看一下 “abp.tplms.web.mvc”项目中的views\users目录下的_editusermodal.cshtml文件，然后参照此文件来写修改供应商的视图文件。
1. 在visual studio 2017的“解决方案资源管理器”中，找到“abp.tplms.web.mvc”项目中的views目录下的supplier目录中的_editsuppliermodal.cshtml文件。双击打开此文件，并写入以下代码。
@using abp.tplms.web.models.common.modals
@model abp.tplms.web.models.supplier.editsuppliermodalviewmodel
@{
layout = null;
}
@html.partial("~/views/shared/modals/_modalheader.cshtml", new modalheaderviewmodel(l("editsupplier")))
<div class="modal-body">
<form name="suppliereditform" role="form" novalidate class="form-validation">
<input type="hidden" name="id" value="@model.supplier.id" />
<div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<label asp-for="@model.supplier.code" class="form-label"></label>
<input type="text" name="code" class="form-control" required maxlength="50" />
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<label asp-for="@model.supplier.name" class="form-label"></label>
<input type="text" name="name" class="form-control" required maxlength="50" />
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-group form-float">
<div class="form-line">
<label asp-for="@model.supplier.address" class="form-label"></label>
<input type="text" name="address" class="form-control" required maxlength="255" />
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<label asp-for="@model.supplier.linkname" class="form-label"></label>
<input type="text" name="linkname" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<label asp-for="@model.supplier.mobile" class="form-label"></label>
<input type="text" name="mobile" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<label asp-for="@model.supplier.tel" class="form-label"></label>
<input type="text" name="tel" class="form-control" required maxlength="255" />
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<label asp-for="@model.supplier.status" class="form-label"></label>
<input type="text" name="status" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-line">
<label asp-for="@model.supplier.sex"></label>
<input name="sex" type="text" class="form-control" />
</div>
</div>
<div class="col-sm-6">
<div class="form-line">
<label asp-for="@model.supplier.email"></label>
<input name="email" type="text" class="form-control" />
</div>
</div>
</div>
</div>
</form>
</div>
@html.partial("~/views/shared/modals/_modalfooterwithsaveandcancel.cshtml")
<script src="~/view-resources/views/supplier/_editsuppliermodal.js" asp-append-version="true"></script>
2. 在visual studio 2017的“解决方案资源管理器”中，找到“abp.tplms.web.mvc”项目中的views目录下的supplier目录中的index.cshtml文件。双击打开此文件，在文件最后写入以下代码。
<div class="modal fade" id="suppliereditmodal" tabindex="-1" role="dialog" aria-labelledby="suppliereditmodallabel" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
3. 在visual studio 2017中按f5运行应用程序。登录之后，点击“supplier”目录，我们可以看到供应商列表页面。然后点击供应商列表页面中的edit按钮。如下图。
4. 会在当前页面中弹出你所选的供应商记录的信息。你可以进行编辑。如下图。
5. 在“edit supplier”页面中我们对address与status进行修改之后，点击“save”按钮。如下图。
6.数据保存到数据库，应用会刷新供应商列表页面。如下图。
十一，删除供应商信息
1.关于删除的代码，请查看index.js文件。在tplmst系统中点击“supplier”目录，我们可以看到供应商列表页面。然后点击供应商列表页面中的delete按钮。如下图。
2. 会在当前页面中弹出你所选的供应商记录的删除确认信息。你点击“yes”，确认删除。如下图。
3.数据保存到数据库，应用会刷新供应商列表页面，由之前的三条记录，又变成了两条记录。如下图。
十一、总结
至此，完成了供应商信息的增删改查，但是我们没有写一行与增删改查有关的c#代码，都是由abp提供了asynccrudappservice的接口来完成我们的功能。
上一篇： 东南西北怎么折怎么玩？属于90后的回忆
推荐阅读
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)
-
abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十五)
-
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理三 (二十一)
-
abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十二)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之五(三十一)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之八(三十四)
-
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理五 (二十三)
-
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理八(二十六)
-
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理六(二十四)
-
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七）