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

Question

我想从两个JQuery日历中获取日期范围内的项目范围，然后在按下提交按钮时更新视图，以便我只看到所选日期之间的项目。我不确定我是否会以最好的方式开展工作。

我的计划是：

1. 获取用户选择在日历的日期。

2. 使用Javascript将日期作为变量返回。

3. 将变量发送到控制器，然后返回一个新的视图。

我的代码是下面和我的问题真的是两个部分。

1. 有没有更好的方法来做到这一点？

2. 如果这是好的，我怎样才能获得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。当我点击它时，它只是将磅符号添加到家庭/索引网址，并在浏览器开发者工具中显示非法字符。

<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

感谢@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> 

Answer 2

试试这个

<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>