【无刷新】一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步-分页-内容预览

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步】，下面是详细的讲解！

一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步

 在上一篇文章中，我们进行了需求分析，如下：

1。动态的新闻列表（这个很简单）

2。可以分页读取新闻列表（这个也不难）

3。可以无刷新的分页读取新闻列表（这个稍微有点难度）

4。可以预览新闻的内容（这个也稍微有点难度）

5。界面友好（这个是必须的）

    按照软件工程的顺序，我们应按照这样的顺序开发软件：可行性分析===》需求分析===》概要设计===》详细设计===》编码===》测试

    由于我们仅仅是项目中的一个小部分，但也差不多按照以上的顺序进行开发，这是一个良好的习惯。我们将概要设计和详细设计放在一起。

    下面我们来设计数据库，由于采用的是Access数据库，而且字段也相对简单。就一张表tb_news，数据库名为news。

列

      名称                                 类型                长度

      news_id                               长整型                       4

      news_title                             文本                       255

      news_content                           内存                         -

      news_time                              日期/时间                     8

      news_readtimes                          长整型                       4

 

当然，你可以根据自己的需要增加字段或减少字段。其中news_content尽可能的长一些，符合新闻的长度。

数据库设计完毕后，我们可以开始编码了。首先建立asp.net项目（我比较偏向于web application，而不是website），将其命名为MyNewsList。如下图所示：

 

 

 如果是用vs2010正式版，创建好后会发现会生成很多文件，它是vs2010自带的有些样式的页面（母版页），有点类似于asp.net mvc。这里我们不需要，将他们删除并且将一些文件夹重命名，将Account文件夹、About.aspx、Default.aspx、Global.asax和site.Mater删掉，并且将Scripts文件夹重命名为js文件夹；将Styles重命名为css文件夹，这样更符合我们的习惯，当然你也可以不改。并且将news数据库文件拷贝至App_Data文件夹。（如果你是vs2008或者其他版本，做类似的操作）最后的列表如下图：

 

ok，地基我们已经搭建好了，现在我们要筑房子了。建立NewsList.aspx页面，这就是我们的新闻列表页面。
在编辑NewsList.aspx之前，我们来先配置一下web.config文件，建立于数据库的连接。将<connectionStrings/>改为：

我们注意到：Data Source=|DataDirectory|\news.mdb;中的DataDirectory，这就是为什么我们要将数据库文件拷贝到App_Data文件夹下，这样就很方便的调用数据库了，不必为路径的问题而烦恼了。

配好web.config文件后，我们开始设计前台。NewsList.aspx页面前台body的代码如下：

我们看到这是一个table，但里面并没有绑定或者写一些代码，这是为了以后使用ajax添加上去。同时我们注意到有这样的一些id
<span id="productid"></span>这是以后使用json绑定是需要的。

现在，我们来写一些后台代码，尝试着连接数据库。为了简单起见，我把连接数据库的代码写到NewsList.aspx的后台代码及NewsList.aspx.cs中，其实我们在实际的项目中，往往会把数据库操作的那块封装起了，只提供接口。
后台代码如下：

当我们运行页面后发现“数据库连接成功”后，我们才开始下面的code编码。

关于一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步的用户互动如下：

　　相关问题：ajax无刷新分页问题

　　答：你的问题是什么？ >>详细

　　相关问题：thinkphp怎么实现AJAX无刷新查询分页？

　　答：其实就是清楚原来的列表，再重新把查出来的列表塞进来，这就是局部刷新 >>详细

　　相关问题：ASP后台修改数据,前台不用手动刷新页面?

　　答：学学ajax吧 >>详细