如何使用 javaScript 和 Razor return 在 fullCalendar 上 select 日期之后的视图

Question

我能够查询数据库以正确地用事件填充日历。我可以拖放并且日期在数据库中成功更新。如果我单击现有事件，弹出模式会显示我想要的详细信息，而且我已经能够轻松地对其进行自定义。

但是，我不知道如何从 fullCalendar 视图创建新事件。我不想以模态的形式在那里创建它，因为除了开始、结束、ID、颜色等基础知识之外，我需要从用户那里捕获很多额外的选择。我只想捕获 'start' 和 return 一个基本的创建视图表单。

当我跟踪断点时，一切看起来都正常。 'start' 值被传递给控制器方法。该方法调用服务于 return 模型。断点显示正在呈现的视图，但屏幕上实际上没有任何变化。 js如下：

selectable: true,
        select: function (start) {
            selectedEvent = {
                eventID: 0,
                start: start,
                allDay: true,
            };
            CreateFullCalEvent(start.toISOString());
            $('#calendar').fullCalendar('unselect');
        },

        height: 'parent',
        events: function (start, end, timezone, callback) {
            $.ajax({
                type: "GET",
                contentType: "application/json",
                url: "GetEventData",
                dataType: "JSON",
                success: function (data) {
                    var events = [];
                    $.each(data, function (i, data) {
                        events.push(
                            {
                                title: data.title,
                                start: moment(data.start),
                                end: moment(data.end),
                                allDay: true,
                                backgroundColor: data.color,
                                id: data.id,
                                textColor: data.textColor


                            }
                        );
                    });
                    callback(events);
                }
            })
        },
        nextDayThreshold: '00:00:00',
        editable: true,
        droppable: true,
        nowIndicator: true,
        eventClick: function (info) {
            GetFullCalEventByID(info);
        },
        eventDrop: function (info) {
            console.log(info);
            UpdateFullCalEvent(info.id, info.start.toISOString(), info.end.toISOString());
        },
        eventResize: function (info) {
            UpdateFullCalEvent(info.id, info.start.toISOString(), info.end.toISOString());
        }
    })
}


function CreateFullCalEvent(start) {
    var object = {};
    object.start = start;
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "CreateFullCalEvent/",
        dataType: "JSON",
        data: JSON.stringify(object)
    });

}

function GetFullCalEventByID(eventinfo) {

控制器方法在这里：

 //CREATE
    [HttpPost]
    public ActionResult CreateFullCalEvent(string start)
    {
        //return RedirectToAction("Create", "CalendarEvent");
        var model = _calEventSvc.FullCalendarEventCreateView(DateTime.Parse(start));
        return View(model);
    }

和视图：

      @model CRM.Models.CalendarEvent.CalendarEventCreate

      @{
    ViewBag.Title = "CreateFullCalEvent";
}

<h2>CreateFullCalEvent</h2>


@using (Html.BeginForm()) 
{
     @Html.AntiForgeryToken()

    <div class="form-horizontal">
       
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })



        <div class="form-group">
            @Html.LabelFor(model => model.Start, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Start, new { htmlAttributes = new { @class = "form-control", type = "date" } })
                @Html.ValidationMessageFor(model => model.Start, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.End, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.End, new { htmlAttributes = new { @class = "form-control", type = "date" } })
                @Html.ValidationMessageFor(model => model.End, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Location, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Details, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Details, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Details, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.TypeOfEvent, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EnumDropDownListFor(model => model.TypeOfEvent, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.TypeOfEvent, "", new { @class = "text-danger" })
            </div>
        </div>
       
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" formaction="Create" class="btn btn-default" />
                @*<input type="submit" value="Add Job info" formaction="Job" class="btn btn-default" />*@

            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

我在 visual studio 或浏览器的调试模式下没有收到错误。它只是没有按预期显示我的观点。这是常规视图，不是局部视图，所以我希望其他页面的布局视图显示在这里。

我点击日期时所在的页面没有使用布局页面，是这样的：

 @{
    Layout = null;
   

}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/fullcalendar.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/moment.js"></script>
    <script src="~/Scripts/fullcalendar.js"></script>
    <script src="~/Scripts/calendar.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            GetEventsOnPageLoad();
        });
    </script>
    <style>
        .calendar-body {
            height: calc(100vh - 165px);
            width: 90%;
            padding-left: 130px;
        }

        .calendar-header {
            padding-left: 30%;
            margin-top: 5%;
        }
        body {
            zoom: 110%;
            background-image: url('../../Content/Assets/bgSubtle.jpg');
            font-family: Consolas;
        }
    </style>
</head>
<body>
    <div class="calendar-header">
        @Html.Partial("~/Views/Shared/NavBarLayout.cshtml")
        <div style="padding: 1%; margin-left: 71%;">@Html.ActionLink("List View", "Index", "CalendarEvent")</div>
    </div>
    <div class="calendar-body">
        <div id="calendar"> </div>
    </div>
    <div id="MyPopup" class="modal fade modal-CreateEvent" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                @*Header*@
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                </div>
                @*ModalBody*@
                <div class="modal-body">

                </div>
                @*modal footer*@
            <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal">
                    OK
                </button>
                <button id="btnEdit" class="btn btn-default pull-right">Edit</button>
                
            </div>
            </div>
        </div>
    </div>

</body>
</html>

Answer 1

您正在通过 AJAX 呼叫 CreateFullCalEvent。这不会呈现您的视图，除非您编写一些 JavaScript 来这样做（在这种情况下，您需要局部视图，而不是完整视图，才能进入现有页面）。请记住 AJAX 请求不会自动刷新页面，它只是发送请求并接收响应。响应数据（在本例中为视图的 HTML）返回到变量内的 JavaScript - 然后响应数据会发生什么取决于您和您编写的代码来处理它。目前，您的代码忽略了从 AJAX 请求返回的响应。

您说过您不想将此创建表单放入模态中，因此我假设您确实希望将浏览器从日历重定向到创建页面。为此，您只需要一个简单的重定向：

function CreateFullCalEvent(start) {
  window.location.href = "CreateFullCalEvent?start=" + encodeURIComponent(start);
}

但要使其与服务器端代码一起工作，您还必须使操作方法响应 GET 而不是 POST:

[HttpGet]
public ActionResult CreateFullCalEvent(string start)

您也可以选择将其更改为 CreateFullCalEvent(DateTime start)，这样您以后就不需要调用 DateTime.Parse。

P.S。说了那么多，还不是很清楚为什么您觉得模态内的表单（覆盖在日历顶部）在这里不适合 - 您的“创建”视图仅捕获少量字段。在我看来，作为局部视图它会很好用。只是想一想。

如何使用 javaScript 和 Razor return 在 fullCalendar 上 select 日期之后的视图

How to return a view after select of date on fullCalendar using javaScript and Razor

javascript

asp.net-mvc

fullcalendar