在 MVC 中，如何使用 Javascript 日历中的日期范围 return 和实体数据库中的项目

Question

我想从两个 JQuery 日历中获取日期之间的项目范围，然后在我按下提交按钮时更新视图，以便我只看到 selected 日期之间的项目.我不确定我会以最好的方式处理事情。

我的计划是：

让用户select 日历中的日期。
使用 Javascript 到 return 日期作为变量。
将变量发送到控制器，然后控制器将 return 一个新视图。

我的代码在下面，我的问题实际上分为两部分。

有更好的方法吗？
如果没问题，我怎样才能将 javascript 变量放入 ActionLink 以传递回控制器？

提前致谢！

控制器：

        // GET: Home
    public ActionResult IndexDateRange(string sortOrder, DateTime startDateFromJS, DateTime endDateFromJS)
    {
        var sortedByDates = from pay in db.DailyPayments
                            select pay;
        sortedByDates = sortedByDates.OrderByDescending(pay => pay.Date);
        var first = sortedByDates.Select(pay => pay.Date).First();
        var lastDate = sortedByDates.Select(pay => pay.Date).Last();


        if (startDateFromJS > first.Date || (endDateFromJS < lastDate))
        {

            var dateRange = sortedByDates.Where(pay => pay.Date >= startDateFromJS && pay.Date <= endDateFromJS);
            return View(dateRange.ToList());
        }

        return View(sortedByDates.ToList());

    }

Javascript 在索引中：

@Html.ActionLink("Get Dates", "IndexDateRange", routeValues: new { startDateFromJS = startDate, endDateFromJS = endDate }) 



<script>

    $(function () {
        var startDate = getStartDate();
        var endDate = getEndDate();

        function getStartDate() {

            $('#startDate').datepicker();
            $('#calendarSubmitButton').click(function () {
                //var startDate = $('#startDate').datepicker('getDate');
                var startDate = $('#startDate').datepicker('getDate');
                console.log(startDate);
                return startDate;
            })      

        };
        function getEndDate() {
            $('#endDate').datepicker();
            $('#calendarSubmitButton').click(function () {
                var endDate = $('#endDate').datepicker('getDate');
                console.log(endDate);
                return endDate;

            })               

        };

临时测试 JS 以尝试连接 href。当我点击它时，它只是将井号添加到 home/index Url 并且在浏览器开发人员工具中显示非法字符。

<a href="#" id="calendarSubmitButton">Get Dates</a>

<script type="text/javascript">

        $('#calendarSubmitButton').click(function() {
            var tempStartDate = @DateTime.Now.AddMonths(-1).ToString("yyyyMMdd");
            var tempEndDate = @DateTime.Now.ToString("yyyyMMdd");

            location.href='@Url.Action("IndexDateRange")+'?startDateFrom‌JS='+$('tempStartDate')+'&endDateFromJS='+$('tempEndDate')';

        });
</script>

屏幕抓取：

Screenshot of the setup

Answer 1

试试这个

<a href="#" id="calendarSubmitButton">Get Dates</a>

<script type="text/javascript">

        $('#calendarSubmitButton').click(function() {
               var tempStartDate = '@DateTime.Now.AddMonths(-1).ToString("yyyyMMdd")';
               var tempEndDate = '@DateTime.Now.ToString("yyyyMMdd")';

             location.href='@Url.Action("IndexDateRange")?startDateFrom‌JS='+tempStartDate +'&endDateFromJS='+tempEndDate;

        });
</script>

Answer 2

感谢@StephenMuecke 和@Tanmay 的帮助，我终于能够让它发挥作用。我在这里发布功能代码。

控制器

// GET: Home
public ActionResult Index(string sortOrder, string startDate, string endDateFromJS)
{
    var sortedByDates = from pay in db.DailyPayments
            select pay;
    sortedByDates = sortedByDates.OrderByDescending(pay => pay.Date);

    if (startDate != null && endDateFromJS != null)
    {
        DateTime convertedStartDateFromJS = DateTime.ParseExact(startDate, "yyyyMMdd", new CultureInfo("en-US"));
        DateTime convertedEndDateFromJS = DateTime.ParseExact(endDateFromJS, "yyyyMMdd", new CultureInfo("en-US"));
        var dateRange = sortedByDates.Where(pay => pay.Date >= convertedStartDateFromJS && pay.Date <= convertedEndDateFromJS);

        return View(dateRange.ToList());
    }


    return View(sortedByDates.ToList());

}

Javascript 和 HTML 在 index.cshtml

<div class="form-group">
    @Html.Label("Total payment:", new { id = "totalTextbox" }) <br />
    @Html.TextBox("Total", Math.Floor(totalPayment) + " yen" , new { @class = "alert alert-danger", @readonly = "readonly" })

</div>

<div class="form-group">
    @Html.Label("Starting Date:")
    @Html.TextBox("Starting Date:", "", new { @class = "date-picker", id = "startDate" })

    @Html.Label("Ending Date:")
    @Html.TextBox("Ending Date:", "", new { @class = "date-picker", id = "endDate" })


    @*<input type="submit" href="#" id="calendarSubmitButton" class="btn btn-primary"  />*@
    <a href="#" id="calendarSubmitButton">Get Dates</a>

    <script type="text/javascript">
        $(document).ready(function () {


            $('#calendarSubmitButton').click(function () {
                //TODO: Figure this out.
                var tempStartDate = $("#startDate").val($.datepicker.formatDate('yymmdd', new Date($('#startDate').datepicker('getDate'))));
                var tempEndDate = $("#endDate").val($.datepicker.formatDate('yymmdd', new Date($('#startDate').datepicker('getDate'))));


                location.href = '@Url.Action("Index")?startDate=' + tempStartDate.val() + '&endDateFromJS=' + tempEndDate.val();

            })
        });

    </script>

</div>

在 MVC 中，如何使用 Javascript 日历中的日期范围 return 和实体数据库中的项目

In MVC, how do I return items in and Entity database using a range of dates from Javascript Calendar

javascript

asp.net-mvc

jquery

calendar

date-range