本節，我將通過一個Demo，演示Datatables 和ASP.NET MVC的完美結合，可以這麼說，如果這樣的介面都能做出來，後臺系統90%的介面功能都可以開發出來了。

用jquery Datatables 來開發確實是件比較蛋疼的事情（和Jquery EasyUI、MiniUI、ExtJs相比），用其它的第三方UI框架來實現相同的功能真是非常非常的簡單，可是使用Datatables卻是那麼的吃力，至少我這麼覺得，可能是因為我對這個控制元件使用得還不夠純熟。在官網，datatables預設使用的是bootstraps的樣式，這裡我已經把樣式重寫了一部分。

看見公司原有的系統，同樣是使用ASP.NET MVC做的，在頁面隨便點選個東東，整個介面就重新整理了，刷得我自己都受不了，更別指望固定表頭啊什麼什麼的了，完全不存在使用者體驗啊！於是我就自己寫了UI框架（也可以說是組裝，但是我重寫了許多東西）。

技術點：1、伺服器端分頁。2、查詢（模糊查詢）3、介面操作重新整理後依舊保留當前分頁 4、固定表頭、表尾 5、動態控制列的隱藏和顯示 6、全選、反選（資料行中複選框全部選中時，全選按鈕自動選中，我發現很多程式設計師這個功能一直沒做，可是說是bug麼？）  7、伺服器排序（功能我已經開發出來了，但是這裡我沒有寫上去，這個網上我還沒有看到實現的Demo） 8、特殊欄位標紅顯示 9、滑動變色 10、單擊行選中變色 ....

先看下效果：

點選圖片，摺疊或展開列

新建Reconciliation控制器

using Core.CostFlow;
using Core.Filters;
 
using Core.Reconciliation;
using Data.Reconciliation;
using ProjectBase.Utils;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ProjectBase.Utils.Entities;

namespace Site.Controllers
{
    public class ReconciliationController : Controller
    {
        
 
//運單對賬
        public ActionResult WayBill()
        {
            return View();
        }

