Question

我正在学习ASP.NET MVC，并试图让我了解局部视图。我正在尝试一个非常简单的事情，这是我的源代码。

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

_ViewStart.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication4.Controllers
{
        public class HomeController : Controller
        {
                public ActionResult Index()
                {
                        return View();
                }

                public PartialViewResult UpdateDate()
                {
                    return PartialView("Partial1");
                }
        }
}

Index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@DateTime.Now
<br />
@{Html.RenderPartial("Partial1");}
<br />
@Html.ActionLink("Render Partial", "UpdateDate")

Partial1.cshtml

@DateTime.Now

现在，当我单击Render Partial链接时，会调用UpdateDate操作方法，但渲染局部视图会覆盖主要内容，我只看到局部视图的内容。为什么我会丢失Index.cshtml的内容？

我需要做什么来显示按原样显示的Index.cshtml的内容，只刷新部分视图内容？

Answer 1

为什么我会丢失Index.cshtml的内容？

因为您需要使用AJAX调用。现在你所拥有的只是一个常规链接，它被渲染为标准<a>元素，正如你所知，当你点击任何网页中的一个锚点时，浏览器只需重定向到href的网址。属性指向。这被称为超链接，万维网上到处都是。

因此，您可以首先为链接指定一个可在以后在自定义脚本中使用的唯一ID：

@Html.ActionLink("Render Partial", "UpdateDate", null, null, new { id = "myLink" })

也将你的部分放在一个容器中：

<div id="myPartial">
    @{Html.RenderPartial("Partial1");}
</div>

最后订阅此链接的.click()事件并发送AJAX调用而不是常规重定向：

@section scripts {
    <script type="text/javascript">
        $('#myLink').click(function() {
            $.ajax({
                url: this.href,
                type: 'GET',
                cache: false,
                success: function(result) {
                    $('#myPartial').html(result);
                }
            });
            return false;
        });
    </script>
}

在这个例子中，我已经覆盖了视图中的自定义脚本部分，以便编写javascript。但当然这仅用于演示目的。好的做法要求javascript代码应该放在单独的javascript文件中，而不是与标记混合。因此，在现实世界的应用程序中，这应该重构为：

@section scripts {
    @Scripts.Render("~/bundles/mybundle")
}

~/bundles/mybundle显然是一个自定义捆绑包，您将在指向外部js的~/App_Start/BundleConfig.cs文件中定义。

或者，您可以使用Ajax.ActionLink代替常规Html.ActionLink：

@Ajax.ActionLink("Render Partial", "UpdateDate", new AjaxOptions { UpdateTargetId = "myPartial" })

但要实现这一点，您需要在页面中加入jquery.unobtrusive-ajax.js脚本。由于您使用的是ASP.NET MVC 4和捆绑包，因此可以在_Layout中包含~/bundles/jqueryval捆绑包：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@RenderSection("scripts", required: false)

部分视图覆盖主视图

1 个答案: