search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

close modal dialog

Related article: DayPilot.Modal Dialog
Asked by Nely
7 years ago.

How to close a modal dialog from server side using MVC controllers

Answer posted by Dan Letecky [DayPilot]
7 years ago.

It's not possible to close the modal dialog from the server side.

In the MVC samples, a slighly different approach is used - the form displayed in the modal dialog is not submitted in a traditional way but using AJAX instead. That means the modal content URL doesn't change. When the AJAX call response is received, the modal dialog is closed on the client side using .close() method.

An example (Create.cshtml view) from the "MVC5 Event Calendar Tutorial" at https://code.daypilot.org/59860/asp-net-mvc-5-event-calendar

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head runat="server">
   	<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.11.2.min.js")"></script>
    <link href="@Url.Content("~/Media/layout.css")" rel="stylesheet" type="text/css" />
   	<style>
   	p, body, td { font-family: Tahoma, Arial, Sans-Serif; font-size: 10pt; }
   	</style>
    <title></title>
</head>
<body style="padding:10px">
    <form id="f" method="post" action="@Url.Action("New")">
    
    <h1>New Event</h1>    
    
    <div>Text</div>
    <div>@Html.TextBox("Text")</div>
    
    <div>Start</div>
    <div>@Html.TextBox("Start")</div>

    <div>End</div>
    <div>@Html.TextBox("End")</div>


        <div class="space">
            <input type="submit" value="Save" id="ButtonSave"/>
            <a href="javascript:close()">Cancel</a>
        </div>
    <div class="space">&nbsp;</div>
    </form>
    
    <script type="text/javascript">
        function close(result) {
            if (parent && parent.DayPilot && parent.DayPilot.ModalStatic) {
                parent.DayPilot.ModalStatic.close(result);
            }
        }

        $("#f").submit(function () {
            var f = $("#f");
            $.post(f.action, f.serialize(), function (result) {
                close(eval(result));
            });
            return false;
        });

        $(document).ready(function () {
            $("#Text").focus();
        });
    
    </script>    
</body>
</html>
This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.