在Razor html中使用button和JS改变一个值

Changing a value in Razor html using button and JS

本文关键字：改变 一个 JS html Razor button      更新时间：2023-09-26

这是我的日历视图(不完整，因为代码太多)

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

我没有DayPilot的经验，但从他们的API来看，使用javascript(不/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对象可能是比较困难的部分，而且不太清楚如何做到这一点。如果有帮助，请告诉我。

相关文章：