Как бы я вернул даты через JSON в указанном формате?

Question

Если вы зайдете в свой профиль SO и нажмете на «посещенные дни», вы увидите удобный инструмент выбора даты jQuery, в котором дни, которые вы посещали, были затенены ярким зеленым. Я пробую свои силы в чем-то похожем, и начал с того, что выбрал реализацию SO. Я застрял в выяснении, как они смогли отформатировать и вернуть даты посещения в определенном формате JSON, который они использовали. Вот моя копия (вы можете найти похожие, проверив источник этой страницы):

var посетил = {2009: {5: {28: 1,29: 1}, 6: {3: 1,4: 1,5: 1,7: 1,8: 1,9: 1,10 : 1,11: 1,12: 1,13: 1,14: 1,15: 1,16: 1,17: 1,19: 1,20: 1,21: 1,22: 1,23: 1 , 24: 1,25: 1,27: 1,29: 1,30: 1}, 7: {1: 1,2: 1,3: 1,4: 1,5: 1,6: 1,7 : 1,8: 1,9: 1,10: 1,11: 1,12: 1,13: 1,14: 1,15: 1,16: 1,18: 1,20: 1,21: 1 , 22: 1,23: 1,24: 1,26: 1,27: 1,28: 1,29: 1,30: 1,31: 1}, 8: {2: 1,3: 1,4 : 1,5: 1,6: 1,7: 1,11: 1,12: 1,13: 1,17: 1,20: 1,24: 1,25: 1,27: 1,28: 1 }, 9: {9: 1,10: 1,15: 1,23: 1,24: 1}, 10: {1: 1,5: 1,7: 1,8: 1,9: 1,12 : 1,13: 1,20: 1,21: 1,22: 1,27: 1,28: 1,30: 1}, 11: {5: 1,9: 1,10: 1,16: 1 , 17: 1,24: 1,25: 1,26: 1,30: 1}, 12: {2: 1,7: 1,8: 1,9: 1,11: 1,12: 1,13 : 1,14: 1,15: 1,16: 1,17: 1,18: 1,21: 1,22: 1,23: 1,28: 1,30: 1}} 2010 {1: {5: 1,8: 1,11: 1,12: 1,13: 1,14: 1,15: 1,18: 1,19: 1,20: 1,21: 1,26: 1,27 : 1,28: 1}, 2: {3: 1,10: 1,17: 1,22: 1,23: 1,26: 1}, 3: {1: 1,2: 1,3: 1 , 5: 1,8: 1}, 4: {8: 1,9: 1,13: 1,19: 1,20: 1,21: 1,22: 1,26: 1,28: 1,29 : 1}, 5: {3: 1,4: 1,5: 1,6: 1,7: 1,11: 1,12: 1,17: 1,28: 1}, 6: {2: 1 , 4: 1,7: 1,8: 1,9: 1,10: 1,14: 1,15: 1,16: 1,17: 1,18: 1,21: 1,23: 1,25 : 1}, 7: {7: 1,8: 1,9: 1,12: 1,21: 1,22: 1,23: 1,28: 1,29: 1}, 8: {2: 1 , 3: 1,4: 1,5: 1,9: 1,10: 1,11: 1,16: 1,17: 1,18: 1,19: 1,20: 1,2 5: 1,26: 1,29: 1,30: 1,31: 1}, 9: {1: 1,8: 1}, 10: {6: 1,11: 1,15: 1,21: 1,26: 1,27: 1,28: 1}, 11: {3: 1,4: 1,8: 1,11: 1,15: 1,16: 1,17: 1,19: 1, 20: 1,21: 1,23: 1,30: 1}, 12: {1: 1,2: 1,13: 1,14: 1,15: 1,16: 1,17: 1,20: 1,22: 1,23: 1,28: 1}}, 2011: {1: {3: 1,5: 1,6: 1,7: 1,12: 1,14: 1,18: 1, 20: 1,21: 1,25: 1,26: 1,27: 1,28: 1,31: 1}, 2: {1: 1,2: 1,3: 1,6: 1,7: 1,8: 1,9: 1,10: 1,11: 1}}};

Это в основном массив: [год] [месяц] [день]. Я не могу отправить данные в этом формате, и мне было интересно, если кто-нибудь (возможно, один из членов SO) имел какое-либо понимание.

