将 Fancybox 与 ASP.NET MVC Ajax 一起使用

Question

我有一个表单加载在一个fancybox 中，这样如果用户点击一个链接，一个表单就会加载到fancybox 中，它是@Ajax.BeginForm()。像这样：

@using (Ajax.BeginForm("AddToBasket", new { controller = "Orders" }, new AjaxOptions()
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "SuccessBasket",
    OnSuccess = "goToCheckout"   
}, new { @class = "product-order-form" }))
{

@* Form elements for Model *@

<div id="SuccessBasket"></div>
}

这会加载到一个花式框窗口中。当我提交表单时，我的 SuccessBasket div 没有使用从控制器传递的新内容进行更新，是否有某种方法可以在 Fancybox 中更新 Ajax 调用？如果我不使用 fancybox 但我希望使用它，这可以正常工作。

编辑：

表单是这样加载的：

@Ajax.ActionLink("Order", "OrderProduct", new { controller = "Orders", id = ViewData["ID"], search = ViewData["search"] }, new AjaxOptions()
{
    UpdateTargetId = "ModalWindow",
    InsertionMode = InsertionMode.Replace,
    OnFailure = "NotAuthorised"

}, new { @class = "lightbox order-link" })

我有一个名为 ModalWindow 的空 div，它按照说明由设置为 display: none 的 div 包装：

<div style="display: none">
    <div id="ModalWindow">
    </div>
</div>

我的控制器中的 OrderProduct Action 返回一个 PartialView：

return PartialView("_OrderProduct", basket);

我的模型在哪里篮子BasketModel basket = new BasketModel();

我的 _OrderProduct PartialView 是在我的帖子开头包含 Ajax 表单的视图。其中有 SuccessBasket div。

到目前为止，它运行良好。表单会在 fancybox 中加载。

AddToBasket Action 返回一个 PartialView：

return PartialView("_BasketSuccess");

此视图只是告诉用户他们的商品已添加到购物篮中：

<p>This item has been added to your basket. Search again or goto @Html.ActionLink("checkout", "Order", new { controller = "Orders" }, new { @class = "checkout-link" }) to continue.</p>

问题是，SuccessBasket div 并没有随着上面的文本更新，但是通过调试，我可以看到它确实加载了视图_BasketSuccess，它只是没有在模态窗口中更新。

Answer 1

你加载fancybox的方式很奇怪。您正在发送 2 个 AJAX 请求：一个用于 Ajax.ActionLink，一个用于 fancybox。这一切都没有必要。此外，您不需要在主视图中隐藏 div，fancybox 会自动完成所有这些操作。

回顾一下，在您的主视图中，您只需要一个指向控制器actin 的简单HTML 链接，它将返回包含表单的部分：

@Html.ActionLink("Order", "OrderProduct", "Orders", null, new { @class = "lightbox" })

在一个单独的 javascript 文件中，您将把 fancybox 附加到这个锚点，这样当它被点击时，它会自动发送一个 AJAX 请求（fancybox，而不是您），获取部分表单并显示它：

$(function () {
    $('.lightbox').fancybox();
});

好的，现在您有一个在花式框中显示的部分表单。这个部分表单实际上是一个 Ajax.BeginForm。因此，当您提交此表单时，它会向 AddToBasket 操作发送 AJAX 请求，成功后它将使用此操作返回的结果更新此表单内的 <div id="SuccessBasket"></div>。