How index grid load record by current month and page by month with button

See more:

MVC

Good Day

I am trying to get my index Dev express grid view to load records based on the current month I am in.
As well as have a "Next" and "Previous " button for the month navigation.
I would like to load the respective months record when pressing the relevant button.

I am desperately seeking the solution but no luck yet, please help.

Regards
MCD

What I have tried:

Controller

public ActionResult CostingRequestsIndex()
       {
           return View();
       }

[ValidateInput(false)]
        public ActionResult QuoteTrackerGrid(string dt,  GridHeaderFilterMode headerFilterMode = DefaultHeaderFilterMode)
        {
            ViewBag.HeaderFilterMode = headerFilterMode;

           
            if (dt == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
          
            var startOfMonth = DateTime.Parse(dt);
            var DaysInMonth = DateTime.DaysInMonth(startOfMonth.Year, startOfMonth.Month);
            var LastDayOfMonth = new DateTime(startOfMonth.Year, startOfMonth.Month, DaysInMonth);

            var firstDayLastMonth = startOfMonth.AddMonths(-1);


            var userid = User.Identity.GetUserId();
            var crequests = from costingrequests in db.viewCostingRequests
                            where costingrequests.AssignedDateTime >= startOfMonth && costingrequests.AssignedDateTime <= LastDayOfMonth
                            select costingrequests;

            return PartialView("_QuoteTrackerGrid", crequests.ToList());
        }

View

@model IEnumerable<TourAssist.Models.viewCostingRequest>
@using Microsoft.AspNet.Identity

@Html.DevExpress().GetStyleSheets(
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.CardView },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.SpellChecker },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.RichEdit },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.VerticalGrid },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.Spreadsheet },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.Report },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.GridView },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList },
                                        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
                                    )
@Html.DevExpress().GetScripts(
                                        new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
                                        new Script { ExtensionSuite = ExtensionSuite.CardView },
                                        new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
                                        new Script { ExtensionSuite = ExtensionSuite.SpellChecker },
                                        new Script { ExtensionSuite = ExtensionSuite.HtmlEditor },
                                        new Script { ExtensionSuite = ExtensionSuite.RichEdit },
                                        new Script { ExtensionSuite = ExtensionSuite.Editors },
                                        new Script { ExtensionSuite = ExtensionSuite.VerticalGrid },
                                        new Script { ExtensionSuite = ExtensionSuite.Spreadsheet },
                                        new Script { ExtensionSuite = ExtensionSuite.Scheduler },
                                        new Script { ExtensionSuite = ExtensionSuite.Chart },
                                        new Script { ExtensionSuite = ExtensionSuite.Report },
                                        new Script { ExtensionSuite = ExtensionSuite.GridView },
                                        new Script { ExtensionSuite = ExtensionSuite.TreeList },
                                        new Script { ExtensionSuite = ExtensionSuite.Dashboard }
                                    )

@Styles.Render("~/Content/DevExtremeBundle")
@Scripts.Render("~/bundles/jquery")
@{
    Layout = "~/Views/Shared/_Layout.cshtml";

}

@{
    var submitsuccess = Request.QueryString["ac"];
    //Check parameter here and display Message
    if (submitsuccess == "submitsuccess")
    {
        <div class="alert alert-success" dismiss-on-timeout="2000">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            class="fa fa-exclamation-triangle"> Record Added Successfully.
        </div>
    }

    {
        var deletesuccess = Request.QueryString["ac"];
        //Check parameter here and display Message
        if (deletesuccess == "deletesuccess")
        {
            <div class="alert alert-success" dismiss-on-timeout="2000">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                class="fa fa-exclamation-triangle"> Record Deleted Successfully.
            </div>
        }
    }
    {
        var editsuccess = Request.QueryString["ac"];
        //Check parameter here and display Message
        if (editsuccess == "editsuccess")
        {
            <div class="alert alert-success" dismiss-on-timeout="2000">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                class="fa fa-exclamation-triangle"> Record Edited Successfully.
            </div>
        }
    }

}

<h2>Quote Tracker Overview</h2>

<input type="button" id="next" value="Click Me" />
<script type="text/javascript">


    $('#next').click(function () {
        var firstDayOfNextMonth = new Date(y, m + 1, 1);
        var lastDayOfNextMonth = moment(firstDayOfNextMonth).add(increment += 1, 'months').format('YY-MM-DD');
        window.location.href = "CostingRequests/CostingRequestsIndex?dt=2015-02-01";
    });

    $('#pre').click(function () {
        var firstDayOfPreviousMonth = new Date(y, m - 1, 1);
        var lastDayOfPreviousMonth = moment(firstDayOfPreviousMonth).add(decrement -= 1, 'months').format('YY-MM-DD');
        alert(lastDayOfPreviousMonth);
    });
</script>


<script type="text/javascript">
    function CustomButtonClick(s, e, url, url1, url2, url3) {
        var key = s.GetRowKey(e.visibleIndex);
        //console.log("Key Value is " + key);
        //console.log("Url values is" + url);
        var destUrl = null;
        if (e.buttonID === "btnEdit") {
            destUrl = url + "/" + key;
            window.location.href = destUrl;
        }
        else if (e.buttonID === "btnDetail") {
            destUrl = url1 + "/" + key;
            window.location.href = destUrl;
        }

        else if (e.buttonID === "btnRequote") {
            destUrl = url2 + "?crid=" + key;
            window.location.href = destUrl;
        }
        else if (e.buttonID === "btnDelete") {
            destUrl = url3 + "/" + key;
            window.location.href = destUrl;
        }
    }
</script>


@Html.Action("QuoteTrackerGrid")