ASP.NET MVC5 網站開發實踐(二) Member區域 - 所有文章列表

時間  2019-11-30
標籤 asp.net asp mvc5 mvc 網站 開發 實踐 member 區域 所有 文章 列表 欄目 ASP 简体版
原文   原文鏈接

顯示文章列表分兩塊，管理員能夠顯示所有文章列表，通常用戶只顯示本身的文章列表。文章列表的顯示採用easyui-datagrid。後臺須要與之對應的action返回json類型數據javascript

 

目錄

ASP.NET MVC5 網站開發實踐 - 概述html

ASP.NET MVC5 網站開發實踐(一) - 項目框架java

ASP.NET MVC5 網站開發實踐(一) - 框架（續） 模型、數據存儲、業務邏輯web

ASP.NET MVC5 網站開發實踐(二) - 用戶部分（1）用戶註冊json

ASP.NET MVC5 網站開發實踐(二) - 用戶部分（2）用戶登陸、註銷架構

ASP.NET MVC5 網站開發實踐(二) - 用戶部分（3）修改資料、修改密碼框架

ASP.NET MVC5 網站開發實踐(二) Member區域 - 文章管理架構網站

ASP.NET MVC5 網站開發實踐(二) Member區域 - 添加文章ui

 

所有文章列表

效果圖url

image

用來顯示全部的文章 界面採用easyui-datagrid，能夠進行欄目，標題，錄入，發佈時間的查詢

一、在IBLL

在InterfaceCommonModelService接口中添加獲取公共模型列表的方法

首先排序方法

/// <summary>
        /// 排序
        /// </summary>
        /// <param name="entitys">數據實體集</param>
        /// <param name="roderCode">排序代碼[默認：ID降序]</param>
        /// <returns></returns>
        IQueryable<CommonModel> Order(IQueryable<CommonModel> entitys, int roderCode);

查詢數據方法

/// <summary>
        /// 查詢分頁數據列表
        /// </summary>
        /// <param name="totalRecord">總記錄數</param>
        /// <param name="model">模型【All所有】</param>
        /// <param name="pageIndex">頁碼</param>
        /// <param name="pageSize">每頁記錄數</param>
        /// <param name="title">標題【不使用設置空字符串】</param>
        /// <param name="categoryID">欄目ID【不使用設0】</param>
        /// <param name="inputer">用戶名【不使用設置空字符串】</param>
        /// <param name="fromDate">起始日期【可爲null】</param>
        /// <param name="toDate">截止日期【可爲null】</param>
        /// <param name="orderCode">排序碼</param>
        /// <returns>分頁數據列表</returns>
        IQueryable<CommonModel> FindPageList(out int totalRecord, int pageIndex, int pageSize, string model, string title, int categoryID, string inputer, Nullable<DateTime> fromDate, Nullable<DateTime> toDate, int orderCode);

二、BLL

在CommonModelService寫方法實現代碼，內容都很簡單主要是思路，直接上代碼

public IQueryable<CommonModel> FindPageList(out int totalRecord, int pageIndex, int pageSize, string model, string title, int categoryID, string inputer, Nullable<DateTime> fromDate, Nullable<DateTime> toDate, int orderCode)
        {
            //獲取實體列表
            IQueryable<CommonModel> _commonModels = CurrentRepository.Entities;
            if (model == null || model != "All") _commonModels = _commonModels.Where(cm => cm.Model == model);
            if (!string.IsNullOrEmpty(title)) _commonModels = _commonModels.Where(cm => cm.Title.Contains(title));
            if (categoryID > 0) _commonModels = _commonModels.Where(cm => cm.CategoryID == categoryID);
            if (!string.IsNullOrEmpty(inputer)) _commonModels = _commonModels.Where(cm => cm.Inputer == inputer);
            if (fromDate != null) _commonModels = _commonModels.Where(cm => cm.ReleaseDate >= fromDate);
            if (toDate != null) _commonModels = _commonModels.Where(cm => cm.ReleaseDate <= toDate);
            _commonModels = Order(_commonModels, orderCode);
            totalRecord = _commonModels.Count();
            return PageList(_commonModels, pageIndex, pageSize).AsQueryable();
        }

        public IQueryable<CommonModel> Order(IQueryable<CommonModel> entitys, int orderCode)
        {
            switch(orderCode)
            {
                //默認排序
                default:
                    entitys = entitys.OrderByDescending(cm => cm.ReleaseDate);
                    break;
            }
            return entitys;
        }

三、web

因爲CommonModel跟咱們前臺顯示的數據並不一致，爲了照顧datagrid中的數據顯示再在Ninesky.Web.Models中再構造一個視圖模型CommonModelViewModel

using System;

namespace Ninesky.Web.Models
{
    /// <summary>
    /// CommonModel視圖模型
    /// <remarks>
    /// 建立：2014.03.10
    /// </remarks>
    /// </summary>
    public class CommonModelViewModel
    {
        public int ModelID { get; set; }

        /// <summary>
        /// 欄目ID
        /// </summary>
        public int CategoryID { get; set; }

        /// <summary>
        /// 欄目名稱
        /// </summary>
        public string CategoryName { get; set; }

