Web网络编程第七次试验：Ajax

2023-10-16 05:20
文章标签 web 编程 网络 ajax 试验 第七次

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:https://blog.csdn.net/sjx3161/article/details/123971930
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/219297。

相关文章

python web 开发之Flask中间件与请求处理钩子的最佳实践

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1
阅读更多...
SpringBoot项目Web拦截器使用的多种方式

SpringBoot项目Web拦截器使用的多种方式

《SpringBoot项目Web拦截器使用的多种方式》在SpringBoot应用中,Web拦截器（Interceptor）是一种用于在请求处理的不同阶段执行自定义逻辑的机制,下面给大家介绍Sprin... 目录一、实现 HandlerInterceptor 接口1、创建HandlerInterceptor实
阅读更多...
Linux网络配置之网桥和虚拟网络的配置指南

Linux网络配置之网桥和虚拟网络的配置指南

《Linux网络配置之网桥和虚拟网络的配置指南》这篇文章主要为大家详细介绍了Linux中配置网桥和虚拟网络的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、网桥的配置在linux系统中配置一个新的网桥主要涉及以下几个步骤：1.为yum仓库做准备，安装组件epel-re
阅读更多...
Web技术与Nginx网站环境部署教程

Web技术与Nginx网站环境部署教程

《Web技术与Nginx网站环境部署教程》：本文主要介绍Web技术与Nginx网站环境部署教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Web基础1.域名系统DNS2.Hosts文件3.DNS4.域名注册二.网页与html1.网页概述2.HTML概述3.
阅读更多...
Python使用Reflex构建现代Web应用的完全指南

Python使用Reflex构建现代Web应用的完全指南

《Python使用Reflex构建现代Web应用的完全指南》这篇文章为大家深入介绍了Reflex框架的设计理念,技术特性,项目结构,核心API,实际开发流程以及与其他框架的对比和部署建议,感兴趣的小伙... 目录什么是 ReFlex？为什么选择 Reflex？安装与环境配置构建你的第一个应用核心概念解析组件
阅读更多...
python如何下载网络文件到本地指定文件夹

python如何下载网络文件到本地指定文件夹

《python如何下载网络文件到本地指定文件夹》这篇文章主要为大家详细介绍了python如何实现下载网络文件到本地指定文件夹,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下...  在python中下载文件到本地指定文件夹可以通过以下步骤实现，使用requests库处理HTTP请求，并结合o
阅读更多...
Nginx使用Keepalived部署web集群（高可用高性能负载均衡）实战案例

Nginx使用Keepalived部署web集群（高可用高性能负载均衡）实战案例

《Nginx使用Keepalived部署web集群（高可用高性能负载均衡）实战案例》本文介绍Nginx+Keepalived实现Web集群高可用负载均衡的部署与测试,涵盖架构设计、环境配置、健康检查、... 目录前言一、架构设计二、环境准备三、案例部署配置 前端 Keepalived配置 前端 Nginx
阅读更多...
Linux高并发场景下的网络参数调优实战指南

Linux高并发场景下的网络参数调优实战指南

《Linux高并发场景下的网络参数调优实战指南》在高并发网络服务场景中,Linux内核的默认网络参数往往无法满足需求,导致性能瓶颈、连接超时甚至服务崩溃,本文基于真实案例分析,从参数解读、问题诊断到优... 目录一、问题背景：当并发连接遇上性能瓶颈1.1 案例环境1.2 初始参数分析二、深度诊断：连接状态与
阅读更多...
Python 异步编程 asyncio简介及基本用法

Python 异步编程 asyncio简介及基本用法

《Python异步编程asyncio简介及基本用法》asyncio是Python的一个库,用于编写并发代码,使用协程、任务和Futures来处理I/O密集型和高延迟操作,本文给大家介绍Python... 目录1、asyncio是什么IO密集型任务特征2、怎么用1、基本用法2、关键字 async1、async
阅读更多...
Java并发编程之如何优雅关闭钩子Shutdown Hook

Java并发编程之如何优雅关闭钩子Shutdown Hook

《Java并发编程之如何优雅关闭钩子ShutdownHook》这篇文章主要为大家详细介绍了Java如何实现优雅关闭钩子ShutdownHook,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 目录关闭钩子简介关闭钩子应用场景数据库连接实战演示使用关闭钩子的注意事项开源框架中的关闭钩子机制1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2