abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十五)

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”項目中的ViewsUsers目錄下的_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>