MVCでは、Javascriptカレンダーの日付の範囲を使用してEntityデータベース内のアイテムを返す方法

Question

2つのJQueryカレンダーから日付の間にあるアイテムの範囲を取得し、送信ボタンを押したときにビューを更新したい私は選択された日付の間にのみ項目を表示します。私は物事について最善の方法を取っているかどうかはわかりません。

私の計画にした

1. は、カレンダーの日付を選択するようにユーザーを取得します。

2. JavaScriptを使用して日付を変数として返します。

3. 変数をコントローラに送信し、コントローラに新しいビューを返します。

私のコードは私の質問は2つの部分に実際にある以下であると。

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をします。私がクリックすると、ポンド記号がホーム/インデックス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

感謝を試してみてください、私は最終的にこれを取得することができました作業。私はここに機能コードを掲載しています。

コントローラ

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

@StephenMueckeと@Tanmayのヘルプにこの

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