使用MVC4 / 5中的局部视图在fancybox中回发？

Question

我使用另一个视图中的fancybox打开了局部视图。一切似乎都很好。 Partialview表单也有文件附件选项。一旦它被发布控制器并且如果ModelState无效，那么我想返回到来自的同一个fancybox状态。

但是它并没有在fancybox中返回partialview，它显示的不像普通视图而是在fancybox中。

如何照顾这个？

代码

主页/ 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

您需要捕获fancybox的关闭事件并检查标志是否关闭花式框或保持花式框原样打开。你需要在线下fancybox下面：

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

因此您需要更新您的fancybox创建脚本，如下所示：

  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();
            }
        });

    }

供参考：
的 Fancy Box API Options

如果上述内容无法解决您的问题，请与我们联系。