Kendo UI DatePicker Javascript and HttpContext.Session C#, M

我们正在使用一个Kendo UI日期选择器(Javascript版本)，我想在其中填充一个HttpContext。Session变量有一个从我们的KendoUI日期选择器传递到我们的控制器的日期，Session在控制器中设置。

KendoUI DatePicker在多个模板中的多个页面上使用。我的目标是，如果设置了变量，则将在Session中选择和设置的日期传递回KendoUI DatePicker。如果所选日期没有设置，我希望日期选择器的值设置为今天或new date()。

My Javascript:

  <script>
   $(document).ready(function () {
    var SelectedDate = new Date();
 //Is this even correct?
    if('@HttpContext.Current.Session["CalendarSelectedDate"]' != '@DateTime.Now'){
        SelectedDate == '@HttpContext.Current.Session["CalendarSelectedDate"]';
        console.log("In if");
    }else{
        SelectedDate == new Date();
        console.log("In else");
    }
    console.log('Selected date: ' + SelectedDate);
   // WANT TO SET VALUE FROM SESSION DATE HERE!!!
    $("#datepicker").kendoDatePicker({
        value: SelectedDate,
        min: new Date(),
        format: "MM/dd/yyyy",
        change: function () {
            var value = this.value();
            console.log(value); //value is the selected date in the datepicker
            initialGetEventTypes();
        }
    });
    initialGetEventTypes();
});
  </script>
  //The AJAX call to the controller
  <script type="text/javascript">
function initialGetEventTypes() {
     @{ 
         var dateFromHub = DateTime.Now;
         var obj = HttpContext.Current.Session["CalendarSelectedDate"];
         if(obj != null)
         {
             dateFromHub = Convert.ToDateTime(obj);
         }
     }
    console.log('Session Selected Date: @dateFromHub.ToShortDateString()');
    $('#categoryLoading').show();
    var startDateTime = $("#datepicker").val();
    var endDateTime = startDateTime;
    var url = '@Url.Action("GetTotalEventTypeIdsByDate", "MuseumUniversalCalendar")';
        $.ajax({
            url: url,
            type: "GET",
            cache: false,
            dataType: "json",
            data: { startDateTime: startDateTime, endDateTime: endDateTime },
            success: function (data) {
                $('#categoryLoading').hide();
                $('.product-item').find('.categoryAvaiableCapacity').html("Not Available");
                var list = JSON.stringify(data);
                $("#eventTypeName").find('option').remove().end();
                $.each(data.result, function (i, eventTypes) {
                        $('.product-item').each(function () {
                            if ($(this).attr('data-galaxyeventnamefromnop') == eventTypes.EventName) {
                                $(this).find('.categoryAvaiableCapacity').html(eventTypes.Available + ' Available');
                           }
                        });
                    });
                if (data.result.length === 0)  {
     $("#noEvents").text('@T("museum.noeventavailablemessage")');
                }else{
                    // console.log("we are here")
                    $("#noEvents").text("");
                }
            },
            error: function(xhr, error, data) {
                console.log(xhr, error, data);
                $('#categoryLoading').hide();
                $("#eventTypeName").find('option').remove().end();
                alert("An error occurred getting the Event Types");
            }
        });
   }
</script>

My Controller方法:

  public class MuseumUniversalCalendarController : Controller
{
    //[NonAction]
     public JsonResult GetTotalEventTypeIdsByDate(MuseumUniversalCalendarModel model, DateTime startDateTime, DateTime endDateTime)
    {
        //Set selected Date for session
        HttpContext.Session["CalendarSelectedDate"] = startDateTime;
        var result = eventListOfEvents(model, startDateTime, endDateTime);
        return Json(new { result }, JsonRequestBehavior.AllowGet);
    }

    public List<cEvent> eventListOfEvents(MuseumUniversalCalendarModel model, DateTime startDateTime, DateTime endDateTime)
    {
        var eventTypeIdList = ExternalDataAccess.HubServiceCalls.GetAvailableEventsByEventDate(startDateTime, endDateTime);
        foreach(var eventTypeItem in eventTypeIdList)
        {
            model.AvailableGalaxyEventTypes.Add(new SelectListItem
            {
                Text = eventTypeItem.EventName,
                Value = eventTypeItem.EventTypeId.ToString()
            });
        }
        var fullOutEventlist = eventTypeIdList;
        var totalsList = eventTypeIdList.GroupBy(e => e.EventName.ToString()).Select(grp => grp.First()).ToList();
        totalsList.ForEach(x => x.Available = eventTypeIdList.Where(y => y.EventName == x.EventName).Select(z => z.Available).Sum());
        return totalsList;
    }

<div id='datepicker'></div>
<script>
    $("#datepicker").kendoDatePicker({
    value: '@HttpContext.Session["CalendarSelectedDate" ] ?? new Date()',
    min: new Date(),
    format: "MM/dd/yyyy",
    change: function () {
         //send ajax to partial action DatePickPartialUpdate which will add value to session
    }
});
</script>

public ActionResult _DatePickPartialUpdate(DateTime2 value)
{
    Session["CalendarSelectedDate"] = value;
}