Postback in fancybox using partial view in MVC4/5?

Question

I opened partial view using fancybox from another view. everything seems to working fine. Partialview form has file attachment option too. Once it is posted controller and if ModelState is invalid then I want to return to same fancybox state where came from.

But it is not returning partialview in fancybox, it is showing like regular view not in fancybox.

How to take care of this?

Code

Home/Index.cshtml

<script type="text/javascript">

        function display_dialog() {
            $.fancybox.open({
                href: '/ContactSubmission/',
                type: 'ajax',
                padding: 0,
                openEffect: 'fade',
                openSpeed: 'normal',
                closeEffect: 'elastic',
                closeSpeed: 'slow',
                minWidth: 'auto',
                minHeight: 'auto',
                helpers: {
                    title: {
                        type: 'float'
                    }
                }
            });

        }

    </script>

ContactSubmissionController.cs

 public ActionResult Index()
    {
        var contact = new Contact
        {
            Countries = Context.GetCountries()
        };

      // return View(contact);
        return PartialView(contact);
    }



[HttpPost]
  public ActionResult Index(Contact contact)
  {
      if (ModelState.IsValid)
      {
          if (contact != null)
          {
             //Business Logic
          }
       }
       if (contact != null)
       {
          //To maintain Coutries list after return to view.
           contact.Countries = Context.GetCountries();
       }
       return PartialView(contact);
    }

ContactSubmission.cshtml

     <div class="panel panel-default">

                @using (Html.BeginForm("Index", "ContactSubmission", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form-horizontal", role = "form" }))
                {
                       @Html.AntiForgeryToken()
    <div class="form-group">
                            <div class="col-sm-5">
                                @Html.LabelFor(model => model.FirstName, new { @class = "control-label" })<span class="red">*</span>
                            </div>
                            <div class="col-sm-7">
                                @Html.TextBoxFor(model => model.FirstName, new { @class = "form-control", @placeholder = "First Name", required = "required" })
                                @Html.ValidationMessageFor(model => model.FirstName, "", new { @style = "color:Red" })

                            </div>
                        </div>
            ---
            ---
            ---
                    <div class="form-group">
                        <div class="col-sm-5">

                            @Html.LabelFor(model => model.Countries, new { @class = "control-label" })<span class="red">*</span>

                        </div>
                        <div class="col-sm-7">

                            @Html.DropDownList("CountryCode", new SelectList(Model.Countries, "CountryCode", "CountryDesc"), new { @class = "btn btn-default dropdown-toggle" })
                            @Html.ValidationMessageFor(model => model.Countries, "", new { @style = "color:Red" })
                        </div>
                    </div>

                   ---
                   ----
                   ---
                   <div class="form-group">
                        <div class="col-sm-5">
                            @Html.LabelFor(model => model.Attachement, new { @class = "control-label-nobold" })
                        </div>
                        <div class="col-sm-7">
                            @Html.TextBoxFor(m => m.Attachement, new { @class = "form-control", type = "file" })
                            @Html.ValidationMessageFor(m => m.Attachement)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-7 col-sm-offset-5">
                            <span class="red">Forms cannot be more than 2.5MB including both the email body and attachment (It will NOT transmit) </span>
                        </div>
                    </div>

                        <div class="form-group">
                            <div class="col-sm-4 col-md-offset-5">
                                <button type="submit" class="btn btn-primary">Submit</button>

                                <button type="submit" class="btn btn-default">Cancel</button>
                            </div>
                        </div>
                    </div><!-- /panel-body -->

Answer 1

You will need to capture the closing event for the fancybox and check for the flag whether to close the fancy box or keep the fancy box open as it is. You will need to apend below line fancybox:

onCleanup: function(e) {
        e.preventDefault();
    }

So you will need to update your fancybox creation script as below:

  function display_dialog() {
        $.fancybox.open({
            href: '/ContactSubmission/',
            type: 'ajax',
            padding: 0,
            openEffect: 'fade',
            openSpeed: 'normal',
            closeEffect: 'elastic',
            closeSpeed: 'slow',
            minWidth: 'auto',
            minHeight: 'auto',
            helpers: {
                title: {
                    type: 'float'
                }
            },
            onCleanup: function(e) {
                e.preventDefault();
            }
        });

    }

For reference:
Fancy Box API Options

Do let me know if above doesn't solve your issue.