本文介绍了如何在ASP.NETMVC项目中实现文章列表展示、搜索功能、文章分类以及留言查看和提交，包括数据库操作、使用分页插件和控制器视图的编写。
引文:接着上回阐述，我们已经初始化了数据库，这时候我们的数据库里面就有东西了，那么现在要对页面进行操作
课前准备:
在正式开始之前，因为这篇文章开始需要用到分页，那么我们就需要去下载一些分页插件，分页插件有很多,我们点击工具然后去下载NuGet包，如图所示,
我个人比较喜欢用这个包，就是我下载了，你也跟着下载这个
然后书上用的分类是这个包,两个包的作者不一样, 这两个分页我之后都会在不同的控制器里面演示一遍，复制我的代码修改一下即可
第一部分:
我们需要实现文章列表的显示,那么这时候就开始添加控制器了,我们去页面的根目录下面Controllers文件夹下面,添加一个空的控制器。
然后在添加的控制器上面写代码就行，这一步没什么需要自己操作的地方,首先要实体化数据库,代码如果实体类型不一致的话需要改成你自己的,这里的Model是你自己的,就是这里的Model2名字(看清楚就行)
代码如图所示:
private Model2 db = new Model2();
// GET: ArticleSets
public ActionResult Index(int? page)
{
int pageIndex = page ?? 1;
int pageSize = 2;
var articleQuery = from Article in db.Articles
orderby Article.addDate descending
select
Article;
PagedList.IPagedList<Article> p1 = articleQuery.ToPagedList(pageIndex, pageSize);
return View(p1);
}然后添加这个控制器的视图（添加一个空的视图即可）,然后把视图的代码写下来，我写了这个控制器的参考视图代码，然后下面还有一些样式，CSS样式需要你自己写,视图参考代码如下,需要注意的是最上面的代码是用于导入命名空间的，这个需要你自己修改成自己的，比方说个人博客是我创建的项目名称，需要改成你的项目名称,然后这里用了我开头提到到第一个分页组件PagedList,导入一下就好,然后书上的视图用的是另一个分页组件，我后面会讲:
@using 个人博客.Models
@using PagedList;
@using PagedList.Mvc;
@model IPagedList<个人博客.Models.Article>
@{
ViewBag.Title = "Index";
}
<h5 class="bigtitle">文章列表</h5>
@foreach (var item in Model)
{
<div class="article">
<h3 class="title">
@Html.ActionLink(item.Title, "ShowArticle", new { Id = item.Id }):
</h3>
<div class="content">
@Html.Raw(item.Content)
</div>
<div class="meta-info">
<div class="comment">
评论: (0)
</div>
<div class="update">
更新日期：@item.addDate.ToString("yyyy-MM-dd")
</div>
<div class="views">
浏览次数：@item.Hit
</div>
</div>
</div>
}
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }),
PagedListRenderOptions.ClassicPlusFirstAndLast)第二部分:
然后我们开始实现文章搜索的你钱，如果你前面已经写好了，那么这一部分，我们在主页的时候，会发现有一个搜索框，这个搜索框就是用来搜索文章内容的，
同样的我们也是在原本的Controller控制器中，添加一个名为Search的方法,代码如下面所示,因为前期模型创建的原因，可能会有出现错误的情况，这个只是参考代码,，因为我们返回的是Index界面所以，我们这里并不需要添加视图:
public ActionResult Search(int? page,string key,int ? pageIndex1)
{
int pageIndex = page ?? 1; // 新的初始页码
int pageSize = 2; // 新的每页大小
var articleQuery = from Article in db.Articles
orderby Article.addDate descending
select
Article;
if (!String.IsNullOrEmpty(key)) {
key = key.Trim();
articleQuery= (IOrderedQueryable<Article>)articleQuery.Where(a=>a.Title.Contains(key));
}
PagedList.IPagedList<Article> p1 = articleQuery.ToPagedList(pageIndex, pageSize);
return View("Index",p1);
}第三部分
我们需要实现文章分类,首先需要在根目录的controllers文件夹下面创建一个名为Category的控制器,创建步骤和之前一一样,然后控制器代码如下(数据库模型用你们自己的)
public class CategoryController : Controller
{
private Model2 context = new Model2();
// GET: Category
public PartialViewResult List()
{
return PartialView(context.Categories.ToList());
}
}然后给他添加分部视图如下所示:
视图中的代码如下所示:
@model IEnumerable<个人博客.Models.Category>
@{
ViewBag.Title = "List";
}
<ul>
@foreach (var item in Model)
{
<li>
@Html.ActionLink(item.Name, "ListArticleByCategory", "Article",new {Id=item.Id},null)
</li>
}
</ul>然后在我们的Article控制器下面添加一个名为ListArticleByCategory的方法，代码如下:
public ActionResult ListArticleByCategory( int id,int? pageIndex1)
{
int pageIndex = 1; // 新的初始页码
int pageSize = 2; // 新的每页大小
var articleQuery = from Article in db.Articles
where Article.Category_Id ==id orderby Article.Category_Id
select
Article;
if (articleQuery == null) {
return Content("我是老六");
}
PagedList.IPagedList<Article> p1 = articleQuery.ToPagedList(pageIndex, pageSize);
return View("Index",p1);
}第五部分
去实现文章点击排行显示,首先我们要去根目录下面layout布局里面,
然后我们去控制器里面添加对应的方法,在article控制器里面添加一个top10()的控制器方法,
public PartialViewResult Top10()
{
var articleQuery = from Article in db.Articles
orderby Article.Hit descending
select
Article;
return PartialView(articleQuery.Take(10).ToList());
}然后添加视图，在视图里面添加如下代码,模型类等还是要改成你自己的:
@model IEnumerable<个人博客.Models.Article>
<ul>
@foreach (var item in Model)
{
<li>@Html.ActionLink(item.Title, "ShowArticle", new { ID = item.Id })</li>
}
</ul>
第六部分
实现留言查看功能,在控制器里面添加一个名为GuestBook的留言控制器,然后添加控制器方法,实现留言查看功能,那么这里我就展示了Webdiyer分页类，所以在看我的代码的时候，你们需要导入Webdiyer的分页功能,
private Model2 db = new Model2();
// GET: GuestBook
public ActionResult Index(int? page)
{
int pageIndex = page ?? 1; // 新的初始页码
int pageSize = 2; // 新的每页大小
var guestBookQuery = from gb in db.GuestBooks
orderby gb.AddDate descending
select gb;
Webdiyer.WebControls.Mvc.IPagedList<GuestBook> p1 = new Webdiyer.WebControls.Mvc.PagedList<GuestBook>(guestBookQuery.ToList(), pageIndex, pageSize);
return View(p1);
}然后我们添加视图，在页面上写下如下代码:
@using Webdiyer.WebControls.Mvc
@model Webdiyer.WebControls.Mvc.PagedList<个人博客.Models.GuestBook>
@{
ViewBag.Title = "Index";
}
<h2>博客留言</h2>
<div class="list">
<ul>
@foreach (var m in Model)
{
<li>
<div class="comment-header">
<span class="nickname">@m.Nickname</span>
<time datetime="@m.AddDate.ToString("yyyy-MM-ddTHH:mm:ss")">@m.AddDate.ToShortDateString()</time>
</div>
<p class="message">@m.Message</p>
<div class="reply-button">
<button>回复</button>
</div>
</li>
}
</ul>
</div>
<div class="pagination">
@Html.Pager(Model)
</div>到此留言查看功能就写好了。
关于留言提交的功能，
参考的控制器代码如下，页面视图的代码,往原先的
<br />
<br />
<br />
<br />
@using (Html.BeginForm("Index", "GuestBook", FormMethod.Post))
{
<table width="500" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="80" align="center">昵 称:</td>
<td>
<input type="text" name="guestBook.Nickname" value="@ViewBag.Nickname" @Html.ValidationMessage("guestBook.Nickname") />
</td>
</tr>
<tr>
<td align="center">内 容:</td>
<td>
<textarea cols="50" rows="6" name="guestBook.Message">@ViewBag.Message</textarea>
@Html.ValidationMessage("guestBook.Message")
</td>
</tr>
<!-- 恢复验证码部分，如果需要的话 -->
<!---->
@* <tr>
<td></td>
<td>
<div class="gbook2">
@Html.MvcCaptcha()
<span id="captchaImage"></span><br /><br />
请输入上边图片中的文字:
<input type="text" name="_mvcCaptchaText" id="_mvcCaptchaText" />
@Html.ValidationMessage("_mvcCaptchaText")
</div>
</td>
</tr>*@
<tr>
<td></td>
<td>
<input type="submit" value="留言" class="btn btn-primary" />
</td>
</tr>
</table>
}第七部分
实现全篇文章显示,在控制器Article里面添加代码,
public ActionResult ShowArticle(int? id)
{
var article = db.Articles.Find(id);
if (article == null) {
return HttpNotFound();
}
article.Hit++;
db.SaveChanges();
return View(article);
}然后添加视图，添加如下代码:
@model 个人博客.Models.Article
@{
ViewBag.Title = "文章详情";
}
<center>
<p><strong>@Model.Title</strong></p>
</center>
<div class="content">
@Model.Content
</div>
<br />
<div class="note">
添加日期：@Model.addDate.ToShortDateString() 浏览量：@Model.Hit 来源：@Model.Category.Name <br />
<br />
<ul>
</ul>
</div>下一篇讲三个文章管理
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
