1

我正在学习 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";
}

家庭控制器.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");
                }
        }
}

索引.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 的内容并且只刷新部分视图内容？

4

1 回答 1

4

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

因为您需要使用 AJAX 调用。现在，您所拥有的只是一个常规链接，它被呈现为标准<a>元素，并且您知道，当您单击任何网页中的锚点时，浏览器只会重定向到该href属性指向的 url。这被称为超链接，万维网充满了它们。

因此，您可以首先为您的链接提供一个唯一的 ID，该 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。

或者，您可以使用 anAjax.ActionLink而不是常规Html.ActionLink：

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

但要使其正常工作，您需要将jquery.unobtrusive-ajax.js脚本包含到您的页面中。由于您使用的是 ASP.NET MVC 4 和捆绑包，因此您可以~/bundles/jqueryval在 _Layout 中包含捆绑包：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@RenderSection("scripts", required: false)
于 2013-04-10T12:28:28.050 回答