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>