Изменение значения в Razor html с помощью кнопки и JS

Question

Вот (не полный, потому что слишком много кода) Вид моего календаря

@using DayPilot.Web.Mvc;
@using DayPilot.Web.Mvc.Events.Calendar;

@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

<div>
        @Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
        {
            BackendUrl = Url.Action("Backend", "Calendar"),
            ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
        })
    </div>

<button id="Day">Day</button>
<button id="Week">Week</button>
<button id="Month">Month</button>

Как я могу изменить значение, например ViewType, используя нажатие кнопки и JavaScript?

Answer 1

У меня нет опыта работы с DayPilot, но, судя по их API, использующему javascript (wo/ jquery), вы бы написали что-то вроде этого:

(function()
{
    var dpc = new DayPilot.Calendar("dp");
    dpc.startDate = "2013-03-25";
    dpc.viewType = "Week";
    dpc.update();
    var updateCalendar = function(viewType)
    {
        dpc.viewType = viewType;
        dpc.update();
    };

    document.getElementById('Day').addEventListener('click', function(e)
    {
        updateCalendar('Day');
    });
    document.getElementById('Week').addEventListener('click', function(e)
    {
        updateCalendar('Week');
    });
    document.getElementById('Month').addEventListener('click', function(e)
    {
        updateCalendar('Month');
    });
})();

Используя jQuery, это выглядело бы примерно так:

(function($)
{
    var dpc = new DayPilot.Calendar("dp");
    dpc.startDate = "2013-03-25";
    dpc.viewType = "Week";
    dpc.update();

    $(document).on('click', '#Day, #Week, #Month', function(e)
    {    
        dpc.viewType = $(e.target).attr('id'); //realistically, this should probably be a data-attribute or what not
        dpc.update();
    });
})(jQuery);

Вы по-прежнему сохраняете свой код Razor, и вы просто сможете добавить эти вызовы JS или что-то подобное. Получить объект DayPilotCalendar, вероятно, сложнее, и не совсем понятно, как это сделать. Дайте мне знать, если это поможет.