避免局部视图全屏刷新

Question

想象以下带有局部视图的架构。

有时，当我们的应用程序由于此处未解释的原因而发生错误时，局部视图会全屏刷新。 此外，如果您复制/粘贴部分视图的 url，它将以全屏方式加载。

我们正在尝试找到一种解决方案，在该解决方案中，当加载部分视图 url 时，它将正确加载完整上下文并在他自己的上下文中显示部分视图。 Windows Azure 设法做到了这一点 (http://manage.windowsazure.com)，我们愿意模仿这个功能。

我们尝试在互联网上使用“在正确的上下文中刷新部分视图”、“在全屏中刷新部分视图的问题”等关键字进行一些搜索......但我们还没有找到正确实现这一目标的方法。

是否有任何框架或解决方案可以做到这一点？您对此有何想法？

Answer 1

如果你使用的是Partial Views，它明显涉及到ajax，你要做的就是通过ajax来做部分视图的事情。

例如：

如果您在部分内部有表单，则需要 Ajax.BeginForm 而不是 Html.BeginForm 并且另一件事是 jquery.unobtrusive-ajax 在您的主布局中添加文件以使事情正常进行。

如果您使用局部视图，您必须通过 ajax 处理其他事情也是如此，这样您就不会丢失上下文。

希望对你有帮助。

Answer 2

如果您想避免完全刷新，则必须使用 ajax 并替换 id 中的内容。如果您打算这样做，这应该是一件容易的事。

例如，您应该只需要将部分视图 url 传递给 jQuery.get。 jQuery.get

我希望这就是你要找的。​​p>

Answer 3

部分视图旨在用于可在整个网站的许多地方使用的可重复使用的视图。

如果我们通过 ajax 加载它，我发现这非常有用。

以下是示例。这也可以避免全屏刷新

_Layout.cshtml（或任何会加载部分页面的视图页面）

<div>
    <h2>This is Partial View content</h2>
    <div id="content"></div>
</div>

<script>
    $(function () {
        $("#content").html("Loading...");
        setTimeout(function () { LoadPartialView(); }, 5000);
    });
    function LoadPartialView() {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetPartialView", "Home")',
            dataType: "html",
            success: function (data) {
                $("#content").empty();
                $("#content").html(data);
                $("#content").fadeIn('slow');
            },
            error: function (data) {
                $("#content").empty();
            }
        });
    };
</script>

型号

public class TestModel
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Address { get; set; }
}

控制器的操作

    [HttpPost]
    public PartialViewResult GetPartialView()
    {
        TestModel model = new TestModel();

        model.Name="SomeName";
        model.Address="Somewhere";
        model.Age=25;

        return PartialView("_PartialTestPage", model);
    }

更新

为避免硬编码访问部分视图，请使用将重定向到主视图的重载操作方法。像这样的。

    [HttpGet]
    [ActionName("MyOverloadedName")]
    public ActionResult GetPartialView()
    {
        return RedirectToAction("Index", "Home"); //redirect to the main view
    }

您可以通过设置 HttpGet/HttpPost 来创建两个不同的同名操作方法。 在此处查看更多替代解决方案Can you overload controller methods in ASP.NET MVC?。