在webgrid中分页不在asp.net mvc 5中工作

时间:2017-10-01 17:26:43

标签: c# asp.net-mvc razor paging webgrid

我有以下视图和控制器。问题是,当启用分页时,我点击下一页,之前的视图就不见了

@using System
@using System.Web.Helpers

@*@model List<DataTransferObjects.UserClaimHistory>*@

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/Content/style.css" rel="stylesheet" type="text/css" />
    @*<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>*@
    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <style>
        /*Here I will write some css for looks good*/
        th, td {
            padding: 5px;
        }

        th {
            background-color: gray;
        }
    </style>
</head>
@{
    ViewBag.Title = "ViewReports";
    var grid = new WebGrid(Model, canPage: false, rowsPerPage: 2, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent", canSort: false);
}
@{
    var fromDateVal  = (DateTime)ViewBag.fromDate;
    var toDateVal = (DateTime)ViewBag.toDate;
}
@using (Html.BeginForm("Index", "ViewReport", FormMethod.Post))
{

    <div class="container">
        @{
    var homeHeader = Html.Partial("_HomeHeader");
        }
        @homeHeader

        <div id="logout-div">
            @Html.ActionLink("Log Out", "Logout", "Home", null, null )
        </div>

        @{
    var homeLeftPanel = Html.Partial("_HomeLeftPanel");
        }
        @homeLeftPanel


        <div>
            From Date: @Html.TextBox("fromDate", string.Format("{0:yyyy-MM-dd}", fromDateVal), new { @id = "fromDate", @class = "datefield", type = "date" })
            To Date: @Html.TextBox("toDate", string.Format("{0:yyyy-MM-dd}", toDateVal), new { @id = "toDate", @class = "datefield", type = "date" })
            <input type="submit" value="Search" />
        </div>
        <div id="main" style="padding: 25px;">
            @grid.GetHtml(
            htmlAttributes: new { id = "MainGrid", width = "60%" },
            tableStyle: "table table-bordered table-responsive",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            columns: grid.Columns(
                grid.Column("UserName", "User Name"),
                grid.Column("Email", "Email"),
                grid.Column("Claim", "Accessed"),
                grid.Column(header: "AccessedOn", format: (item) => string.Format("{0:dd-MM-yyyy}", item.AccessedOn)),
                grid.Column(format: (item) =>
                {
                    if (item.Count > 1)
                    {
                        var subGrid = new WebGrid(source: item.List, canSort: false);
                        return subGrid.GetHtml(displayHeader: true,
                            htmlAttributes: new { id = "SubGrid", width = "100%" },
                            columns: subGrid.Columns(
                                subGrid.Column("UserName", "User Name"),
                                subGrid.Column("Email", "Email"),
                                subGrid.Column("Claim", "Accessed"),
                                subGrid.Column("AccessedOn", "AccessedOn")
                                )
                            );
                    }
                    else
                    {
                        return null;
                    }
                })
                )
            )
            <script>
                $(document).ready(function () {
                    var size = $("#main #MainGrid > thead > tr > th").size(); // get total column
                    $("#main #MainGrid > thead > tr > th").last().remove(); // remove last column
                    $("#main #MainGrid > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
                    $("#main #MainGrid > tbody > tr").each(function (i, el) {
                        $(this).prepend(
                            $("<td></td>")
                            .addClass("expand")
                            .addClass("hoverEff")
                            .attr('title', "click for show/hide")
                        );

                        //Now get sub table from last column and add this to the next new added row
                        var table = $("table", this).parent().html();
                        //
                        // alert(table);
                        //add new row with this subtable


                        // ADD CLICK EVENT FOR MAKE COLLAPSIBLE
                        if (table !== null) {
                            $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
                            $("table", this).parent().remove();
                            $(".hoverEff", this).live("click", function () {
                                $(this).parent().closest("tr").next().slideToggle(100);
                                $(this).toggleClass("expand collapse");
                            });
                        } else {
                            $(this).find('td:eq(0)').removeClass();

                        }
                    });

                    //by default make all subgrid in collapse mode
                    $("#main #MainGrid > tbody > tr td.expand").each(function (i, el) {
                        $(this).toggleClass("expand collapse");
                        $(this).parent().closest("tr").next().slideToggle(100);
                    });

                });

            </script>

        </div>
        @if (ViewBag.Count > 0)
        {
            <div>
               @Html.ActionLink("Export", "ExportToExcel", "ViewReport", new { fromDate = fromDateVal, toDate = toDateVal}, null)
            </div>
        }


        @{
    var homeFooter = Html.Partial("_HomeFooter");
        }
        @homeFooter


    </div>
}
</html>

这是控制器:

public ActionResult Index(DateTime? fromDate, DateTime? toDate)
{
    if (!fromDate.HasValue) 
        fromDate = DateTime.Now.Date;

    if (!toDate.HasValue) 
        toDate = fromDate.GetValueOrDefault(DateTime.Now.Date).Date.AddDays(1);

    if (toDate < fromDate) 
       toDate = fromDate.GetValueOrDefault(DateTime.Now.Date).Date.AddDays(1);

    ViewBag.fromDate = fromDate;
    ViewBag.toDate = toDate;

    var userClaims = DbAccessWebApiHandler.GetUserClaimAccesshistory(new DateSelection
            {
                StartDate = fromDate.Value,
                EndDate = toDate.Value
            });

    if (userClaims != null)
    {
        ViewBag.Count = userClaims.Count;
        var newList = userClaims.GroupBy(x => new { x.UserName, x.Email, x.Claim, x.AccessedOn.Date })                   
                    .Select(y => new UserClaimHistoryGroup
                    {
                        UserName = y.Key.UserName,
                        Email = y.Key.Email,
                        Claim = y.Key.Claim,
                        AccessedOn = y.Key.Date,
                        List = y.ToList(),
                        Count = y.ToList().Count
                    });

        return View(newList);
    }

    userClaims = new List<UserClaimHistory>();
    return View(userClaims);
}

[System.Web.Mvc.HttpGet]
public ActionResult ExportToExcel(DateTime? fromDate, DateTime? toDate)
{
    if (!fromDate.HasValue) 
        fromDate = DateTime.Now.Date;

    if (!toDate.HasValue) 
        toDate = fromDate.GetValueOrDefault(DateTime.Now.Date).Date.AddDays(1);

    if (toDate < fromDate) 
        toDate = fromDate.GetValueOrDefault(DateTime.Now.Date).Date.AddDays(1);

    ViewBag.fromDate = fromDate;
    ViewBag.toDate = toDate;

    var userClaims = DbAccessWebApiHandler.GetUserClaimAccesshistory(new DateSelection
            {
                StartDate = fromDate.Value,
                EndDate = toDate.Value
            });

    if (userClaims != null)
    {
        var gv = new GridView();
        gv.AutoGenerateColumns = false;

        gv.Columns.Add(new BoundField { HeaderText = "UserName", DataField = "UserName" });
        gv.Columns.Add(new BoundField { HeaderText = "Email", DataField = "Email" });
        gv.Columns.Add(new BoundField { HeaderText = "Accessed", DataField = "Claim" });
        gv.Columns.Add(new BoundField { HeaderText = "Date", DataField = "AccessedOn" });

        var dt = new DataTable();

        dt.Columns.Add("UserName");
        dt.Columns.Add("Email");
        dt.Columns.Add("Claim");
        dt.Columns.Add("AccessedOn");

        foreach (var item in userClaims)
        {
            dt.Rows.Add(item.UserName, item.Email, item.Claim, item.AccessedOn);
        }

        gv.DataSource = dt;
        gv.DataBind();

        for (var i = 0; i < userClaims.Count; i++)
        {
            gv.Rows[i].Height = 40;
        }

        Response.ClearContent();
        Response.Buffer = true;
        Response.AddHeader("content-disposition", "attachment; filename=Reports.xls");
        Response.ContentType = "application/ms-excel";
        Response.Charset = "";

        var sw = new StringWriter();
        var htw = new HtmlTextWriter(sw);

        gv.RenderControl(htw);

        Response.Output.Write(sw.ToString());
        Response.Flush();
        Response.End();
    }

    return View("Index");
}

1 个答案:

答案 0 :(得分:0)

能够通过以下脚本工作

var links = $('a[href*=page], a[href*=sort]'), form = $('form');
links.click(function () {
            form.attr("action", this.href);
            $(this).attr("href","javascript:");
            form.submit();
        });

How do I get my WebGrid to POST instead of GET during a sort or paging operation in my MVC4 site?

中所述