Stormseye Stormseye - 11 months ago 60
Javascript Question

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

Thanks to the generous help in the comments below, I was able to get this to work. The code in this post below is updated to show the working code. Hope it helps someone else avoid some of the frustrations I had.

I'm really new to MVC and am trying learn by working through a personal project but I've hit a bump. In part of this project, I want to get a range of items between dates from two JQuery calendars and then update the view when I press a submit button so that I only see the items between the selected dates. After researching a bit, I'm not sure I'm going about things the best way.

My plan was to:

  1. Get the user to select the dates in the calendars.

  2. Use Javascript to return the dates as variables.

  3. Send the variables to a controller which would then return a new view.

My code is below. I know it's pretty rough right now, but I wanted to consult with the experts before continuing. I've been fighting with it a lot and reading things that suggest maybe there are better alternatives, but in my novice state, I'm not sure.

SO, my question is really in two parts.

  1. Is there a better way to do this?

  2. If this is ok, how can I get the javascript variables into the ActionLink to pass back to the controller?

Thanks in advance!


// 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 in the Index:

<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();



Screen Grab:

Screenshot of the setup

Answer Source

Try this

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