abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI之貨物管理八(二十六)-有解無憂

abp(net 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實作倉儲管理系統——選單-上 (十六)

abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI前端頁面框架 (十八)

abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI之貨物管理一 (十九)

abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI之貨物管理二 (二十)

abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI之貨物管理三 (二十一) abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI之貨物管理四 (二十二) abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI之貨物管理五 (二十三) abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI之貨物管理六(二十四) abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI之貨物管理七(二十五)

從篇 abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI前端頁面框架 (十八) 至abp(net core)+easyui+efcore實作倉儲管理系統——EasyUI之貨物管理七(二十五) 為止，我們已經通過EasyUI完成了貨物資訊管理的增刪改功能基本實作，現在我們來完成查詢功能，

十七、查詢貨物資訊

1. 在Visual Studio 2017的“解決方案資源管理器”中，右鍵單擊在領域層“ABP.TPLMS.Web.Mvc”專案中的Views\Cargo目錄，找到Index.cshmtl檔案，添加一個查詢條件相關代碼，如下圖，

具體代碼如下：

<div id="dg-button">
      <form name="searchform" method="post" action="" id="searchform">
             <label for="Name">貨物名稱：</label>
             <input  name="Name" id="Name" class="easyui-validatebox" data-options="width:200" />
              <label for="Code">貨物代碼：</label>
              <input name="Code" id="Code" class="easyui-validatebox" data-options="width:150" />
               <label for="HsCode">商品編碼：</label>
               <input name="HsCode" id="HsCode" class="easyui-validatebox" data-options="width:100" />
              <a href="#" id="search" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="Search()">查詢</a>
          </form>
        </div>

2.在Visual Studio 2017的“解決方案資源管理器”中，右鍵單擊“ABP.TPLMS.Application”專案的 “Cargos”檔案夾中，找到Paged CargoResultRequestDto.cs檔案，添加查詢條件屬性，代碼如下，

public class PagedCargoResultRequestDto : PagedResultRequestDto
    {
        public string Keyword { get; set; }
        public string CargoName { get; set; }
        public string CargoCode { get; set; }
        public string HsCode { get; set; }
    }
}

3. 在Visual Studio 2017的“解決方案資源管理器”中，右鍵單擊在領域層“ABP.TPLMS.Web.Mvc”專案中的Controller目錄，找到“CargoController.cs”檔案，如下圖，

具體代碼如下：

[DontWrapResult]
        [HttpPost]
        public string List()
        {
            var page = Request.Form["page"].ToString();
            var size = Request.Form["rows"].ToString();
            int pageIndex = page == null ? 1 : int.Parse(page);
            int pageSize = size == null ? 20 : int.Parse(size);

            PagedCargoResultRequestDto paged = new PagedCargoResultRequestDto();
            paged.MaxResultCount = pageSize;
            paged.SkipCount = ((pageIndex-1)<0?0: pageIndex - 1) * pageSize;
            paged.CargoName = Request.Form["Name"].ToString();
            paged.CargoCode = Request.Form["Code"].ToString();
            paged.HsCode = Request.Form["HsCode"].ToString(); 

            var userList = _cargoAppService.GetAll(paged).GetAwaiter().GetResult().Items;
            int total = _cargoAppService.GetAll(paged).GetAwaiter().GetResult().TotalCount; //1000;
            var json = JsonEasyUI(userList,total);
            return json;
        }

4. 在Visual Studio 2017的“解決方案資源管理器”中，找到領域層“ABP.TPLMS.Web.Mvc”專案中的wwwroot目錄下的view-resources\Cargo檔案夾下，找到cargomgr.js檔案，在工具列(toolbar)中添加查詢條件，如下圖畫框處，

5.在cargomgr.js檔案添加一個查詢方法Search，代碼如下，

function Search() {
    var _$form = $('form[name=searchform]');
    var params = _$form.serializeFormToObject();
    $('#dgCargo').datagrid({ queryParams:params});
}

6.在Visual Studio 2017中按F5運行應用程式，

7.在瀏覽器中的地址欄中輸入“http://localhost:5000/”，然后輸入管理員用戶名進行登錄，

8.在主界面的選單中，選擇“Business->貨物管理”選單項，瀏覽器中呈現一個帶查詢條件的貨物資訊串列與四個按鈕，如下圖，

9.在“貨物代碼”查詢條件中輸入“A”，然后點擊“查詢”按鈕，然而查詢結果沒有變化，如下圖，

10. 在“商品編碼”查詢條件中輸入“8548900010”，然后點擊“查詢”按鈕，然而查詢結果沒有變化，如下圖，

11.通過上面的兩次測驗，發現查詢沒有起到作用，輸入查詢條件，還是查詢出了所有記錄，接下來我們來把查詢條件添加到查詢方法中，在Visual Studio 2017的“解決方案資源管理器”中，右鍵單擊“ABP.TPLMS.Application”專案的 “Cargos”檔案夾中，找到CargoAppService.cs檔案，重寫CreateFilteredQuery方法，代碼如下，

protected override IQueryable<Cargo> CreateFilteredQuery(PagedCargoResultRequestDto input)
        {

            return base.CreateFilteredQuery(input)
                 .Where(t => t.CargoName.Contains(input.CargoName))
                 .Where(t => t.CargoCode.Contains(input.CargoCode))
                 .Where(t => t.HSCode.Contains(input.HsCode))
                 ;
        }

12. 重復上面的第6、7、8步，然后在“貨物代碼”查詢條件中輸入“a”，然后點擊“查詢”按鈕，然而查詢出所有貨物代碼中有“a”的貨物資訊，如下圖，

13.在“商品編碼”查詢條件中輸入“1100120000”，然后點擊“查詢”按鈕，然而查詢出所有“商品編碼”中有“1100120000”的貨物資訊，如下圖，

14.在“商品名稱”查詢條件中輸入“觸摸屏”，然后點擊“查詢”按鈕，然而查詢出所有“商品名稱”中有“觸摸屏”的貨物資訊，如下圖，

15.在“商品名稱”查詢條件中輸入“觸摸屏”，然后點擊“查詢”按鈕，然而查詢出所有“商品名稱”中有“觸摸屏”的貨物資訊，然后點擊翻頁，如下圖，

至此，通過EasyUI進行增刪改查的功能已經全部實作，

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/94928.html

標籤：.NET Core

上一篇：建議收藏備用：.net core使用QRCoder生成普通二維碼和帶Logo的二維碼詳細使用教程，原始碼已更新至開源模板

下一篇：ASP.NET Core 3.x 并發限制