2. 程式人生 > >ASP.NET MVC搭建專案後臺UI框架—6、客戶管理（新增、修改、查詢、分頁）

ASP.NET MVC搭建專案後臺UI框架—6、客戶管理（新增、修改、查詢、分頁）

阿新 • • 發佈：2019-01-17

目錄

接著之前未寫完的繼續，本篇，我將講解在此UI框架中和ASP.NET MVC4進行結合開發。效果如下：

這裡，我將新增和修改用了兩個不同的檢視，當然也可以把新增和修改放到同一個檢視中，但是要寫一些業務邏輯程式碼來區分當前呼叫的是修改還是新增，根據新增和修改的不同，而對介面進行不同的操作。

新增控制器Customer，關於更新操作，我就不得不想吐槽一下NHibernate，他妹的，每次都要先load一次，然後再Update()一次，如果你直接save，它就把你表中有，但是介面上沒有傳過來的值全部更新為null了，相比之下EF就好多了。

 public class CustomerController : Controller
    {
 
 
private string message = "<script>frameElement.api.opener.hidePublishWin('{0}', '{1}','{2}'); </script>"; //訊息，是否關閉彈出窗，是否停留在當前分頁（0，1）

        #region 客戶管理主頁
        public ActionResult Index()
        {
            return View();
        }

        /// <summary>
        /// 客戶列表
        
 
/// </summary>
        /// <param name="filter"></param>
        /// <returns></returns>
        [HttpPost]
        public JsonResult List(CustomerFilter filter)
        {
            filter.PageSize = int.MaxValue;
            var dataSource = CustomerInfo.GetByFilter(filter);

            List
 
<CustomerInfo> queryData = dataSource.ToList();

            var data = queryData.Select(u => new
            {
                ID = u.ID,
                CusCode = u.CusCode,
                CusName = u.CusName,
                BusssinessType = u.BusssinessType.GetDescription(false),
                Balance = u.Balance,
                CreditAmount = u.CreditAmount,
                Status = u.Status.GetDescription(false),
                Country = u.Country,
                CompanyName = u.CompanyName,
                Delivery = GetDeliveryList(u.ExpressCurInfoBy)

            });

            //構造成Json的格式傳遞
            var result = new { iTotalRecords = queryData.Count, iTotalDisplayRecords = 10, data = data };
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        #region 新增客戶
        /// <summary>
        /// 新增客戶
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult AddCustomer()
        {
            ViewBag.Title = "新增客戶";
            return View();
        }

        /// <summary>
        /// 新增客戶
        /// </summary>
        /// <param name="info"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult AddCustomer(CustomerInfo info)
        {
            string msg = string.Empty;
            if (ModelState.IsValid)
            {
                try
                {
                    info.Save();
                    msg = "新增客戶成功。";
                }
                catch (Exception ex)
                {
                    msg = "新增客戶失敗！" + ex.Message;
                    ViewBag.Msg = string.Format(message, msg, false,"0");
                }
                ViewBag.Msg = string.Format(message, msg, true,"0");
            }
            return View();
        }
        #endregion

        #region 修改客戶
        /// <summary>
        /// 修改客戶
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult UpdateCustomer(int id)
        {
            ViewBag.Title = "修改客戶";
            var result = CustomerInfo.Load(id);

            return View(result);
        }

        /// <summary>
        /// 修改客戶
        /// </summary>
        /// <param name="info"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UpdateCustomer(CustomerInfo info)
        {
            string msg = string.Empty;
            if (ModelState.IsValid)
            {
                try
                {
                    info.Update();
                    msg = "修改客戶成功。";
                }
                catch (Exception ex)
                {
                    msg = "修改客戶失敗！" + ex.Message;
                    ViewBag.Msg = string.Format(message, msg, false,"1");
                }
                ViewBag.Msg = string.Format(message, msg, true,"1");
            }
            return View();
        }
        #endregion
    }
View Code

新增檢視Index

@{
    ViewBag.Title = "客戶資訊";
}
<link href="~/libs/DataTables-1.10.6/media/css/jquery.dataTablesNew.css" rel="stylesheet" />
<script src="~/libs/DataTables-1.10.6/media/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTablesExt.js"></script>
<script type="text/javascript">
    //彈出框  
    var addDG, updateDG, matchDG;
    var w = 424, h = 520; //寬，高
    //新增記錄
    function showPublishWin() {
        addDG = new $.dialog({
            id: "AddChannel",
            title: "新增客戶",
            content: "url:/Customer/AddCustomer",
            width: w,
            height: h,
            max: false,
            min: false,
            lock: true,
            close: true,
            btnBar: false
        });
        addDG.show();
    }
    //修改記錄
    function modifyRecord(id) {
        updateDG = new $.dialog({
            id: "UpdateCustomer",
            title: "修改客戶",
            content: "url:/Customer/UpdateCustomer/" + id,
            width: w,
            height: h,
            max: false,
            min: false,
            lock: true,
            close: true,
            btnBar: false
        });
        updateDG.show();
    }
    //隱藏彈出框
    function hidePublishWin(msg, result, isStay) {
        var icon = "success.gif";
        if (result == "False") {
            icon = "error.gif";
        }
        $.dialog({
            title: "提示",
            icon: icon,
            titleIcon: 'lhgcore.gif',
            content: msg,
            lock: true,
            ok: true
        });
        if (result != "False") {
            if (addDG) {
                addDG.close();
            }
            if (updateDG) {
                updateDG.close();
            }
            if (matchDG) {
                matchDG.close();
            }
            if (isStay == 0) {
                reloadList();
            }
            else {
                reloadListNew();
            }
        }
    }
    function matchDelivery(id) {
        matchDG = new $.dialog({
            id: "UpdateCustomer",
            title: "客戶匹配",
            content: "url:/Customer/DeliveryMatching/" + id,
            width: 800,
            height: h,
            max: false,
            min: false,
            lock: true,
            close: true,
            btnBar: false
        });
        matchDG.show();
    }
    //重新整理，但是停留在當前分頁
    function reloadListNew() {
        var tables = $('#table_local').dataTable().api();//獲取DataTables的Api，詳見 http://www.datatables.net/reference/api/
        tables.ajax.reload(null,false);
    }
</script>
<script type="text/javascript">
    $(function () {
        var h = $(document).height() - 258;
        var table = $("#table_local").dataTable({
            bProcessing: true,
            "scrollY": h,
            "scrollCollapse": "true",
            "dom": 'ftr<"bottom"lip><"clear">',
            "bServerSide": false,                    //指定從伺服器端獲取資料  
            sServerMethod: "POST",
            sAjaxSource: "@Url.Action("List", "Customer")",
            "fnServerParams": function (aoData) {  //查詢條件
                aoData.push(
                    { "name": "CusCode", "value": $("#CusCode").val() },
                    { "name": "CusName", "value": $("#CusName").val() }
                    );
            },
            columns: [{ title: "1", "visible": false, "data": "ID" },
               { "data": "CusCode", title: "客戶程式碼" },
               { "data": "CusName", title: "客戶名稱" },
               { "data": "BusssinessType", title: "業務型別", width: "100" },
               { "data": "Country", title: "國家", width: "200" },
               { "data": "CompanyName", title: "公司名稱", width: "200" },
               { "data": "Delivery", title: "收貨商", width: "150" },
               { "data": "Balance", title: "賬戶餘額", width: "150" },
               { "data": "CreditAmount", title: "信用額度", width: "150" },
               { "data": "Status", title: "是否啟用", width: "100" },
               {
                   "data": "ID", orderable: false, title: "操作", width: "140", "render": function (data, type, row, meta) { //自定義列
                       var re = "<div style='text-align:center'><a style='visibility:visible' onclick='modifyRecord(" + data + ")'>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                       re = re + "<a style='visibility:visible' onclick='matchDelivery(" + data + ")'>匹配</a></div>";
                       return re;
                   }
               }
            ],
            paging: true,//分頁
            ordering: true,//是否啟用排序
            searching: true,//搜尋
            language: {
                "sProcessing": "處理中...",
                lengthMenu: '每頁顯示：<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="15">15</option>'
                    + '<option value="20">20</option>' + '<option value="25">25</option>' + '<option value="30">30</option>' + '<option value="35">35</option>' + '<option value="40">40</option>',//左上角的分頁大小顯示。
                search: '<span class="label label-success">搜尋：</span>',//右上角的搜尋文字，可以寫html標籤

                paginate: {//分頁的樣式內容。
                    previous: "上一頁",
                    next: "下一頁",
                    first: "",
                    last: ""
                },

                zeroRecords: "暫無記錄",//table tbody內容為空時，tbody的內容。
                //下面三者構成了總體的左下角的內容。
                info: "總共 <span class='pagesStyle'>(_PAGES_) </span>頁，顯示 _START_ -- _END_ ，共<span class='recordsStyle'> (_TOTAL_)</span> 條",//左下角的資訊顯示，大寫的詞為關鍵字。初始_MAX_ 條 
                infoEmpty: "0條記錄",//篩選為空時左下角的顯示。
                infoFiltered: ""//篩選之後的左下角篩選提示，
            },
            pagingType: "full_numbers"//分頁樣式的型別

        });
        //設定選中行樣式
        $('#table_local tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
    });
    //查詢 重新整理
    function reloadList() {
        var tables = $('#table_local').dataTable().api();//獲取DataTables的Api，詳見 http://www.datatables.net/reference/api/
        tables.ajax.reload();
    }
</script>
<div 
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—6、客戶管理（新增、修改、查詢、分頁）

     
 目錄

接著之前未寫完的繼續，本篇，我將講解在此UI框架中和ASP.NET MVC4進行結合開發。效果如下：

這裡，我將新增和修改用了兩個不同的檢視，當然也可以把新增和修改放到同一個檢視中，但是要寫一些業務邏輯程式碼來區分當前呼叫的是修改還是新增，根據新增和修改的不同，而對介面進行不同的操作。
新 



  
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—1、後臺主框架

     
 目錄

準備做一個新的專案，從網頁設計師手中拿到了html靜態頁面（沒有一行js），但是都一個個零散的介面，我需要做的是：
1、  把這些零散的html介面連線起來
2、  自己編寫js或者jquery實現選單效果
3、  把html頁面整合在我們的MVC Razor檢視中
本想著使用第三方的UI 



  
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—8、將View中選擇的資料行中的部分資料傳入到Controller中

     
 目錄



現在，有一個需求，我需要將表格中選中行的資料中的一部分傳直接傳到控制器中，然後儲存到另外一張表中。一開始，我就想到在前臺使用ajax構造json資料，然後控制器直接通過list接收。
選中介面中的行，然後點選“批量新增到月結表”，彈出一個對話方塊，這個對話方塊的月份列表為當前選擇資料行中 



  
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—2、選單特效

     
 目錄


上一篇，已經把整個專案的框框給搭建好了，但是還沒有任何js效果實現。這一節，我就來說下關於選單的特效實現。我需要的效果如下：


需求總結：

點選頂部選單模組，左側顯示不同模組下面的選單列表
點選左側選單選項，展開下面的子選單，並摺疊其它選單模組，選單圖示摺疊顯示為+，展開顯示為 



  
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—3、面板摺疊和展開

     
 目錄

上一節已經新增好了選單特效，這一節，我們來新增面板的摺疊和展開功能，效果圖如下：

思路：我在Right檢視中添加了一個div，在這個div中存放一張圖片，通過對這張圖片的點選，來控制Left檢視的隱藏和顯示。說白了，這裡其實就是修改主框架Index檢視中frameset的 cols屬性。
 



  
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—7、統計報表

     
 
本節，我將通過一個Demo，演示Datatables 和ASP.NET MVC的完美結合，可以這麼說，如果這樣的介面都能做出來，後臺系統90%的介面功能都可以開發出來了。
用jquery Datatables 來開發確實是件比較蛋疼的事情（和Jquery EasyUI、MiniUI、ExtJs相比），用 



  
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—11、自動載入下拉框查詢

     
 
需求：在查詢記錄的時候，輸入第一個字，就自動把以這個字開頭的相關記錄查找出來，輸入2個字就過濾以這兩個子開頭的記錄，依次類推。
突然要用到這個功能了，印象中曾經寫過這個功能的文章，一下子找不到了，只好重新貼出來備忘。最近部落格快2個月沒更新了，因為這兩個月一直在閉門寫書。


  <link 



  
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—9、伺服器端排序

     
 
關於jquery datables的在伺服器端的排序，在網上貌似沒有看到.NET的例子，說實話，之前我也迷惑過，習慣了直接從網上找現成的東西，經過一翻搜尋，沒找到，於是乎，自己除錯唄，調了前臺，調後臺，還真被我看出了規律。事實上datables是支援多列排序的，但是本例，我只寫了單列排序。

在控制器 



  
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—5、Demo演示Controller和View的互動

     
 目錄

這一節，我將用一個Demo來演示在此UI框架中，控制器和檢視的互動。以渠道管理為例。效果圖如下：
按回車執行查詢，不是F5，筆誤。

這裡我使用了基於jquery的模態窗體元件lhgdialog和表格元件dataTables。dataTables更多資料請參考：http://dt.thxop 



  
 

    


    
    
ASP.NET MVC搭建專案後臺UI框架—4、tab多頁籤支援

     
 目錄

在點選左側選單中的選項時，我希望有Extjs、EasyUI等中類似的tab頁籤功能，因為這樣可以支援多個頁面的瀏覽，有時候我們可能需要同時開啟多個頁面，如果不使用頁籤，那麼每次要檢視某個頁面都要去重新呼叫並重新整理，如果在網速慢或者該介面載入很耗時的情況下，簡直會讓人奔潰。因為我又不想引入整個Ex 



  
 

    


    
    
Asp.net MVC 搭建屬於自己的框架（一）

     
 C4D   pagedlist   del   tran   6.0   ext   才有   應該   frame   網址：https://www.cnblogs.com/sggx/p/4555255.html
為什麽要自己搭框架？
　　大家夥別急，讓我慢慢地告訴你！大家有沒有這種感覺，從一家跳槽到另一家 



  
 

    


    
    
ASP.Net MVC OA專案筆記<六>

     
 1.1.1 開始寫業務，先寫業務的實現再寫業務的介面 
         業務類中也是有寫增刪改查公用的方法 
         引用Model，IDAL，DALFactory 
    & 



  
 

    


    
    
使用Visual Studio 2015 開發ASP.NET MVC 5 專案部署到Mono/Jexus

     
 最新的Mono 4.4已經支援執行asp.net mvc5專案，有的同學聽了這句話就興高采烈的拿起Visual Studio 2015建立了一個mvc 5的專案，然後部署到Mono上，瀏覽下發現一堆錯誤出現，心中一萬隻草泥馬奔騰而來，這也叫支援嗎，這個問題是Visual Studio造成的，不相信的話可以使用 



  
 

    


    
    
ASP.net Mvc SportsSpore專案開發(四）

     
 
                1.使用模型繫結MVC框架使用了一個叫做“模型繫結”的系統，以便通過HTTP請求來建立一些C#物件，目的是將它們作為引數值傳遞給動作方法。這是MVC 處理表單的方式。例如，框架會考查目標動作方法的引數，用一個模型繫結器來獲取由瀏覽器傳送過來的表單值，並在傳遞給動作方法之前將它 



  
 

    


    
    
ASP.net Mvc SportsSpore專案開發(二）

     
 
                1.新增導航控制元件為了使客戶能通過產品分類對其進行導航，需要從三面著手：1）增強Product Controller類中的List動作模型，以使它能夠過濾儲存庫中的Product物件。2）重新檢查並增強URL方案，並且修改路由配置。3)   建立一個產品分類列表，將其放入網 



  
 

    


    
    
ASP.net Mvc SportsSpore專案開發(五）

     
 
                1.新增分類管理此次需要實現的是對物品資訊的讀取，新增更新和刪除的操作。這些動作統稱為“CRUD”。建立CRUD控制器，在Controllers檔案下新增控制器AdminControllerusing System;
using System.Collections.Gene 



  
 

    


    
    
ASP.NET MVC：窗體身份驗證及角色權限管理示例

     
 rms   客戶端請求   系統   contex   config   尋找   sign   分享圖片   更多   前言
　　本來使用Forms Authentication進行用戶驗證的方式是最常見的，但系統地闡明其方法的文章並不多見，網上更多的文章都是介紹其中某一部分的使用方法或實現原理，而更多的朋 



  
 

    


    
    
基於ASP.NET WPF技術及MVP模式實戰太平人壽客戶管理專案開發視訊教程

     
 

課程大綱：
第1講:專案的需求分析
 
第2講:專案資料庫檔案設計
 
第3講:構建專案的資料檔案訪問技術-excel操作技術
 
第4講:專案的多層架構設計
 
第5講:構建專案的資料檔案訪問層1-IDAL
 
第6講:構建專案的資料檔案訪問層2-反射
 
第7講:構建專案的資料檔案訪問層3-Repos 



  
 

    


    
    
基於ASP.NET WPF技術及MVP模式實戰太平人壽客戶管理項目開發(Repository模式）

     
 ofa   content   刪除   sta   -m   綁定   愛的   -i   公司   
								            
						
                
親愛的網友，我這裏有套課程想和大家分享，假設對這個課程有興趣的。能夠加我的QQ2059055336和我聯系。
?課 



  
 

    


    
    
22、ASP.NET MVC入門到精通——搭建專案框架

     
 
前面的章節，說了ASP.NET MVC專案中常用的一些技術和知識點，更多的是理論上面的東西，接下來，我將通過一個簡單的OA專案來應用我們之前涉及到的一些技術，為了兼顧初學者，所以我儘量把操作步驟說得足夠詳細。（本來想用VS2015來演示MVC5開發的，無奈家裡的筆記本是11年2月份的老爺機了，一直未曾捨得