Kendo UI DatePicker Javascript und HttpContext.Session C#, MVC

Question

Wir verwenden eine Kendo-UI-Datumsauswahl (Javascript-Version), in der ich mit einer HttpContext.Session Variable, die ein Datum von unserem KendoUI Datepicker übergeben und übergeben hat, füllen möchte zu unserem Controller wird Sitzung in der Steuerung eingestellt.

Der KendoUI DatePicker wird auf mehreren Seiten in mehreren Vorlagen verwendet. Mein Ziel ist es, das Datum ausgewählt und in Session gesetzt zu haben, das an den KendoUI DatePicker zurückgegeben wird, wenn die Variable gesetzt ist. Und wenn das ausgewählte Datum nicht festgelegt ist, möchte ich den Wert des Datumsauswahlers auf "Heute" oder "Neu"() setzen.

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

Mein Controller-Methode:

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

Ich würde das Datapicker in einer Teilansicht wickeln, die den Sitzungswert hinaus in die Ansicht des JS mit rasiermesser lesen kann. Sie könnten es sogar auf seinen eigenen Controller isolieren.

Ansichten/Shared/_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; 
}