如何用另一个部分视图替换部分视图？

Question

我想展示一个“最新新闻”文章列表，并在“阅读更多”链接上点击时显示所选文章的全部内容。为此，我在我的Index.cshtml视图中使用了一个部分视图。第一次显示Index视图时，部分视图会填充文章列表。我想要的是：重用同一部分视图，在点击时显示完整的文章。

由于某种原因，我无法做到这一点，也看不出原因。使用调试器和Firebug，我无法捕获任何错误。此外，应用程序经过所有步骤，甚至似乎显示了_Details部分视图，但实际上，在屏幕上仍然是列表。

谢谢你指出我的错误。

编辑：

我在_Layout.cshtml中引用了所有必要的脚本：jquery-1.8.2.min.js, jquery-ui-1.8.24.custom.min.js, jquery.ui.core.min.js, jquery.validate.min.js, jquery.validate.unobtrusive.min.js 和 jquery.unobtrusive-ajax.js，并且在web.config中也有"UnobtrusiveJavaScriptEnabled"="true"。

Index.cshtml

@model MyApp.ViewModels.NewsViewModel

<div id="content" class="content_style"> 
   <text>Some static content</text>
   <div class="active_part">
        @Html.Partial("_List", Model.NewsList)
   </div><!-- end active_part -->
</div><!-- end content -->

_List.cshtml

@model IEnumerable<MyApp.Models.News>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "active_part", InsertionMode = InsertionMode.Replace }))
{
    foreach (var item in Model)
    {
    <h2 class='title">
    @Ajax.ActionLink(item.Title, "Details", "News", new { id = item.News_ID }, new AjaxOptions { UpdateTargetId = "active_part" }, null)
        </h2>

        <div class="body">
            @Html.Raw(item.Body)
            @Ajax.ActionLink("Read more", "Details", "News", new { id = item.News_ID }, new AjaxOptions { UpdateTargetId = "active_part" }, null)
    </div>
    }
}

_Details.cshtml

@model MyApp.Models.News
@using (Ajax.BeginForm(new AjaxOptions{ UpdateTargetId = "active_part", InsertionMode = InsertionMode.Replace }))
{

    <div class="single">
        <h2 class="title">@Model.Title</h2>
        <div class="entry-content">
            @Html.Raw(Model.Body)
        </div>
    <div class="clear"></div>    
    </div>
}

ViewModel

public class NewsViewModel
{
    // Properties
    public News CurrentNews { get; set; }
    public List<News > NewsList {get; set;}

    // Constructor
    public NewsViewModel() { }

    public NewsViewModel(News pCurrentNews , List<News> pNewsList)
    {
        CurrentNews = pCurrentNews ;
        NewsList = pNewsList;
    }
}

控制器

    public ViewResult Index()
    {
        return View( new NewsViewModel(null, repository.FindAllNews()));
    }

    public ActionResult Details(long id)
    {
        News article = repository.FindAnArticleByID(id);
        return PartialView("_Details", article);
    }


    public ActionResult ListNews()
    {
        return PartialView("_List", repository.FindAllNews());
    }

- Furnica

---

如果您在控制器中设置了断点，那么“Details”操作是否一定被调用了？ - Ben Finkel

Answer 1

在你的 Index.cshtml 视图中：

<div class="active_part">

should be:

<div id="active_part">

当您在AjaxOptions中指定UpdateTargetId = "active_part"时，它会查找具有id="active_part"而非class="active_part"的DOM元素。

- Darin Dimitrov

---

谢谢你，达林，你是对的。哇，我真是个傻瓜！我可能比我想象中更累了... - Furnica

Answer 2

请确保在您的页面中导入了正确的 .js 脚本。

与 Microsoft Ajax 脚本相比，我更喜欢使用 jQuery 脚本：

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

- Ben Finkel

---

抱歉，在您更新编辑的同时，我发布了这个问题 :) - Ben Finkel

谢谢您的建议，事实上我正在同时编辑，因为我刚刚意识到jquery脚本将是任何愿意帮助的人的首选。事实上，我有几个其他视图，里面包含部分视图，但这是唯一一个表现不佳的。它让我发疯了。 - Furnica