剣道UI DatePicker JavascriptとHttpContext.Session C＃、MVC

Question

剣道UIの日付ピッカー（Javascript版）を使用しています。ここでは、KendoUIのdatePickerから渡された日付を持つHttpContext.Session変数を設定して渡します私たちのコントローラには、セッションがコントローラに設定されています。

KendoUI DatePickerは、複数のテンプレートの複数のページで使用されます。 私の目標は、変数が設定されていれば、Sessionで選択して設定した日付をKendoUI DatePickerに戻すことです。選択した日付が設定されていない場合は、日付ピッカーの値をtodayまたはnew Date（）に設定する必要があります。

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

私のコントローラの方法：

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

Answer 1

私はかみそりでビューのJSにセッション値を読み出すことができる部分図でdatapickerを包むでしょう。それを独自のコントローラに分離することさえできます。

閲覧/共有/ _DatePickPartial.cshtml

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

SomeController _DatePickPartial

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