Надеюсь, никто не думает, что я так обманываю этим вопросом. Мне действительно любопытно, как они это сделали.

РЕДАКТИРОВАТЬ: Чтобы уточнить, я спрашиваю, на что похоже действие контроллера , если бы у меня был захват объектов .NET DateTime и я хотел вернуть JSON в указанном формате.

Мой метод проверки контроллера выглядит следующим образом:

[HttpPost]
public JsonResult GetDates(int id)
{
    var model = BaseRepository.FindById(id);
    testDates = new DateTime[] { DateTime.Today, DateTime.Today.AddDays(1) };
    return Json(testDates);
}

И когда я звоню через AJAX с:

$.ajax({
    type: 'POST',
    url: '<%= Url.Action("ClosedDates", "Venue", new { id = Model.Id }) %>',
    dataType: 'json',
    success: function (data) { alert(data); }
});

В предупреждении отображается ожидаемый список дат, но в формате даты .NET. Я не уверен, должен ли я массировать данные в контроллере или в обратном вызове на клиенте.

РЕДАКТИРОВАТЬ 2

Хорошо, возможно, использование этого массива поможет лучше понять это. Опять же, отказ от реализации SO (обратите внимание, как функция beforeShowDay анализирует массив для текущей текущей даты):

var visited = { 2009: { 5: { 28: 1, 29: 1 }, 6: { 3: 1, 4: 1, 5: 1, 7: 1, 8: 1, 9: 1, 10: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 1, 16: 1, 17: 1, 19: 1, 20: 1, 21: 1, 22: 1, 23: 1, 24: 1, 25: 1, 27: 1, 29: 1, 30: 1 }, 7: { 1: 1, 2: 1, 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 8: 1, 9: 1, 10: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 1, 16: 1, 18: 1, 20: 1, 21: 1, 22: 1, 23: 1, 24: 1, 26: 1, 27: 1, 28: 1, 29: 1, 30: 1, 31: 1 }, 8: { 2: 1, 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 11: 1, 12: 1, 13: 1, 17: 1, 20: 1, 24: 1, 25: 1, 27: 1, 28: 1 }, 9: { 9: 1, 10: 1, 15: 1, 23: 1, 24: 1 }, 10: { 1: 1, 5: 1, 7: 1, 8: 1, 9: 1, 12: 1, 13: 1, 20: 1, 21: 1, 22: 1, 27: 1, 28: 1, 30: 1 }, 11: { 5: 1, 9: 1, 10: 1, 16: 1, 17: 1, 24: 1, 25: 1, 26: 1, 30: 1 }, 12: { 2: 1, 7: 1, 8: 1, 9: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 1, 16: 1, 17: 1, 18: 1, 21: 1, 22: 1, 23: 1, 28: 1, 30: 1} }, 2010: { 1: { 5: 1, 8: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 1, 18: 1, 19: 1, 20: 1, 21: 1, 26: 1, 27: 1, 28: 1 }, 2: { 3: 1, 10: 1, 17: 1, 22: 1, 23: 1, 26: 1 }, 3: { 1: 1, 2: 1, 3: 1, 5: 1, 8: 1 }, 4: { 8: 1, 9: 1, 13: 1, 19: 1, 20: 1, 21: 1, 22: 1, 26: 1, 28: 1, 29: 1 }, 5: { 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 11: 1, 12: 1, 17: 1, 28: 1 }, 6: { 2: 1, 4: 1, 7: 1, 8: 1, 9: 1, 10: 1, 14: 1, 15: 1, 16: 1, 17: 1, 18: 1, 21: 1, 23: 1, 25: 1 }, 7: { 7: 1, 8: 1, 9: 1, 12: 1, 21: 1, 22: 1, 23: 1, 28: 1, 29: 1 }, 8: { 2: 1, 3: 1, 4: 1, 5: 1, 9: 1, 10: 1, 11: 1, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1, 25: 1, 26: 1, 29: 1, 30: 1, 31: 1 }, 9: { 1: 1, 8: 1 }, 10: { 6: 1, 11: 1, 15: 1, 21: 1, 26: 1, 27: 1, 28: 1 }, 11: { 3: 1, 4: 1, 8: 1, 11: 1, 15: 1, 16: 1, 17: 1, 19: 1, 20: 1, 21: 1, 23: 1, 30: 1 }, 12: { 1: 1, 2: 1, 13: 1, 14: 1, 15: 1, 16: 1, 17: 1, 20: 1, 22: 1, 23: 1, 28: 1} }, 2011: { 1: { 3: 1, 5: 1, 6: 1, 7: 1, 12: 1, 14: 1, 18: 1, 20: 1, 21: 1, 25: 1, 26: 1, 27: 1, 28: 1, 31: 1 }, 2: { 1: 1, 2: 1, 3: 1, 6: 1, 7: 1, 8: 1, 9: 1, 10: 1, 11: 1}} };
        $('#calendar').datepicker({
            beforeShowDay: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                var hasVisited = visited[y] && visited[y][m] && visited[y][m][d];
                return [false, (hasVisited ? 'ui-state-active' : ''), (y + '-' + m + '-' + d)];
            }
        });

