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

時間  2019-11-05
標籤 abp core easyui+efcore easyui efcore 實現 倉儲 管理 系統 使用 webapi curd 十四 简体版
原文   原文鏈接

abp(net core)+easyui+efcore實現倉儲管理系統目錄

abp(net core)+easyui+efcore實現倉儲管理系統——ABP整體介紹(一）javascript

abp(net core)+easyui+efcore實現倉儲管理系統——解決方案介紹(二)html

abp(net core)+easyui+efcore實現倉儲管理系統——領域層建立實體(三)java

 abp(net core)+easyui+efcore實現倉儲管理系統——定義倉儲並實現 (四)ajax

abp(net core)+easyui+efcore實現倉儲管理系統——建立應用服務（五）數據庫

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之控制器（六）app

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之列表視圖（七）ide

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之增刪改視圖（八）post

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之菜單與測試（九）測試

abp(net core)+easyui+efcore實現倉儲管理系統——多語言（十）ui

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 (十三) )，在這一篇文章中咱們實現新增供應商的相關功能。

9、新增供應商

　 （一） 建立js文件

     咱們先來看一下 「ABP.TPLMS.Web.Mvc」項目中的wwwroot目錄下的view-resources\Users目錄中的Index.js文件，而後參照此文件來寫新增供應商的腳本文件。

     1. 在Visual Studio 2017的「解決方案資源管理器」中，找到展示層「ABP.TPLMS.Web.Mvc」項目中的wwwroot目錄下的view-resources目錄。使用鼠標右鍵單擊此目錄，在彈出菜單中選擇「添加」 > 「新建文件夾」。並重命名爲「Supplier」。

     2. 在Visual Studio 2017的「解決方案資源管理器」中，鼠標右鍵單擊「Supplier」文件夾，而後選擇「添加」 > 「新建項…」。 在「添加新項-ABP.TPLMS.Web.Mvc」對話框中，選擇「javascript文件」，並將名稱命名爲Index.js。以下圖。

 

     3. 在Index.js文件中，咱們寫入以下代碼。

(function() {
    $(function() { 

        var _supplierService = abp.services.app.supplier;
        var _$modal = $('#SupplierCreateModal');
        var _$form = _$modal.find('form'); 

        _$form.validate({         
        });

        $('#RefreshButton').click(function () {
            refreshModuleList();
        }); 

        $('.delete-supplier').click(function () {
            var userId = $(this).attr("data-supplier-id");
            var userName = $(this).attr('data-supplier-name');
            deleteSupplier(userId, userName);
        });

 
        $('.edit-supplier').click(function (e) {
            var supplierId = $(this).attr("data-supplier-id");

            e.preventDefault();
            $.ajax({
                url: abp.appPath + 'Supplier/EditSupplierModal?supplierId=' + supplierId,

                type: 'POST',
                contentType: 'application/html',
                success: function (content) {
                    $('#SupplierEditModal div.modal-content').html(content);
                },

                error: function (e) { }
            });
        }); 

        _$form.find('button[type="submit"]').click(function (e) {
            e.preventDefault();

            if (!_$form.valid()) {
                return;
            }

            var supplier = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js         

            abp.ui.setBusy(_$modal);
            _supplierService.create(supplier).done(function () {
                _$modal.modal('hide');
                location.reload(true); //reload page to see new user!

            }).always(function () {
                abp.ui.clearBusy(_$modal);
            });
        });
      

        _$modal.on('shown.bs.modal', function () {
            _$modal.find('input:not([type=hidden]):first').focus();

        });
 

        function refreshSupplierList() {
            location.reload(true); //reload page to see new user!

        } 

        function deleteSupplier(supplierId, supplierName) {
            abp.message.confirm(
                abp.utils.formatString(abp.localization.localize('AreYouSureWantToDelete', 'TPLMS'), supplierName),

                function (isConfirmed) {
                    if (isConfirmed) {
                        _supplierService.delete({
                            id: supplierId

                        }).done(function () {
                            refreshSupplierList();

                        });
                    }
                }
            );
        }
    });
})();

4. 在Visual Studio 2017的「解決方案資源管理器」中，找到「ABP.TPLMS.Web.Mvc」項目中的Views目錄下的Supplier目錄中的Index.cshtml文件。雙擊打開此文件，並寫入如下代碼，引用腳本。 

@section scripts    {  

        <script src="~/view-resources/Views/Supplier/Index.js" asp-append-version="true"></script>   }

 

   （二）建立新增供應商視圖

       1. 在Visual Studio 2017的「解決方案資源管理器」中，找到「ABP.TPLMS.Web.Mvc」項目中的Views目錄下的Supplier目錄中的Index.cshtml文件。雙擊打開此文件，並寫入如下代碼。 

<div class="modal fade" id="SupplierCreateModal" tabindex="-1" role="dialog" 
aria-labelledby="SupplierCreateModalLabel" data-backdrop="static">
    <div class="modal-dialog" role="document">

        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span>@L("CreateNewSupplier")</span>
                </h4>
            </div>
            <div class="modal-body">
                <form name="SupplierCreateForm" role="form"  class="form-validation">
                    <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>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">@L("Cancel")</button>
                        <button type="submit" class="btn btn-primary waves-effect">@L("Save")</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

 

      2. 在Visual Studio 2017中按F5運行應用程序。登陸以後，點擊「Supplier」目錄，咱們能夠看到供應商列表頁面。而後點擊供應商列表頁面中的新增按鈕。以下圖。

 

3. 在「Create New Supplier」頁面中咱們輸入完信息以後，點擊「Save」按鈕。數據保存到數據庫，應用會刷新供應商列表頁面。以下圖。

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程