读取页的aspx代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="S6_newsLoad.aspx.cs" Inherits="Sample_code_S6_newsLoad" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../CSS/CSS_NEWS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="div_news">
<asp:ListView ID="lv_newsDetail" runat="server" DataSourceID="ads_news" ItemPlaceholderID="news_holder">
<LayoutTemplate>
<div runat ="server" id="news_holder"></div>
</LayoutTemplate>
<ItemTemplate>
<h1 id="NewsTTL" ><%#Eval("news_title") %></h1>
<p class ="tc">
<span id="NewsDate">日期: <%#Eval("news_date","{0:d}") %></span>
<span id="NewsFrom">来源: <%#Eval("news_from") %></span>
</p>
<div id="newsContent" class ="cke_show_borders">
<%#Eval("news_content") %>
</div>
</ItemTemplate>
</asp:ListView>
<asp:AccessDataSource ID="ads_news" runat="server" DataFile="~/DATA/news.mdb"
SelectCommand="SELECT * FROM [T_NEWS] WHERE ([news_id] = ?)">
<SelectParameters>
<asp:QueryStringParameter DefaultValue="1" Name="news_id"
QueryStringField="nid" Type="Int32" />
</SelectParameters>
</asp:AccessDataSource>
</div>
</form>
</body>
</html>
显示页aspx文件如下：
<%@ Page Title="" Language="C#" MasterPageFile="~/0_MST_ASPNET12.master" AutoEventWireup="true" CodeFile="S6_jQuery_newsLoad.aspx.cs" Inherits="Sample_code_S6_jQuery_newsLoad" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="../CSS/CSS_NEWS.css" rel="stylesheet" type="text/css" />
<script src="../JS/jquery-1.8.3.js" type="text/javascript"></script>
<script type ="text/javascript">
$(document).ready(function () {
$("#btn_load").click(function () {
var s = $("#ddl_newsList").val();//获取选择项的值
var url = "S6_newsLoad.aspx?nid=" + s + " #div_news";
$("#div_newsHoldr").load(url);
});
//1.8 jquery,ajax相关定义在控件级别, 开始时,隐藏HOLDER
$("#div_newsHoldr").ajaxStart(function () {
$(this).fadeTo(0, 0.1);
});
//加载成功,淡入HOLDER 效果
$("#div_newsHoldr").ajaxSuccess(function () {
$(this).fadeTo(500,1);
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPH_memo" Runat="Server">
<p>思路: <br />ddl获取新闻列表 -> 选择新闻 -> 点击htmlButton -> 获取选择的ID值,ajax载入 -> <br />QueryString传值[newsLoad.aspx] -> [newsLoad.aspx]中的ListView读取数据库详细信息 <br />
回应ajax请求,将装载新闻的div层发回 -> 母页的div层中显示传回的内容</p>
<ul>
<li>构建url:<br />
从ddl中获取ID,构建完整url,获取newsLoad.aspx中的#div_news部分;<br />
也可以仅构建QueryString部分,将URL和Query作为2个参数来调用</li>
<li>设置ajaxStart功能代码: 隐藏容器层</li>
<li>设置ajaxSuccess功能代码: 淡入容器层</li>
</ul>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cph_main" Runat="Server">
<div>
<p class ="showtime">页面时间监控:<%=DateTime.Now.ToFileTime() %></p>
<asp:DropDownList ID="ddl_newsList" runat="server" Width="200px" ClientIDMode="Static"
DataSourceID="ads_news" DataTextField="news_title" DataValueField="news_id">
</asp:DropDownList>
<asp:AccessDataSource ID="ads_news" runat="server" DataFile="~/DATA/news.mdb"
SelectCommand="SELECT [news_title], [news_id] FROM [T_NEWS]">
</asp:AccessDataSource>
<input id="btn_load" type="button" value="读取新闻" />
</div>
<%--准备加载新闻的层--%>
<div id="div_newsHoldr" style ="border:1px dotted silver;">
加载新闻的容器
</div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="cph_output" Runat="Server">
</asp:Content>
效果如下：
