學用MVC4做網站五:5.5全部文章

“我的文章”只顯示自己發表文章，是一般用戶用的；“全部文章”顯示所有用戶的文章，這個是管理員用的。“全部文章”與“我的文章”看起來是一樣的，其實還是有一些不同。

1、控制器部分：

在action里面調用CommonModelRepository.List()時，“我的文章”傳了用戶名過去，而“全部文章”用戶名為null，比較一下：

cModelRsy.List(id, false, "Article", UserController.UserName, page, _pageSize, _cOrder);

cModelRsy.List(id, false, "Article", null, page, _pageSize, _cOrder);

2、視圖部分：

“我的文章”用的是普通分頁，在“全部文章”這里打算與昂Ajax分頁。

在“全部文章”中把“我的文章”中表格和分頁控件放到一個單獨的分部視圖里面，如果是普通請求返回整個頁面，如果是Ajax請求（用Request.IsAjaxRequest()方法判斷）則只返回分部視圖。

 

思路理清了，開始動手。

打開ArticleController，復制一份UserOwn(int id = 0, int page = 1)action的代碼並改名為UserAll(int id = 0, int page = 1)，將代碼中的cModelRsy.List(id, false, "Article", UserController.UserName, page, _pageSize, _cOrder) 改為cModelRsy.List(id, false, "Article", null, page, _pageSize, _cOrder)。

/// <summary>
        /// 全部文章
        /// </summary>
        /// <param name="id">欄目ID</param>
        /// <param name="page">頁碼</param>
        [UserAuthorize]
        public ActionResult UserAll(int id = 0, int page = 1)
        {
            int _pageSize = 20;
            int _cOrder = 0;
            Category _c = null;
            cModelRsy = new CommonModelRepository();
            PagerData<CommonModel> _aData;
            if (id > 0)
            {
                var _cRsy = new CategoryRepository();
                _c = _cRsy.Find(id);
                if (_c != null)
                {
                    _pageSize = (int)_c.PageSize;
                    _cOrder = (int)_c.ContentOrder;
                }
            }
            _aData = cModelRsy.List(id, false, "Article", null, page, _pageSize, _cOrder);
            if (_c != null)
            {
                _aData.Config.RecordName = _c.RecordName;
                _aData.Config.RecordUnit = _c.RecordUnit;
            }
            return View(_aData);
        }

復制一份UserOwn.cshtml視圖 並重命名為UserAll.cshtml。

打開該視圖，剪切掉<table …. </table>部分，刪除分頁htmlhelper，在views/article文件夾下新建名稱為“PartialUserList”的分部視圖。

將剛才剪切掉的<table …. </table>粘貼到這里，並在底部添加Ajax分頁的htmlhelper，完成后代碼如下：

@model PagerData<Ninesky.Models.CommonModel>
<table class="modelitems_table">
    <tr>
        <th>ID</th>
        <th>欄目</th>
        <th>標題</th>
        <th>發表者</th>
        <th>發布時間</th>
        <th>狀態</th>
        <th>點擊</th>
        <th colspan="2">操作</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.CommonModelId</td>
            <td>[@Html.ActionLink(item.Category.Name, "UserAll", new { id = item.CategoryId })]</td>
            <td class="title">@item.Title</td>
            <td>@item.Inputer</td>
            <td>@item.ReleaseDate</td>
            <td>@Ninesky.Models.CommonModel.ContentStatus.FirstOrDefault(c => c.Value == item.Status.ToString()).Text</td>
            <td>@item.Hits</td>
            <td>@Html.ActionLink("修改", "UserEdit", new { id = item.CommonModelId })</td>
            <td>@Html.ActionLink("刪除", "UserDelete", new { id = item.CommonModelId }, new { @class = "btnDel" })</td>
        </tr>
    }
</table>
@Html.PagerAjax("container", this.ViewContext.RouteData.Values, Model.Config, "pager", "pager")

注意這里在Ajax分頁傳遞的容器id為“container”。返回到UserAll.cshtml，在剛才剪切掉table的部分用@{Html.RenderPartial("PartialUserList", Model);}來呈現分部視圖。好了，再在頂部@model PagerData<Ninesky.Models.CommonModel>下面加上@if (Request.IsAjaxRequest()) { Html.RenderPartial("PartialUserList", Model); }else {……}，將底部所有代碼都擴到else{……}的括號里。

@model PagerData<Ninesky.Models.CommonModel>
@if (Request.IsAjaxRequest()) { Html.RenderPartial("PartialUserList", Model); }
else
{
    ViewBag.Title = "全部文章";
    Layout = "~/Views/Shared/_User.cshtml";


    <div class="workspace">
        <div class="inside">
            <div class="notebar">
                <img alt="" src="~/Content/Default/User/Images/Icon/Article_16.png" />您現在的位置： 全部文章
            </div>
            <div id="container">
                @{Html.RenderPartial("PartialUserList", Model);}
            </div>
        </div>
    </div>
    <div class="left">@Html.Partial("PartialUserNavMenus")<br />
    </div>
    <div class="clear"></div>
    <script type="text/javascript">
        $(".btnDel").click(function () {
            if (confirm("你確定要刪除該文章嗎？")) {
                var url = $(this).attr("href");
                $.post(url, null, function (data) {
                    if (data) {
                        alert("刪除成功!");
                        window.location.reload();
                    }
                    else {
                        alert("刪除失敗！");
                    }
                });
            }
            return false;
        });
    </script>
}

到此AJAX分頁方式的“全部文章”完畢！瀏覽器中看一下：

代碼見：學用MVC4做網站五:文章