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

最新推荐文章于 2022-04-10 09:53:07 发布

Knight_V_Schumacher

最新推荐文章于 2022-04-10 09:53:07 发布

阅读量581

点赞数

分类专栏： Web网络编程文章标签： c# 前端 html 开发语言

本文链接：https://blog.csdn.net/sjx3161/article/details/123971930

版权

Web网络编程专栏收录该内容

8 篇文章 16 订阅

订阅专栏

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;
        else
            newPageindex += 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控件的用法。

Knight_V_Schumacher

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web网络编程第七次试验：Ajax

数据库第二次试验：数据库的完整性前言前言为了帮助同学们完成痛苦的实验课程设计，本作者将其作出的实验结果及代码贴至CSDN中，供同学们学习参考。如有不足或描述不完善之处，敬请各位指出，欢迎各位的斧正！...
复制链接

扫一扫