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

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的关闭事件并检查是否关闭fancy box或保持fancy box保持打开状态的标志。 您需要在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();
            }
        });

    }

以供参考：
花式盒子API选项

让我知道以上内容是否不能解决您的问题。