使用按钮和 JS 更改 Razor html 中的值答案

【问题标题】：Changing a value in Razor html using button and JS使用按钮和 JS 更改 Razor html 中的值
【发布时间】：2017-03-29 11:22:01
【问题描述】：

这是一个（不完整，因为代码太多）我的日历视图

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

如何使用按钮单击和 JavaScript 更改值，例如 ViewType？

【问题讨论】：

daypilot.org/api/pro/latest/html/…
doc.daypilot.org/calendar/resources-view
我的意思是如何更改我创建的这个对象的任何值（它的 DayPilotCalendarConfig 属性）。我希望有能够通过单击它们来更改 ViewType 和 BackendUrl 的按钮。
好的，创建一个你想要做的原型，然后在这里发布代码。
已更新。我想将 ViewType 更改为 Day/Week/Month，具体取决于使用 JavaScript 单击了哪个按钮。

标签： javascript asp.net-mvc razor daypilot

【解决方案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 对象可能是更难的部分，而且还不太清楚如何做到这一点。让我知道这是否有帮助。

【讨论】：