我想展示一个“最新新闻”文章列表,并在“阅读更多”链接上点击时显示所选文章的全部内容。为此,我在我的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
由于某种原因,我无法做到这一点,也看不出原因。使用调试器和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());
}