1.热点区域
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap1" runat="server" OnClick="ImageMap1_Click" ImageUrl="img/nav_map.png">//图片路径
<asp:RectangleHotSpot Bottom="225" Left="0" Right="225" NavigateUrl="http://www.douyin.com" />//每块热点区域的长度,起始位置和结束位置
<asp:RectangleHotSpot Bottom="225" Left="226" Right="450" NavigateUrl="http://baidu.com" />
<asp:RectangleHotSpot Bottom="225" Left="451" Right="675" NavigateUrl="http://pro.jd.com" />
<asp:RectangleHotSpot Bottom="225" Left="676" Right="900" NavigateUrl="http://iqiyi.com" />
<asp:RectangleHotSpot Bottom="225" Left="901" Right="1125" NavigateUrl="http://4399.com" />
<asp:RectangleHotSpot Bottom="225" Left="1126" Right="1350" NavigateUrl="http://baidu.com" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
2.用户输入框判断
前端代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.auto-style1{width:100%;
align-content:center;
}
.auto-style2 {height:21px;}
.auto-style3 {height:21px;width:93px;}
.auto-style4 {width:93px;}
.auto-style5 {width:135px;height:21px;}
.auto-style6 {width:135px;}
.auto-style7 {
width: 93px;
height: 44px;
}
.auto-style8 {
width: 135px;
height: 44px;
}
.auto-style9 {
height: 44px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="auto-style1">
<tr>
<td class="auto-style3" style="text-align:right">用户名:</td>
<td class="auto-style5">
<asp:TextBox ID="txtName" runat="server" Width="120px"></asp:TextBox>
</td>
<td class="auto-style2">
<asp:RequiredFieldValidator ID="rdvName" runat="server" ErrorMessage="请输入用户名!" ControlToValidate="txtName" Display="Dynamic" SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style4" style="text-align:right">密码:</td>
<td class="auto-style6"><asp:TextBox ID="txtPassword" runat="server" Width="120px" TextMode="Password"></asp:TextBox></td>
<td class="auto-style6">
<asp:RequiredFieldValidator ID="rvfPassword" runat="server" ControlToValidate="txtPassword" Display="Dynamic" ErrorMessage="请输入密码!" SetFocusOnError="true"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td class="auto-style4" style="text-align:right">确认密码:</td>
<td class="auto-style6">
<asp:TextBox ID="txtPasswordAgain" runat="server" TextMode="Password" Width="120px"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="rfvPasswordAgain" runat="server" ErrorMessage="请输入确认密码!" ControlToValidate="txtPasswordAgain" SetFocusOnError="true"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="rvPassword" runat="server" ErrorMessage="密码与确认的密码不一致!" ControlToCompare="txtPassword" ControlToValidate="txtPasswordAgain" Display="Dynamic" SetFocusOnError="true"></asp:CompareValidator>
</td>
</tr>
<tr>
<td class="auto-style7" style="text-align:right">电话号码:</td>
<td class="auto-style8">
<asp:TextBox ID="txtTelephone" runat="server" Width="120px"></asp:TextBox>
</td>
<td class="auto-style9">
<asp:RequiredFieldValidator ID="rvfTelephone" runat="server" ControlToValidate="txtTelephone" Display="Dynamic" ErrorMessage="请输入电话号码" SetFocusOnError="True"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revTelephone" runat="server" ControlToValidate="txtTelephone" Display="Dynamic" ErrorMessage="电话号码格式应为021-66798304!" ValidationExpression="\d{3}-\d{8}" SetFocusOnError="true"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style4" style="text-align:right">性别:</td>
<td>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" Width="148px">
<asp:ListItem Value="女">女</asp:ListItem>
<asp:ListItem>男</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="BtnSubmit" runat="server" OnClick="BtnSubmit_Click" Text="注册" Height="44px" Width="79px" />
<asp:TextBox ID="lblMsg" runat="server" BorderStyle="None"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html>
后端代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void BtnSubmit_Click(object sender, EventArgs e)
{
lblMsg.Text = "";
if(Page.IsValid)
{
lblMsg.Text = "验证通过!";
}
}
}
3.建立数据库和实体模型
建数据库
- 新建文件夹“App_Data”
- 右击文件夹,新建“SQL数据库”,更改具体名称
- 服务器资源管理器----数据连接----表,右击,添加新表
- 根据题目创建具体表格式,可在代码处更改表名
- 表格式确定以后点击左上角更新,保存表格式
- 服务器资源管理器中右击表名,显示表数据,插入表内容
- 插入完后点击右上角刷新,看是否存入
建立实体数据模型
- 新建文件夹“App_Code”
- 右击文件夹,新建“ADO.NET实体数据模型”,更改为MobilePhoneShop
- 一直下一步,在最后数据库包括哪些数据对象时选择刚创建的几个表,然后点击完成
4.显示数据库内容
1.建立一个web窗体,窗体代码如下
2.点击lds控件,配置数据源,选择code中创建的自定义实体模型,完成即可
3.点击gvc控件,选择数据源,下拉列表中选择lds即可
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvCategory" runat="server" AutoGenerateColumns="False" DataSourceID="ldsCotaywda">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Deson" HeaderText="Deson" SortExpression="Deson" />
</Columns>
</asp:GridView>
<asp:LinqDataSource ID="ldsCotaywda" runat="server" TableName="Pet" EntityTypeName="" ContextTypeName="MypetEntities">
</asp:LinqDataSource>
</div>
</form>
</body>
</html>
5.商品信息查询
建立一个新的web窗体
前端代码
<asp:GridView ID="gvCategory" runat="server">
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text="价格降序" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="显示产品名的集合" OnClick="Button2_Click" />
<asp:Button ID="Button3" runat="server" Text="最大值" OnClick="Button3_Click" />
后端代码
protected void Button1_Click(object sender, EventArgs e)//降序排序
{
MypetEntities db = new MypetEntities();//具体实体类
var results = db.Pet.OrderByDescending(p => p.Deson);//根据Deson字段降序
gvCategory.DataSource = results.ToList();
gvCategory.DataBind();
}
protected void Button2_Click(object sender, EventArgs e)//显示名字为mao的集合
{
MypetEntities db = new MypetEntities();
var results = db.Pet.GroupBy(p => p.Name);//设置查找的字段为name
foreach(var g in results)
{
if (g.Key == "mao")//查找的具体名字
{
var results2 = from r in g select r;
gvCategory.DataSource = results2.ToList();
gvCategory.DataBind();
}
}
}
protected void Button3_Click(object sender, EventArgs e)//最大值
{
MypetEntities db = new MypetEntities();
var results = db.Pet.GroupBy(p => p.Id).Select(//通过产品名称分组,所以应该是p.name
g => new
{
Key = g.Key,
Count = g.Count(),//统计每组的数量
MaxDeson=g.Max(p=>p.Deson)//计算Deson列的最大值
});
gvCategory.DataSource = results.ToList();
gvCategory.DataBind();
}