Answer 1

Я бы создал модель, чтобы удовлетворить этот вызов. У вас будет немного больше обработки на стороне клиента, но это будет больше ОО, и вы можете использовать точечные нотации JS для доступа к каждому уровню объекта.

Ajax Call (я использую Razor, но вы хотите передать ID в качестве элемента данных):

 $.ajax({
    type: 'POST',
    url: '@Url.Action("ClosedDates", "Venue")',
    data: {id: 1},
    dataType: 'json',
    success: function (data) { console.log({data: data});  }
});

Модель:

 public class DateListModel
{
    public int Month { get; set; }
    public List<string> Days { get; set; }
}

   public class DateModel
{
    public int Year { get; set; }
    public List<DateListModel> DateList { get; set; }
}

Контроллер (с данными испытаний):

[HttpPost]
public JsonResult ClosedDates(int id)
{
       var dateList2009 = new List<DateListModel> { 
            new DateListModel{Month =5, Days = new List<string>{"28", "29"}},
            new DateListModel{Month = 6, Days = new List<string>{"3", "49", "5"}},
        };
        var dateList2010 = new List<DateListModel>{
            new DateListModel{Month = new DateTime(2010,1,1).Month, Days = new List<string>{"5", "8", "11"}},
            new DateListModel{Month = new DateTime(2010,2,1).Month, Days = new List<string>{"3", "10", "11"}},
        };

        var data = new List<DateModel>{
            new DateModel{ Year = 2009, DateList = dateList2009},
            new DateModel{ Year = 2010, DateList = dateList2010}
        };
        return Json(data);
    }

Answer 2

Итак, я использовал метод eval, указанный @alexl, и придумал следующее (я был бы готов к улучшению, так как это выглядит довольно грязно):

$(document).ready(function () {
$.ajax({
    type: 'POST',
    url: 'myurl',
    data: {id: 1},
    dataType: 'json',
    success: function (data) {
        var dates = new Array();
        // eval each of the dates coming from the server
        for(var i = 0; i < data.length; i++) {
            dates[i] = eval('new' + data[i].replace(/\//g, ' '));
        }
        $('#calendar').datepicker({
            beforeShowDay: function (date) {
                var isBooked = false;
                // look for the current datepicker date in the array
                for(var i = 0; i < dates.length; i++) {
                    if (dates[i].valueOf() == date.valueOf())
                    {
                        isBooked = true;
                        break;
                    }
                }
                return [false, (isBooked ? 'ui-state-active' : ''), (date.valueOf)];
            }
        });   
    }
});

});

Answer 3

По моему опыту, если вам не нужно обрабатывать даты на клиенте, такие как тип данных Date, тогда проще отправить его клиенту в виде строки.

Итак - преобразуйте ваш массив дат как DateTime в массив дат в виде строки в нужном вам формате и отправьте их клиенту как json.

Answer 4

Когда вы отправляете Datetime в формате JSON, он анализируется в следующем формате:

\/Date(1297250340000)\/

Вы можете проанализировать дату и время в javascript с помощью этого кода:

var date = eval('new' + oData.replace(/\//g, ' '));

Где oData - ваша дата, возвращаемая вашим контроллером в формате JSON.

Надеюсь, это поможет