单击日历时将数据加载到 PartialView (ASP.NET MVC)

Posted 2023-05-08

【中文标题】单击日历时将数据加载到 PartialView (ASP.NET MVC)

【英文标题】：Load data to PartialView when click on calendar (ASP.NET MVC)

【发布时间】：2018-02-10 06:05:58

【问题描述】：

我使用全日历插件

我可以点击日历中的日期并从中获取数据

这里是脚本代码：

<script>             //Calendar initialization
$(document).ready(function () 
    $('#calendar').fullCalendar(
        header: 
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        ,
        defaultView: 'agendaWeek',
        events:"/Calendar/GetEvents/",
        firstDay: 1,
        selectable: true,
        select: function (start, end, jsEvent, view) 
            $('#right2').load('@Url.Action("SheduleNewAppointment", "Calendar")');
            var allDay = !start.hasTime() && !end.hasTime();
            $("#startAppointment").val(moment(start).format("MM/DD/YYYY HH:mm a"));

        ,
        editable: true
    );
);

通过这段代码我可以得到数据

select: function (start, end, jsEvent, view) 
                $('#right2').load('@Url.Action("SheduleNewAppointment", "Calendar")');
                var allDay = !start.hasTime() && !end.hasTime();
                $("#startAppointment").val(moment(start).format("MM/DD/YYYY HH:mm a"));

            ,

我的问题是我需要在select 中打开部分视图并将数据添加到#startAppointment。这是输入

现在它打开局部视图，而不是向输入添加数据。 我该怎么做？

更新

如果我通过另一个按钮打开部分视图，然后在部分可见时单击日历，一切正常

【问题讨论】：

ID 为 #startAppointment 的元素在您正在加载的部分视图中？

是的，它在局部视图@Lazys

我相信你在异步执行JQuery加载函数时遇到了问题。尝试将与设置#startAppointment 值相关的代码移动到加载函数的回调。它应该看起来像： $('#right2').load('@Url.Action("SheduleNewAppointment", "Calendar")', function () $("#startAppointment").val(moment(start). format("MM/DD/YYYY HH:mm a")); );

【参考方案1】：

我同意 Lazys 的评论。您需要了解 ajax 操作（例如 .load）异步运行，并且任何写在异步操作调用下方的行上的代码都将立即执行，而无需等待异步操作完成。

因此，您的代码正在尝试访问 startAppointment 元素并在该元素实际存在于页面上之前设置其值。

如果您要运行的代码依赖于从 ajax 调用返回的某些数据或标记，那么您必须等待 ajax 调用完成才能运行它。这是保证代码具有正确执行所需的值的唯一方法。这通常是通过一个回调函数来完成的，你给代码进行 ajax 调用，然后这个函数被存储起来，只有在 ajax 调用成功完成时才执行。

对于 jQuery 的 .load() 方法，您可以将回调函数作为参数提供给 load() 方法本身，如下所示：

$('#right2').load(
  '@Url.Action("SheduleNewAppointment", "Calendar")', 
  function ()  //this is the callback function. It's not executed at the time you pass it load, but only after the loading operation (done via ajax) has finished
    var allDay = !start.hasTime() && !end.hasTime(); //I've included this line, although it appears to be redundant, since you never use the "allDay" variable afterwards.
    $("#startAppointment").val(moment(start).format("MM/DD/YYYY HH:mm a"));
  
); 

请参阅http://api.jquery.com/load/ 了解更多信息。

如果你这样做，它保证你的部分页面将在尝试访问该元素的 jQuery 代码之前加载，包括 startAppointment 元素，那么你应该没有问题。