我们正在使用一个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;
}
我会将datapicker包装在一个局部视图中,该视图可以使用razor将会话值读取到视图的JS中。你甚至可以将它与自己的控制器隔离。
视图/共享/_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;
}