部分视图覆盖主视图

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

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

我需要做什么才能显示Index.cshtml的内容，并且仅显示部分视图内容？

来源

2013-04-10 user2265934

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

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

所以，你可以通过给你的链接一个唯一的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显然，你会在~/App_Start/BundleConfig.cs文件指向你的外部JS自定义一个包。

另外，您可以使用一个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)

来源

2013-04-10 12:28:28

感谢您的解释。 – user2265934 2013-04-10 12:49:51

部分视图覆盖主视图

回答

相关问题