如何将部分视图加载到 _Layout.cshtml 中的容器中

Question

您好，请告诉我如何将 PartialView 加载到我在 _Layout.cshtml 中准备的 div 容器中（与链接本身完全分开）。我希望通过单击以下操作链接将其加载到容器中：

<a href="@Url.Action("RenderColorbox", "ContactPartial", new { path = "_ContactPartial" })" class="colorboxLink"><span>ContactUs</span></a>

我想在没有 javascript 的情况下执行此操作，因为我需要在我的控制器中创建一个模型并将其传递给 PartialView，而且我认为不可能使用 javascript 将强类型模型传递给视图。

如果我愿意，我可以使用：

$('.colorboxLink').click(function () {
     $('.colorbox_container').load(this.href);
});

但是正如我所提到的，这并没有给我创建强类型模型并将其传递给局部视图的机会...重要的是我可以创建模型并将其传递给视图，因为当我收到空引用异常时我在局部视图中尝试了类似 foreach(var item in Model.ItemList) 的方法。

这是我的控制器的样子：

    public virtual ActionResult RenderColorbox(string path)
    {
        return PartialView(path, null);
    }

但是，目前，单击操作链接只会将 PartialView 呈现在一个新的空白页面中，而不是在我设置的容器中。

感谢大家的帮助。

编辑：要加载颜色框，我建议使用以下内容：

    $('.colorboxLink').click(function () {
    $('.colorbox_container').load(this.href, function () {
        var colorboxOptions = {
            inline: true,
            scrolling: false,
            opacity: ".9",
            fixed: true,
            onLoad: function () {
                $('#cboxContent').css({
                    "background": "white"
                });
                $('#cboxLoadedContent').css({
                    "margin-bottom": "28px",
                    "height": "558px"
                });
            }
        }
        $('#contactColorbox').colorbox(colorboxOptions);


    });

但仍然在没有颜色框的情况下加载，而是作为弹出模式。

Answer 1

但正如我所提到的，这并没有给我创造和传递的机会 局部视图的强类型模型。

它给了你这样的机会。您正在向 ContactPartial 控制器上的 RenderColorbox 操作发送 AJAX 请求。在此操作中，您可以准备任何复杂的视图模型并将其发送到部分：

public ActionResult RenderColorbox(string path)
{
    SomeComplexModel model = ...
    return PartialView(path, model);
}

还要确保通过从点击处理程序返回 false 来取消链接的默认操作：

$(function() {
    $('.colorboxLink').click(function () {
        $('.colorbox_container').load(this.href);
        return false;
    });
});

如果你不这样做，当你点击链接时，你的 AJAX 调用几乎没有机会在浏览器重定向到目标页面之前执行。