本文主要是介绍Web网络编程第七次试验：Ajax，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Web网络编程第七次试验：Ajax
- 前言
- 一、实验目的
- 二、实验环境
- 三、实验内容
- 四、代码及截图
- 五、实验总结
前言
为了帮助同学们完成痛苦的实验课程设计，本作者将其作出的实验结果及代码贴至CSDN中，供同学们学习参考。如有不足或描述不完善之处，敬请各位指出，欢迎各位的斧正！
一、实验目的
1．掌握在网站中创建ASP.NET AJAX程序；
2．熟练掌握ScriptManager控件和UpdatePanel控件的使用；
3．掌握Timer控件和UpdateProgress控件的用法。
二、实验环境
Visual Studio 2019 ASP.Net Framework
三、实验内容
1、修改实验6设计的母版页，从而实现页面局部刷新的效果。要求使MyPetShop应用程序的页面可以局部刷新。
2、设计并实现能自动显示下一个商品的首页。浏览效果如图1所示。在图1中，若选中“3秒后显示下一个商品”复选框，则过3秒后自动显示下一个商品。当显示完数据表中的所有商品后，重新从第一个商品开始显示。
图1 能自动显示下一个商品的首页浏览效果
3、设计并实现利用UpdateProgress控件显示任务的完成情况。要求在单击图1中的“下一页”链接时，能显示如图2所示的任务完成进度信息。
图2 UpdateProgress控件效果
四、代码及截图
1.修改母版页MasterPage.master
MasterPage.master源代码如下：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder><link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" /><link href="Styles/Style.css" rel="stylesheet" type="text/css" />
</head>
<body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><header class="header"><asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/logo.gif" /><ul class="nav nav-pills"><li class="navDark"><asp:LinkButton ID="lnkbtnDefault" runat="server" CausesValidation="False" ForeColor="White" PostBackUrl="~/Default.aspx">首页</asp:LinkButton></li><li class="navDark"><asp:LinkButton ID="lnkbtnRegister" runat="server" CausesValidation="False" ForeColor="White" OnClick="LnkbtnRegister_Click" >注册</asp:LinkButton></li><li class="navDark"><asp:LinkButton ID="lnkbtnLogin" runat="server" CausesValidation="False" ForeColor="White" OnClick="LnkbtnLogin_Click" >登录</asp:LinkButton></li><li class="navDark"><asp:LinkButton ID="lnkbtnCart" runat="server" CausesValidation="False" ForeColor="White" >购物车</asp:LinkButton></li><li class="navDark"><asp:LinkButton ID="lnkbtnSiteMap" runat="server" CausesValidation="False" ForeColor="White" PostBackUrl="~/SiteMapTest.aspx">网站地图</asp:LinkButton></li></ul><div class="status"><asp:Label ID="lblWelcome" runat="server" Text="您还未登录！"></asp:Label><asp:LinkButton ID="lnkbtnPwd" runat="server" CausesValidation="False" ForeColor="White" Visible="False" PostBackUrl="~/ChangePwd.aspx">密码修改</asp:LinkButton><asp:LinkButton ID="lnkbtnManage" runat="server" ForeColor="White" Visible="False" PostBackUrl="~/Admin/Default.aspx">系统管理</asp:LinkButton><asp:LinkButton ID="lnkbtnOrder" runat="server" CausesValidation="False" ForeColor="White" Visible="False" PostBackUrl="~/OrderList.aspx">购物记录</asp:LinkButton><asp:LinkButton ID="lnkbtnLogout" runat="server" CausesValidation="False" ForeColor="White" Visible="False" OnClick="LnkbtnLogout_Click" >退出登录</asp:LinkButton></div></header><nav class="sitemap">您的位置： <asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath></nav><section class="mainbody"><div class="leftside"><asp:ContentPlaceHolder ID="cphLeft" runat="server"></asp:ContentPlaceHolder></div><div class="rightside"><asp:ContentPlaceHolder ID="cphRight" runat="server"></asp:ContentPlaceHolder></div><%-- 下面div元素左右两侧均不允许其他浮动元素，并显示分割线 --%><div class="clear"></div></section><footer class="footer">Copyright 2018 MyPetShop</footer></form>
</body>
</html>
其设计界面如下：
MasterPage.master.cs设计如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class MasterPage : System.Web.UI.MasterPage
{protected void Page_Load(object sender, EventArgs e){if (Session["CustomerId"] != null) //一般用户登录{lblWelcome.Text = "您好，" + Session["CustomerName"].ToString();lnkbtnPwd.Visible = true;lnkbtnOrder.Visible = true;lnkbtnLogout.Visible = true;}}protected void LnkbtnRegister_Click(object sender, EventArgs e){Session.Clear(); //注销当前用户Response.Redirect("~/NewUser.aspx");}protected void LnkbtnLogin_Click(object sender, EventArgs e){Session.Clear(); //注销当前用户Response.Redirect("~/Login.aspx");}protected void LnkbtnLogout_Click(object sender, EventArgs e){Session.Clear(); //注销当前用户Response.Redirect("~/Default.aspx");}
}
2.Default.aspx源代码设计如下：
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Src="~/UserControl/Category.ascx" TagPrefix="ucl" TagName="Category" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphLeft" runat="Server"><ucl:Category runat="server" ID="Category" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphRight" runat="Server"><asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"><ProgressTemplate>正在连接数据库服务器，请耐心等待……</ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:Timer ID="tmrAutoShow" runat="server" Interval="3000" OnTick="TmrAutoShow_Tick" Enabled="false"></asp:Timer><asp:GridView ID="gvProduct" runat="server" AllowPaging="True"AutoGenerateColumns="False"PagerSettings-Mode="NextPrevious" PageSize="1" Width="100%"OnPageIndexChanging="GvProduct_PageIndexChanging"><PagerSettings FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PreviousPageText="上一页" Mode="NextPrevious" Position="TopAndBottom" /><Columns><asp:TemplateField><ItemTemplate><table style="border: 1px solid #808080; width: 100%"><tr><td style="text-align: center; border: 1px; vertical-align: middle; width: 40%" rowspan="7"><asp:Image ID="imgProduct" runat="server" ImageUrl='<%# Bind("Image") %>' Height="60px" Width="60px" /></td><td style="border: 1px solid #808080;">商品名称：</td><td style="border: 1px solid #808080;"><asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label></td></tr><tr><td style="border: 1px solid #808080;">商品价格：</td><td style="border: 1px solid #808080;"><asp:Label ID="lblListPrice" runat="server" Text='<%# Bind("ListPrice") %>'></asp:Label></td></tr><tr><td style="border: 1px solid #808080;">商品描述:</td><td style="border: 1px solid #808080;"><asp:Label ID="lblDecsn" runat="server" Text='<%# Bind("Descn") %>'></asp:Label></td></tr><tr><td style="border: 1px solid #808080;">库存：</td><td style="border: 1px solid #808080;"><asp:Label ID="lblQty" runat="server" Text='<%# Bind("Qty") %>'></asp:Label></td></tr></table></ItemTemplate></asp:TemplateField><asp:HyperLinkField DataNavigateUrlFields="ProductId"DataNavigateUrlFormatString="~/ShopCart.aspx?ProductId={0}"HeaderText="放入购物车" Text="购买" /></Columns></asp:GridView><asp:CheckBox ID="chkAutoShow" runat="server" AutoPostBack="true" Text="3秒后显示下一个商品" OnCheckedChanged="ChkAutoShow_CheckedChanged" /></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="tmrAutoShow" EventName="Tick" /></Triggers></asp:UpdatePanel>
</asp:Content>
设计界面如下
Default.aspx.cs设计如下：
using System;
using System.Web.UI.WebControls;
using MyPetShop.BLL;public partial class _Default : System.Web.UI.Page
{ProductService productSrv = new ProductService();protected void Page_Load(object sender, EventArgs e){Bind();}protected void Bind(){gvProduct.DataSource = productSrv.GetAllProduct();gvProduct.DataBind();}protected void GvProduct_PageIndexChanging(object sender, GridViewPageEventArgs e){gvProduct.PageIndex = e.NewPageIndex;Bind();}protected void TmrAutoShow_Tick(object sender, EventArgs e){int newPageindex = gvProduct.PageIndex;if (newPageindex == gvProduct.PageCount - 1)newPageindex = 0;elsenewPageindex += 1;gvProduct.PageIndex = newPageindex;System.Threading.Thread.Sleep(3000);}protected void ChkAutoShow_CheckedChanged(object sender, EventArgs e){tmrAutoShow.Enabled = chkAutoShow.Checked;}
}
运行截图：
登录后界面截图：
单击“下一页”链接时，显示界面如下图：
等待若干秒后，显示界面如下图：
五、实验总结
通过本次实验，我简要掌握了在网站中创建ASP.NET AJAX程序、较为熟练地掌握了ScriptManager控件和UpdatePanel控件的使用、简要掌握了Timer控件和UpdateProgress控件的用法。
这篇关于Web网络编程第七次试验：Ajax的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