        [HttpPost]
        public JsonResult WayBillList(WayBillReconciliationFilter filter)
        {
            DataTablesRequest parm = new DataTablesRequest(this.Request);    //處理物件
            int pageIndex = parm.iDisplayStart / parm.iDisplayLength;
            filter.PageIndex = pageIndex;    //頁索引
            filter.PageSize = parm.iDisplayLength;    //頁行數
            var DataSource = WayBillReconciliation.GetByFilter(filter) as WRPageOfList<WayBillReconciliation>;

            int i = parm.iDisplayLength * pageIndex;

            List<WayBillReconciliation> queryData = DataSource.ToList();
            var data = queryData.Select(u => new
           {
               Index = ++i, //行號
               ID = u.ID,
               CusName = u.CusName, //客戶簡稱
               PostingTime =u.PostingTime==null?string.Empty: u.PostingTime.Value.ToStringDate(),//收寄日期
               ExpressNo = u.ExpressNo, //郵件號
               BatchNO = u.LoadBillNum, //提單號
               Weight = u.Weight==null ? 0m : u.Weight / 100, //重量
               WayBillFee = u.WayBillFee, //郵資
               ProcessingFee = u.ProcessingFee, //郵政郵件處理費
               InComeWayBillFee = u.ExpressFee, //客戶運費
               InComeOprateFee = u.OperateFee, //客戶操作費
               WayBillMargins = u.WayBillProfit, //運費毛利
               TotalMargins = u.ExpressFee + u.OperateFee + u.InComeOtherFee-(u.WayBillFee + u.ProcessingFee + u.CostOtherFee), //總毛利
               Margin = (u.ExpressFee + u.OperateFee + u.InComeOtherFee == 0 ? 0m : (u.ExpressFee + u.OperateFee + u.InComeOtherFee - (u.WayBillFee + u.ProcessingFee + u.CostOtherFee)) / (u.ExpressFee + u.OperateFee + u.InComeOtherFee) * 100) + "%", //毛利率 毛利率=(總收入-總的支出的成本)/總收入*100% 
                           
               ReconcileDate=DateTime.Now.ToString("yyyy-MM"), //對賬日期
               CostOtherFee = u.CostOtherFee, //成本 其他費用
               CostTotalFee = u.WayBillFee + u.ProcessingFee+u.CostOtherFee, //成本 總費用
               CostStatus = u.CostStatus.ToChinese(),  //成本 狀態
               InComeOtherFee = u.InComeOtherFee, //收入 其他費用
               InComeTotalFee = u.ExpressFee + u.OperateFee+u.InComeOtherFee, //收入 總費用
               InComeStatus = u.InComeStatus.ToChinese(),  //收入 狀態
               TotalStatus=""
           });
            decimal totalProfit = 0m;      //總毛利求和
            //構造成Json的格式傳遞
            var result = new
            {
                iTotalRecords = DataSource.Count,
                iTotalDisplayRecords = DataSource.RecordTotal,
                data = data,
                TotalWeight = DataSource.StatModelBy.TotalWeight/100,
                TotalWayBillFee = DataSource.StatModelBy.TotalWayBillFee,
                               TotalProcessingFee = DataSource.StatModelBy.TotalProcessingFee,
                               TotalExpressFee = DataSource.StatModelBy.TotalExpressFee,
                               TotalOperateFee = DataSource.StatModelBy.TotalOperateFee,
                               SumWayBillProfit = DataSource.StatModelBy.TotalWayBillProfit,
                               SumTotalProfit = totalProfit
            };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 提單對賬
        /// </summary>
        /// <returns></returns>
        public ActionResult LoadBill()
        {
            return View();
        }

        public JsonResult LoadBillList()
        {
            return Json(null, JsonRequestBehavior.AllowGet);
        }
    }
}

新建WayBill檢視

@{
    ViewBag.Title = "運費對賬";
}
<style type="text/css">
    .numberColor {
        color:red;
    }
</style>
<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 src="~/libs/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
    $(function () {
        var h = $(document).height() - 312;
        var table = $("#table_local").dataTable({
            bProcessing: true,
            "scrollY": h,
            "scrollCollapse": "true",
            "dom": 'tr<"bottom"lip><"clear">',
            "bServerSide": true,                    //指定從伺服器端獲取資料  
            sServerMethod: "POST",
            showRowNumber:true,
            sAjaxSource: "@Url.Action("WayBillList", "Reconciliation")",
            "initComplete": function (data, args) {
                //getTotal(args);
                var arr = new Array(7,8,9,12,13,14);
                controlColumnShow(table, arr,false);
            },
            "fnServerParams": function (aoData) {  //查詢條件
                aoData.push(
                    { "name": "CusShortName", "value": $("#CusShortName").val() },
                    { "name": "LoadBillNum", "value": $("#LoadBillNum").val() },
                    { "name": "ExpressNo", "value": $("#ExpressNo").val() },
                    { "name": "PostingTime", "value": $("#PostingTime").val() },
                    { "name": "PostingTimeTo", "value": $("#PostingTimeTo").val() }
                    // ,{ "name": "PostingTimeTo", "value": $("#sltMargin").val() }
                     );
            },
            //跟陣列下標一樣，第一列從0開始，這裡表格初始化時，第四列預設降序
            "order": [[ 2, "asc" ]],
            columns: [
               {
                   "data": "ID", orderable: false,
                   "render": function (data, type, row, meta) {
                       return " <input id='cbx" + data + "' type='checkbox' onclick='controlSelectAll(" + data + ")' class='cbx' value='" + data + "'/>  " + row.Index;
                   }
               },                                                      
                { "data": "ReconcileDate",visible:false},//對賬日期
                { "data": "CusName" }, //客戶名稱
                { "data": "PostingTime"},//收寄日期
                { "data": "ExpressNo", orderable: false }, //郵件號
                { "data": "BatchNO"},//提單號
                { "data": "Weight"},//重量
                { "data": "WayBillFee"},//郵政郵資
                { "data": "ProcessingFee" },//郵政郵件處理費
                { "data": "CostOtherFee"},//其它費用
                { "data": "CostTotalFee" },//總成本
                { "data": "CostStatus", orderable: false },//狀態
                { "data": "InComeWayBillFee" },//客戶運費
                { "data": "InComeOprateFee"},//客戶操作費
                { "data": "InComeOtherFee"},//其它費用
                { "data": "InComeTotalFee" },//總收入
                { "data": "InComeStatus", orderable: false },//狀態
                 {
                     "data": "WayBillMargins", orderable: false, "render": function (data, type, row, meta) { //運費毛利
                         var css = "";
                         if (data < 0) {
                             css=" class='numberColor'";
                         }
                         var re = "<div"+css+">"+data+"</div>";
                         return re;
                     }
                 },
                  {
                      "data": "TotalMargins", orderable: false, "render": function (data, type, row, meta) { //總毛利
                          var css = "";
                          if (data < 0) {
                              css = " class='numberColor'";
                          }
                          var re = "<div" + css + ">" + data + "</div>";
                          return re;
                      }
                  },
                { "data": "Margin", orderable: false },//毛利率
                { "data": "TotalStatus", orderable: false },
                 {
                     "data": "ID", orderable: false, width: "80", "render": function (data, type, row, meta) { //操作
                         var re = "<div style='text-align:center'><a style='visibility:visible' onclick='openDetail(" + data + ")'>詳情</a>&nbsp;&nbsp;";
                         return re;
                     }
                 }
            ],
            paging: true,//分頁
            ordering: true,//是否啟用排序
            searching: true,//搜尋
            language: {
                "sProcessing": "處理中...",
                lengthMenu: '每頁顯示：<select class="form-control input-xsmall">' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>'
                    + '<option value="50">50</option>' + '<option value="100">100</option>' + '<option value="150">150</option>' + '<option value="200">200</option>' + '<option value="250">250</option>',//左上角的分頁大小顯示。
                search: '<span class="label label-success">搜尋：</span>',//右上角的搜尋文字，可以寫html標籤

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

                zeroRecords: "暫無記錄",//table tbody內容為空時，tbody的內容。
                //下面三者構成了總體的左下角的內容。
                info: "
            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

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

  
 

    

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

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

  
 

    

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

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

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

  
 

    

    
    
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框架—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 小牛之路]12 - Section、Partial View 和 Child Action
     
  
 
  概括的講，View中的內容可以分為靜態和動態兩部分。靜態內容一般是html元素，而動態內容指的是在應用程式執行的時候動態建立的內容。給View新增動態內容的方式可歸納為下面幾種： 
 
  Inline code，小的程式碼片段，如 if 和 foreach 語句。
  Html hel 

  
 

    

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

  
 

    

    
    
【無私分享：從入門到精通ASP.NET MVC】從0開始，一起搭框架、做專案 （16）原始碼分享二：登入功能以及UI、資料庫、倉儲原始碼分享
     
 
  1 using Common;
  2 using Service.IService;
  3 using System;
  4 using System.Collections.Generic;
  5 using System.Linq;
  6 using System.Web;
 

  
 

    

    
    
【無私分享：從入門到精通ASP.NET MVC】從0開始，一起搭框架、做專案（1）搭建MVC環境 註冊區域
     
 索引

簡述
從今天開始，我們從0開始搭建一個框架，並且完成一個任務管理系統的專案。這並不是什麼大專案，只是對於不熟悉MVC以及不熟悉面向介面開發和依賴注入的朋友們有所啟發，因為是從0開始，所以有些地方比較囉嗦，希望大家理解！
希望新手朋友們拋棄“拿來主義”，動手跟著一步一步的做，當做完這個框架和專案