ASP.NET MVC搭建項目後臺UI框架—五、Demo演示Controller和View的交互

時間 2019-11-13

標籤 asp.net asp mvc 搭建項目後臺框架 demo 演示 controller view 交互欄目 ASP 简体版

原文原文鏈接

Action

一、在咱們的MVC項目中的Models文件夾中，添加一個model類ChannelInfo.cs，由於項目中的ORM框架使用的是Nhibernate，因此屬性前面加了virtual jquery

   public class ChannelInfo
    {
       public virtual int ID { get; set; }

       public virtual string ChannelStyle { get; set; }

       public virtual string ChannelCode { get; set; }
       public virtual string CnName { get; set; }
       public virtual string EnName { get; set; }

       public virtual string Status { get; set; }
    }

二、添加控制器ChannelController，這裏爲了演示，我使用的假數據ajax

public class ChannelController : Controller
    {
        //
        // GET: /Channel/

        public ActionResult Index()
        {
            return View();
        }
        //添加渠道
        public ActionResult AddChannel()
        {
            return View();
        }

        [HttpPost]
        public JsonResult List(ChannelInfo filter)
        {
            List<ChannelInfo> list = new List<ChannelInfo>();
            for (int i = 0; i < 1100; i++)
            {
                list.Add(new ChannelInfo
            {
                ID = 1,
                ChannelCode = "E_Express"+i,
                ChannelStyle = "香港E特快"+i,
                CnName = "香港E特快"+i,
                EnName = "HK E-Express"+i,
                Status = "1"
            });
            }
            if (!string.IsNullOrEmpty(filter.ChannelCode))
            {
                list = list.Where(x => x.ChannelCode == filter.ChannelCode.Trim()).ToList();
            }
            if (!string.IsNullOrEmpty(filter.CnName))
            {
                list = list.Where(x => x.CnName == filter.CnName.Trim()).ToList();
            }
            if (!string.IsNullOrEmpty(filter.EnName))
            {
                list = list.Where(x => x.EnName == filter.EnName.Trim()).ToList();
            }

            //構形成Json的格式傳遞 iTotalRecords ：總記錄數 iTotalDisplayRecords ：每頁顯示的記錄數
            var result = new { iTotalRecords = 1100, iTotalDisplayRecords = 10, data = list };
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }

View Code

三、修改_Layout.cshtml，由於後面的View會用到api

<!DOCTYPE html>
<html lang="zh">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>財務管理 @ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
@*      @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")*@
        <link href="~/Content/sharestyle.css" rel="stylesheet" />
        <link href="~/Content/main.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.8.3.min.js"></script>
        <script src="~/Lib/lhgdialog/lhgdialog.min.js?self=true&skin=iblue"></script>
    </head>
    <body>
          @*  @RenderSection("featured", required: false)*@
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        @*<footer>
            <div class="copyright"> ©2015 </div>
           <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - 個人 ASP.NET MVC 應用程序</p>
                </div>
            </div>
        </footer>*@
@*        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)*@
    </body>
</html>

View Code

四、添加渠道管理的視圖Index，代碼很簡單，我都添加了詳細的註釋，相信你們都看得懂。這裏主要只添加了列表展現，和查詢過濾，分頁排序。datables是支持服務器端分頁排序的，可是我這裏只寫了客戶端排序，就是先一次性把全部的數據查出來，而後再進行分頁排序。在數據量小的狀況下，體驗仍是很是不錯的，也簡單。若是數據量大，就要啓用服務器分頁，即每次按需取數據，關於datables服務器分頁網上.NET的例子很是少，不過通過摸索，我已經實現了，只是此係列沒有寫出來。同時datables是支持緩存的，具體使用你們能夠參考我上面發的網址，我這裏只作個簡單的引薦。這裏很差意思忘了測試兼容性問題，後面提供的源代碼中Index視圖這裏兼容性有問題，對話框樣式衝突了，在源碼中請將數組

tbody{ height:50px;} 修改成 #table_local tbody{ height:50px;}緩存

@{
    ViewBag.Title = "Index";

}
<style type="text/css">
    html, body
    {
        overflow:hidden;
    }
    #table_local tbody
    {
         height:50px;
    }
    table
    {
          overflow-y:auto;
          overflow-x:hidden;
    }
</style>
<link href="~/Lib/DataTables-1.10.6/media/css/jquery.dataTablesNew.css" rel="stylesheet" />
<script src="~/Lib/DataTables-1.10.6/media/js/jquery.dataTables.min.js"></script>
<script src="~/Content/DataTablesExt.js"></script>
<script type="text/javascript">
    //查詢 刷新
    function reloadList() {
        var tables = $('#table_local').dataTable().api();//獲取DataTables的Api，詳見 http://www.datatables.net/reference/api/
        tables.ajax.reload();
    }
    function deleteRecord(id) {
        $.dialog.confirm("肯定要刪除嗎？", function () { $.dialog.alert("刪除成功！"); }, null)
    }
    function successFun() {
        $.dialog.alert("渠道添加成功！");
    }
    //彈出框  
    var dg;
    function showPublishWin() {
        dg = new $.dialog({
            id: "AddChannel",
            title: "添加渠道",
            content: "url:/Channel/AddChannel",
            width: 424,
            height: 320,
            max: false,
            min: false,
            lock: true,
            close: true,
            cancel: true, //X按鈕是否顯示，若是設置了回調函數，必定會顯示  
            //cancel: controlAllBtn,  
            ok: successFun //點擊肯定執行的回調函數
        });
        dg.show();
    }
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 27) { // 按 Esc 
            //要作的事情
        }
        if (e && e.keyCode == 13) { // enter 鍵
            //要作的事情
            reloadList();
        }
    };
