abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——使用 WEBAPI實(shí)現(xiàn)CURD (十五)

core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)目錄
<https://www.cnblogs.com/chillsrc/p/11231284.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——ABP總體介紹(一）
<https://www.cnblogs.com/chillsrc/p/10913047.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——解決方案介紹(二)
<https://www.cnblogs.com/chillsrc/p/10944870.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——領(lǐng)域?qū)觿?chuàng)建實(shí)體(三)
<https://www.cnblogs.com/chillsrc/p/10980974.html>

?abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——定義倉儲(chǔ)并實(shí)現(xiàn) (四)
<https://www.cnblogs.com/chillsrc/p/11024357.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——?jiǎng)?chuàng)建應(yīng)用服務(wù)（五）
<https://www.cnblogs.com/chillsrc/p/11065667.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——展現(xiàn)層實(shí)現(xiàn)增刪改查之控制器（六）
<https://www.cnblogs.com/chillsrc/p/11096690.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——展現(xiàn)層實(shí)現(xiàn)增刪改查之列表視圖（七）
<https://www.cnblogs.com/chillsrc/p/11124614.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——展現(xiàn)層實(shí)現(xiàn)增刪改查之增刪改視圖（八）
<https://www.cnblogs.com/chillsrc/p/11159642.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——展現(xiàn)層實(shí)現(xiàn)增刪改查之菜單與測(cè)試（九）
<https://www.cnblogs.com/chillsrc/p/11195189.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——多語言（十）
<https://www.cnblogs.com/chillsrc/p/11231265.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——使用 WEBAPI實(shí)現(xiàn)CURD (十一)
<https://www.cnblogs.com/chillsrc/p/11269737.html>

?abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——使用 WEBAPI實(shí)現(xiàn)CURD (十二)
<https://www.cnblogs.com/chillsrc/p/11303125.html>

?abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——使用 WEBAPI實(shí)現(xiàn)CURD (十三)
<https://www.cnblogs.com/chillsrc/p/11341288.html>

abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——使用 WEBAPI實(shí)現(xiàn)CURD (十四)
<https://www.cnblogs.com/chillsrc/p/11377940.html>

?

上接(abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲(chǔ)管理系統(tǒng)——使用 WEBAPI實(shí)現(xiàn)CURD (十四)
<https://www.cnblogs.com/chillsrc/p/11377940.html>)，在這一篇文章中我們實(shí)現(xiàn)更新與刪除供應(yīng)商的相關(guān)功能。

?

?

十、創(chuàng)建更新供應(yīng)商視圖

?

???? （一）創(chuàng)建js文件

?

?? ? 我們先來看一下
“ABP.TPLMS.Web.Mvc”項(xiàng)目中的wwwroot目錄下的view-resources\Users目錄中的_EditUserModal.js文件，然后參照此文件來寫修改供應(yīng)商的腳本文件。

?

???? 1. 在Visual Studio
2017的“解決方案資源管理器”中，找到領(lǐng)域?qū)印癆BP.TPLMS.Web.Mvc”項(xiàng)目中的wwwroot目錄下的view-resources目錄。使用鼠標(biāo)右鍵單擊“Supplier”文件夾，然后選擇“添加”
> “新建項(xiàng)…”。
在“添加新項(xiàng)-ABP.TPLMS.Web.Mvc”對(duì)話框中，選擇“javascript文件”，并將名稱命名為_EditSupplierModal.js。

?

??? 2. 在_EditSupplierModal.js文件中，我們寫入編輯供應(yīng)商的有關(guān)腳本，具體代碼如下。

?
(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);
?

?? （二）創(chuàng)建修改供應(yīng)商視圖

?

????????? 我們先來看一下
“ABP.TPLMS.Web.Mvc”項(xiàng)目中的Views\Users目錄下的_EditUserModal.cshtml文件，然后參照此文件來寫修改供應(yīng)商的視圖文件。

?

???????? 1. 在Visual Studio
2017的“解決方案資源管理器”中，找到“ABP.TPLMS.Web.Mvc”項(xiàng)目中的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"
> <divclass="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> <divclass="col-sm-6"> <div class="form-group form-float">
<divclass="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> <divclass="row clearfix"> <div class="col-sm-6">
<divclass="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">
<divclass="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> <divclass="col-sm-6"> <div class="form-group form-float">
<divclass="form-line"> <label asp-for="@Model.Supplier.Status" class="form-label
"></label> <input type="text" name="Status" class="form-control" /> </div>
</div> </div> </div> <divclass="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”項(xiàng)目中的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運(yùn)行應(yīng)用程序。登錄之后，點(diǎn)擊“Supplier”目錄，我們可以看到供應(yīng)商列表頁面。然后點(diǎn)擊供應(yīng)商列表頁面中的Edit按鈕。如下圖。

?

?

?

??? 4. 會(huì)在當(dāng)前頁面中彈出你所選的供應(yīng)商記錄的信息。你可以進(jìn)行編輯。如下圖。

?

?

?

??? 5. 在“Edit? Supplier”頁面中我們對(duì)Address與Status進(jìn)行修改之后，點(diǎn)擊“Save”按鈕。如下圖。

?

?

?

??? 6.數(shù)據(jù)保存到數(shù)據(jù)庫，應(yīng)用會(huì)刷新供應(yīng)商列表頁面。如下圖。

?

?

?

?

?

十一，刪除供應(yīng)商信息

?

????
1.關(guān)于刪除的代碼，請(qǐng)查看Index.js文件。在TPLMST系統(tǒng)中點(diǎn)擊“Supplier”目錄，我們可以看到供應(yīng)商列表頁面。然后點(diǎn)擊供應(yīng)商列表頁面中的Delete按鈕。如下圖。

?

??? 2. 會(huì)在當(dāng)前頁面中彈出你所選的供應(yīng)商記錄的刪除確認(rèn)信息。你點(diǎn)擊“YES”，確認(rèn)刪除。如下圖。



?

??? 3.數(shù)據(jù)保存到數(shù)據(jù)庫，應(yīng)用會(huì)刷新供應(yīng)商列表頁面，由之前的三條記錄，又變成了兩條記錄。如下圖。

?

?

?

?十一、總結(jié)

?

????
至此，完成了供應(yīng)商信息的增刪改查，但是我們沒有寫一行與增刪改查有關(guān)的c#代碼，都是由ABP提供了AsyncCrudAppService的接口來完成我們的功能。

?

• ? 上一篇： 基于 SpringBoot2.0+優(yōu)雅整合 SpringBoot+Mybatis
• ? 下一篇：【原創(chuàng)】為什么Redis集群有16384個(gè)槽