        /// <summary>
        /// 模型名稱
        /// </summary>
        public string Model { get; set; }

        /// <summary>
        /// 標題
        /// </summary>
        public string Title { get; set; }

        /// <summary>
        /// 錄入者
        /// </summary>
        public string Inputer { get; set; }

        /// <summary>
        /// 點擊
        /// </summary>
        public int Hits { get; set; }

        /// <summary>
        /// 發佈日期
        /// </summary>
        public DateTime ReleaseDate { get; set; }

        /// <summary>
        /// 狀態
        /// </summary>
        public int Status { get; set; }

        /// <summary>
        /// 狀態文字
        /// </summary>
        public string StatusString { get { return  Ninesky.Models.CommonModel.StatusList[Status]; } }

        /// <summary>
        /// 首頁圖片
        /// </summary>
        public string DefaultPicUrl { get; set; }
    }
}

在ArticleController中添加一個返回json類型的JsonList方法

/// <summary>
        /// 文章列表Json【注意權限問題，普通人員是否能夠訪問？】
        /// </summary>
        /// <param name="title">標題</param>
        /// <param name="input">錄入</param>
        /// <param name="category">欄目</param>
        /// <param name="fromDate">日期起</param>
        /// <param name="toDate">日期止</param>
        /// <param name="pageIndex">頁碼</param>
        /// <param name="pageSize">每頁記錄</param>
        /// <returns></returns>
        public ActionResult JsonList(string title, string input, Nullable<int> category, Nullable<DateTime> fromDate, Nullable<DateTime> toDate, int pageIndex = 1, int pageSize = 20)
        {
            if (category == null) category = 0;
            int _total;
            var _rows = commonModelService.FindPageList(out _total, pageIndex, pageSize, "Article", title, (int)category, input, fromDate, toDate, 0).Select(
                cm => new Ninesky.Web.Models.CommonModelViewModel() 
                { 
                    CategoryID = cm.CategoryID,
                    CategoryName = cm.Category.Name,
                    DefaultPicUrl = cm.DefaultPicUrl,
                    Hits = cm.Hits,
                    Inputer = cm.Inputer,
                    Model = cm.Model,
                    ModelID = cm.ModelID,
                    ReleaseDate = cm.ReleaseDate,
                    Status = cm.Status,
                    Title = cm.Title 
                });
            return Json(new { total = _total, rows = _rows.ToList() });
        }

下面是作界面了，在添加 List方法，這裏不提供任何數據，數據在JsonList 中得到

/// <summary>
        /// 所有文章
        /// </summary>
        /// <returns></returns>
        public ActionResult List()
        {
            return View();
        }

右鍵添加視圖

<div id="toolbar">
    <div>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" >修改</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" ">刪除</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="$('#article_list').datagrid('reload');">刷新</a>
    </div>
    <div class="form-inline">
        <label>欄目</label><input id="combo_category" data-options="url:'@Url.Action("JsonTree", "Category", new { model="Article" })'" class="easyui-combotree" />
        <label>標題</label> <input id="textbox_title" class="input-easyui" style="width:280px" />
        <label>錄入人</label><input id="textbox_inputer" class="input-easyui" />
        <label>添加日期</label>
        <input id="datebox_fromdate" type="datetime" class="easyui-datebox" style="width:120px" /> -
        <input id="datebox_todate" type="datetime" class="easyui-datebox" style="width:120px; " />
        <a href="#" id="btn_search" data-options="iconCls:'icon-search'" class="easyui-linkbutton">查詢</a>
    </div>

</div>
<table id="article_list"></table>
<script src="~/Scripts/Common.js"></script>
<script type="text/javascript">
    $("#article_list").datagrid({
        loadMsg: '加載中……',
        pagination:true,
        url: '@Url.Action("JsonList","Article")',
        columns: [[
            { field: 'ModelID', title: 'ID', checkbox: true },
            { field: 'CategoryName', title: '欄目'},
            { field: 'Title', title: '標題'},
            { field: 'Inputer', title: '錄入', align: 'right' },
            { field: 'Hits', title: '點擊', align: 'right' },
            { field: 'ReleaseDate', title: '發佈日期', align: 'right', formatter: function (value, row, index) { return jsonDateFormat(value); } },
            { field: 'StatusString', title: '狀態', width: 100, align: 'right' }
        ]],
        toolbar: '#toolbar',
        idField: 'ModelID',
    });
    //查找
    $("#btn_search").click(function () {
        $("#article_list").datagrid('load', {
            title: $("#textbox_title").val(),
            input: $("#textbox_inputer").val(),
            category: $("#combo_category").combotree('getValue'),
            fromDate: $("#datebox_fromdate").datebox('getValue'),
            toDate: $("#datebox_todate").datebox('getValue')
        });
    });

    }
</script>

上面都是easyui-datagrid的內容。

 

4、總結

整體思路是BLL中實現查詢公共模型列表，web中添加一個JsonList方法調用BLL中的方法並返回列表的Json類型。而後再添加一個List調用 JsonList用來顯示。下次作刪除和修改。

如今越寫越糾結，不知道怎麼表述好。

在修改、刪除後把會把代碼打包上傳。

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