无为清净楼资源网

一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步
网络编程 2024/11/17 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com
 在上一篇文章中，我们进行了需求分析，如下：

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/>改为：
复制代码 代码如下:
<connectionStrings>
<add name="NewsConnection" connectionString="provider=Microsoft.Jet.OLEDB.4.0 ; Data Source=|DataDirectory|\news.mdb;"/>
</connectionStrings>

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

配好web.config文件后，我们开始设计前台。NewsList.aspx页面前台body的代码如下：
复制代码 代码如下:
<body>
<form id="form1" runat="server">
<div>
<div id="tableData">
<table cellpadding="5" cellspacing="1" width="90%" id="productTable" align="center">
<tr>
<th style="width: 60%">
<a style="cursor: pointer;">新闻的标题</a><span id="productid"></span>
</th>
<th style="width: 10%">
<a style="cursor: pointer;">阅读次数</a><span id="UnitPrice"></span>
</th>
<th style="width: 30%">
<a style="cursor: pointer;">发表</a><span id="Discontinued"></span>
</th>
</tr>
</table>
</div>
<div id="pagination" class="digg">
</div>
</div>
</form>
</body>

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

现在，我们来写一些后台代码，尝试着连接数据库。为了简单起见，我把连接数据库的代码写到NewsList.aspx的后台代码及NewsList.aspx.cs中，其实我们在实际的项目中，往往会把数据库操作的那块封装起了，只提供接口。
后台代码如下：
复制代码 代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OleDb;
namespace MyNewsList
{
public partial class NewsList : System.Web.UI.Page
{
//数据库连接字符串
public static string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["NewsConnection"].ToString();
public static OleDbConnection conn;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
TestConnection();//测试连接数据库
}
}
protected void TestConnection()
{
conn = new OleDbConnection(connectionString);//创建新的连接
try
{
conn.Open();
if (conn.State == System.Data.ConnectionState.Open)
{
Response.Write("数据库连接成功");
}
else
{
Response.Write("连接状态是关闭的");
}
}
catch (Exception e)
{
Response.Write("连接失败，错误原因："+e.Message);//如果连接失败将错误显示出来
}
finally
{
conn.Close();//一定要及时关掉conn
}
}
}
}

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

标签：
无刷新,分页,内容预览
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接