RAZOR MVC3:重用的部分视图
LCJ*_*LCJ 4 asp.net ajax asp.net-mvc razor asp.net-mvc-3
我有两个实体 - PopularTutorial和Blog.此数据需要显示在主页视图中,如下所示.关键点是"PopularTutorial"应该在其他视图中重用,Bloglist也可以在其他视图中重用."PopularTutorial"部分中有一个手动分页选项.单击第1页时,将列出前3个热门教程.单击第2页时,将列出教程4到6.
我知道"局部视野"是要走的路.当我搜索时,我遇到了涉及jQuery和JSON的方法.我想知道这是否可以在没有明确使用jQuery和JSON的情况下完成(在RAZOR中).
你可以帮我在RAOZR帮忙吗？
说实话 - 我是在学习MVC中的AJAX之前做的一步.所以我的下一次尝试将是ajaxify它.如果你能提供一个以ajax方式工作的答案,那将是很棒的.
public class PopularTutorial
{
public int ID { get; set; }
public int NumberOfReads { get; set; }
public string Title { get; set; }
}
public class Blog
{
public int ID { get; set; }
public string Head { get; set; }
public string PostBy { get; set; }
public string Content { get; set; }
}
namespace MyArticleSummaryTEST.Controllers
{
public class HomePageViewModel
{
public IEnumerable<Blog> BlogList { get; set; }
public IEnumerable<PopularTutorial> PopularBlogs { get; set; }
}
public class ArticleController : Controller
{
private IEnumerable<PopularTutorial> GetPopularBlogs()
{
List<PopularTutorial> popularArticleList = new List<PopularTutorial>()
{
new PopularTutorial{ID=17,Title="Test1",NumberOfReads=1050},
new PopularTutorial{ID=18,Title="Test2",NumberOfReads=5550},
new PopularTutorial{ID=19,Title="Test3",NumberOfReads=3338}
};
return popularArticleList;
}
private IEnumerable<Blog> GetAllBlogEntries()
{
List<Blog> articleSummaryList = new List<Blog>()
{
new Blog {ID=1,Head="Introduction to MVC",PostBy="Lijo", Content="This is a ..."},
new Blog {ID=2,Head="jQuery Hidden Gems",PostBy="Lijo", Content="This is a ..."},
new Blog {ID=3,Head="Webforms Intenals",PostBy="Lijo", Content="This is a ..."}
};
return articleSummaryList;
}
}
}
读:
http://www.mikesdotnetting.com/Article/154/Looking-At-The-WebMatrix-WebGrid
@ Html.Partial()Vs @ Html.Action() - MVC Razor http://pratapreddypilaka.blogspot.in/2011/11/htmlpartial-vs-htmlaction-mvc-razor.html
这是一个可以帮助您入门的示例:
楷模:
public class PopularTutorial
{
public int ID { get; set; }
public int NumberOfReads { get; set; }
public string Title { get; set; }
}
public class Blog
{
public int ID { get; set; }
public string Head { get; set; }
public string PostBy { get; set; }
public string Content { get; set; }
}
控制器:
public class ArticlesController : Controller
{
public ActionResult Index()
{
return View();
}
[ChildActionOnly]
public ActionResult Blogs()
{
return PartialView(GetAllBlogEntries());
}
[ChildActionOnly]
public ActionResult Popular()
{
return PartialView(GetPopularBlogs());
}
private IEnumerable<PopularTutorial> GetPopularBlogs()
{
return new[]
{
new PopularTutorial { ID = 17, Title = "Test1", NumberOfReads = 1050 },
new PopularTutorial { ID = 18, Title = "Test2", NumberOfReads = 5550 },
new PopularTutorial { ID = 19, Title = "Test3", NumberOfReads = 3338 },
new PopularTutorial { ID = 20, Title = "Test4", NumberOfReads = 3338 },
new PopularTutorial { ID = 21, Title = "Test5", NumberOfReads = 3338 },
new PopularTutorial { ID = 22, Title = "Test6", NumberOfReads = 3338 },
new PopularTutorial { ID = 23, Title = "Test7", NumberOfReads = 3338 },
};
}
private IEnumerable<Blog> GetAllBlogEntries()
{
return new[]
{
new Blog { ID = 1, Head = "Introduction to MVC", PostBy = "Lijo", Content = "This is a ..." },
new Blog { ID = 2, Head = "jQuery Hidden Gems", PostBy = "Lijo", Content = "This is a ..." },
new Blog { ID = 3, Head = "Webforms Intenals", PostBy = "Lijo", Content = "This is a ..." }
};
}
}
查看(~/Views/Articles/Index.cshtml):
All Blogs List
@Html.Action("blogs")
Popular Tutorial
@Html.Action("popular")
博客部分(~/Views/Articles/Blogs.cshtml):
@model IEnumerable<Blog>
<section>
<ul>
@Html.DisplayForModel()
</ul>
</section>
博客显示模板(~/Views/Articles/DisplayTemplates/Blog.cshtml):
@model Blog
<li>
<h3>@Html.DisplayFor(x => x.Head)</h3>
@Html.DisplayFor(x => x.Content)
</li>
热门Partial(~/Views/Articles/Popular.cshtml):
@model IEnumerable<PopularTutorial>
@{
var grid = new WebGrid(Model, canPage: true, canSort: false, rowsPerPage: 3);
}
@grid.GetHtml(
columns: grid.Columns(
grid.Column("", format: @<text>@item.Title</text>)
)
)
结果:
更新:
根据评论部分的要求,我将尝试涵盖另外两个场景:
1)为Popular创建一个单独的控制器？
这非常简单.只需创建一个新的PopularBlogs控制器:
public class PopularBlogsController : Controller
{
public ActionResult Popular()
{
return PartialView(GetPopularBlogs());
}
private IEnumerable<PopularTutorial> GetPopularBlogs()
{
return new[]
{
new PopularTutorial { ID = 17, Title = "Test1", NumberOfReads = 1050 },
new PopularTutorial { ID = 18, Title = "Test2", NumberOfReads = 5550 },
new PopularTutorial { ID = 19, Title = "Test3", NumberOfReads = 3338 },
new PopularTutorial { ID = 20, Title = "Test4", NumberOfReads = 3338 },
new PopularTutorial { ID = 21, Title = "Test5", NumberOfReads = 3338 },
new PopularTutorial { ID = 22, Title = "Test6", NumberOfReads = 3338 },
new PopularTutorial { ID = 23, Title = "Test7", NumberOfReads = 3338 },
};
}
}
然后将~/Views/Articles/Popular.cshtml之前显示的部分移动到~/Views/PopularBlogs/Popular.cshtml最后更新您的位置~/Views/Articles/Index.cshtml:
All Blogs List
@Html.Action("blogs")
Popular Tutorial
@Html.Action("popular", "popularblogs")
2)打电话给流行的ajax
在您的~/Views/Articles/Index.cshtml视图中,替换使用以下Html.Action内容呈现流行博客的帮助程序div:
All Blogs List
@Html.Action("blogs")
Popular Tutorial
<div id="popular" data-url="@Url.Action("Popular", "PopularBlogs")"></div>
然后修改~/Views/PopularBlogs/Popular.cshtml以启用AJAX分页:
@model IEnumerable<PopularTutorial>
@{
var grid = new WebGrid(
Model,
canPage: true,
canSort: false,
rowsPerPage: 3,
ajaxUpdateContainerId: "grid"
);
}
@grid.GetHtml(
htmlAttributes: new { id = "grid" },
columns: grid.Columns(
grid.Column("", format: @<text>@item.Title</text>)
)
)
最后一步是将此partial的内容加载到相应的div中:
$(function () {
var popular = $('#popular');
popular.load(popular.data('url'));
});
| 归档时间： |
|
| 查看次数： |
8130 次 |
| 最近记录： |