</script>
<script type="text/javascript">
    $(function () {
        var h = $(document).height() - 258;
        $("#table_local").dataTable({
            //"iDisplayLength": 10,//每頁顯示10條數據
            //這裏也能夠設置分頁，可是不能設置具體內容，只能是一維或二維數組的方式，因此推薦下面language裏面的寫法。
            //"aLengthMenu": [[10, 15, 20, 25, 50, -1], [10, 15, 20, 25, 50, "All"]],
            bProcessing: true,
            //"dom": 'i,p',//l - Length changing  選擇每頁顯示行數下拉框的控件 f - Filtering input  搜索過濾控件t - The Tabletools    導出excel，csv的按鈕
            //i - Information  顯示彙總信息（從 1 到 100 /共 1,288 條數據） p - Pagination   分頁控件 r - pRocessing   顯示加載時的進度條 C - copy 顯示覆制，excel的控件
            //ajax: "/SendGoods/List",
            "scrollY": h,  //垂直滾動
            "scrollCollapse": "true", //開啓滾動
            "dom": 'tr<"bottom"lip><"clear">', //這個是控制佈局的，不是很好理解
            "bServerSide": false,                    //指定從服務器端獲取數據  
            sServerMethod: "POST", //請求方式
            sAjaxSource: "@Url.Action("List", "Channel")", //數據源
            "fnServerParams": function (aoData) {  //查詢條件
                aoData.push(
                    { "name": "ChannelCode", "value": $("#ChannelCode").val() },
                    { "name": "CnName", "value": $("#CnName").val() },
                    { "name": "EnName", "value": $("#EnName").val() }
                    );
            },
            columns: [
               {
                   title: "1",
                   "visible": false,
                   "data": "ID", "sClass": "center",    //樣式
                   orderable: false,    //該列不排序
                   "render": function (data, type, row) {    //列渲染
                       return "<label class='position-relative'><input id='cbx" + data + "' type='checkbox' onclick='controlSelectAll(" + data + ")' class='cbx' value='" + data + "'/>";
                   }
               },
               { "data": "ChannelCode", title: "渠道代碼" },
               { "data": "ChannelStyle", title: "渠道類別" },
               { "data": "CnName", title: "中文名" },
               { "data": "EnName", title: "英文名" },
               {
                   "data": "Status", title: "是否啓用", orderable: false, "render": function (data, type, row, meta) { //自定義列
                       if (data == "1") {
                           return "是";
                       }
                       else {
                           return "否";
                       }
                   }
               }
               , {
                   "data": "ID", orderable: false, title: "操做", "render": function (data, type, row, meta) { //自定義列
                       return "<a style='visibility:visible' onclick='deleteRecord(" + data + ")'>刪除</a>";
                   }
               }
            ],
            paging: true,//分頁
            ordering: true,//是否啓用排序
            searching: false,//搜索
            language: {
                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_filter input[type=search]").css({ width: "auto" });//右上角的默認搜索文本框，不寫這個就超出去了。
    });
</script>
    <div class="areabx clear" style="margin-bottom:0px;padding-bottom:0px;">
        @using (Html.BeginForm("List", null, FormMethod.Get, new { @clase = "form-inline", @role = "form" }))
        {
            <div class="areabx_header">渠道管理</div>
            <ul class="formod mgt10">
                <li><span>渠道代碼：</span>@Html.TextBox("ChannelCode","", new {@class="trade-time wid153" })</li>
                <li><span>渠道中文名：</span>@Html.TextBox("CnName", "",new {@class="trade-time" })</li>
                <li><span>渠道英文名：</span>@Html.TextBox("EnName", "",new {@class="trade-time" })</li>
            </ul>
            <div class="botbtbx pdb0">
                <input type="button" value="添加渠道" class="btn btn-primary" onclick="showPublishWin()"/>
                <input type="button" value="查詢" onclick="reloadList();" class="btn btn-primary">
            </div>
        }
        <div class="tob_box mgt15">
            <table id="table_local" class="display"  cellspacing="0" cellpadding="0" border="0" style="width:100%">
            </table>
        </div>
    </div>

View Code

五、添加視圖AddChannel，這裏沒寫完。原本還打算把修改也添加進去的，有興趣的朋友能夠本身去完成服務器

@{
    ViewBag.Title = "添加渠道";
}
<style type="text/css">
    body {
        overflow:hidden;
    }
</style>
<h2>添加渠道</h2>
<div>開發中...</div>

因爲要保持和美工給的樣式風格一直，我修改了dataTables的樣式源碼

六、按F5運行

框架中用到的js和css、Img：CssJsImg源碼

系列原本沒寫完，不打算寫了，我就先把這個半成品的源碼貼出來吧，省得小編又說我沒有足夠的知識分享了，雖然是半成品，可是基本的框框都有了。

插曲：本篇文章以前都無法在博客園首頁顯示的，小編給的回覆是：沒有足夠的知識分享。我心拔涼拔涼的。雖然字碼得很少，可是代碼中傾注了個人思想和經驗、時間和心血。精簡、通俗、易懂一直是我追求的。

開發環境：VS2012

有朋友評論說源碼裏少了dll，那兩個dll都是沒用到的，我如今已經將沒用的dll引用刪除，因此源碼下載地址更新了，給你們帶來的不便請諒解！

半成品UI框架源碼下載：http://pan.baidu.com/s/1c055sw4

若是源碼對你們頗有幫助，但願你們給個推薦，當是支持下我無償的技術分享，若是有更好的建議或不一樣的意見，能夠提出來，你們一塊兒探討。謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

ASP.NET MVC搭建項目後臺UI框架—五、Demo演示Controller和View的交互

目錄

Action