网站教学 提纲总结到ajax结束后面还有
Repeater - 重复器
五个模板:
HeaderTemplate - 在最上面,显示一次
FooterTemplate - 最下面,显示一次
ItemTemplate - 在中间,显示n次
AlternatingItemTemplate - 在中间,显示n次
SeperatorTemplate - - 在中间,显示n次
思路:
1.在aspx中,设置Repeater的模板。<%# Eval("属性名/列名")%>
2.在aspx.cs中设置Repeater的数据源。
数据展示:
一、Eval()的格式化显示
Eval("属性名/列名")
Eval("属性名/列名","格式化字符串")
格式化字符串:
日期型:yyyy-年,MM-月,dd-日,hh- mm- ss-
数值型:0-必须有值,没有则填0被位。 #-有就显示,没有就不显示。 <%# Eval("Price","{0:#.00}")%>
二、数据处理与外观展示
法一:在aspx.cs中定义一个public返回string的方法。在Repeater模板中使用<%# 方法名()%>调用方法。
1.定义方法
public string ShowNationName()
{
string nationCode = Eval("Nation").ToString();
var query = _Context.Nation.Where(p=>p.Code == nationCode);
if (query.Count() > 0)
{
return query.First().Name;
}
else
{
return "";
}
}
2.调用
<td align="center"><%# ShowNationName() %></td>
法二:扩展属性
1.定义一个partial类,在这个partial类中,扩展要显示出来的属性
2.在Repeater模板中,<%# Eval("扩展属性")%>
一、Label控件(类)
属性:
(一)布局:
Width: 既可用像素,也可用百分比 类型:Unit
Height:既可用像素,也可用百分比 类型:Unit Unit.Pixel(像素数) Unit.Percentage(百分比数)
(二)背景与前景
BackColor:(Color)背景色
ForeColor:(Color)文字色
Font
Name:字体名称
Size:字体大小
Bold:字体加粗
Italic:字体倾斜
UnderLine:字体加下划线
(三)边框
BorderColor:边框颜色
BorderStyle:边框样式
BorderWidth:边框宽度
(四)其它:
Text - 标签文字
Visable=是否可见
Enabled-是否可用。
CssClass - 样式表中的class
二、Literal:标签:
Text - 标签上的文字
Visible - 是否可见
三、文本框TextBox
拥有Label的所有属性。
TextMode - 文本框的类型。
SingleLine-单行
Multiline-多行
Password-密码
ReadOnly - 是否只读
MaxLength-最大输入的字符串
四、Button,按钮
拥有Label的所有属性。
OnClientClick-- 按钮点击时要执的JS脚本。
五、LinkButton超链接按钮。
拥有Label的所有属性。
OnClientClick-- 按钮点击时要执的JS脚本。
六、ImageButton图片按钮。
拥有Label的所有属性。
OnClientClick-- 按钮点击时要执的JS脚本。
ImageUrl-图片路径。
复合控件
DropDownList:下拉列表
ListBox:多行文本框
RadioButtonList:单选按钮
CheckBoxList:复选按钮
三大功能:
一.把数据填进去。
(一)可视化
(二)代码
1.循环数据,逐项添加
a.循环查出来的集合。
b.每次循环造一个ListItem对象。
c.把ListItem对象加到Items集合中去。
2.数据绑定。
a.把查出来的集合赋给DataSource属性。
b.设置DataTextField,DataValueField
c.调用DataBind()
(三)属性和方法
Items
DataSource :绑定查询
DataTextField:绑定前端显示
DataValueField :绑定后端显示的value值
DataBind(): 绑定关闭或者是结束
AppendDataBoundItem
(四)技巧:
添加“请选择”项
二.把选中的取出来。
(一)前提:在Page_Load中加上if(!IsPostBack){}
(二)使用属性取
SelectedValue,SelectedItem,SelectecIndex
(三)遍历取
1.遍历列表中的每一项。Items集合。
2.在循环中判断每一项的Selected属性。li.Selected==true
3.取出选中项的值。li.Value,li.Text;
(四)属性及方法
SelectedValue
SelectedItem
SelectedIndex
(五)技巧:
防止每次执行都会出现:总是取出第一项,列表中的数据每次会增加
三.设定某项为选中项。
(一)使用属性设置
SelectedValue,SelectedIndex
(二)遍历设置
1.遍历列表中的每一项。Items集合。
2.判断每一项的值是不是要设为选中的项的值。li.Value == ""
3.给每一项的Selected赋值。li.Selected=true;
个性化的属性:
ListBox
SelectionMode=Single/Multiple
RadioButtonList/CheckBoxList
RepeatDirection -- 布局方向
RepeatLayout - 使用Table布局还是Flow布局
RepeatColumns - 一行显示几列
下拉列表联动:
1.编写三个方法,用来填充三个下拉列表。
2.调用三个方法
a.在Page_Load中调用。
注意: 1.要加if(!IsPostBack){}.2.调用的先后次序。
b.在列表的事件中调用。
注意: 1.调用哪几个方法。第一级调后两级的填充。第二级调用每三级填充。
2.要设置下拉列表的自动提交。AutoPostBack
修改界面要做三件事:
1.添加民族。
2.查出这个人的信息,送到相应的控件中。
3.编写更新代码,送回数据库,跳转页面
验证:
一、非空验证 RequiredFieldValidator
ErrorMessage - 验证出错后的提示信息
ControlToValidate - 要验证的控件的ID
Display - 显示方式。Static-不显示也占空间。Dynamic-不显示不占空间
InitialValue - 验证的初始值,被验证控件的值与此值相同的话,就认为是空
场景:
(一)填没填
(二)初始值变没变:通过设置InitialValue来实现
二、对比验证 CompareValidator
ErrorMessage - 验证出错后的提示信息
ControlToValidate - 要验证的控件的ID
Display - 显示方式。Static-不显示也占空间。Dynamic-不显示不占空间
ControlToCompare - 要对比的控件的ID
ValueToCompare - 要对比的值
Operator - 对比的运算符
Type - 输入的对比类型
场景:
1.两个控件的值进行对比。
2.控件输入的值和固定值进行对比
三、范围验证 RangeValidator
ErrorMessage - 验证出错后的提示信息
ControlToValidate - 要验证的控件的ID
Display - 显示方式。Static-不显示也占空间。Dynamic-不显示不占空间
MaximumValue - 范围的上限
MinimumValue - 范围的下限
Type - 类型
四、正则表达式验证 RegularExpressionValidator
ErrorMessage - 验证出错后的提示信息
ControlToValidate - 要验证的控件的ID
Display - 显示方式。Static-不显示也占空间。Dynamic-不显示不占空间
ValidationExpression - 验证表达式
五、验证汇总 ValidationSummary
ShowMessageBox - 是否以对话框的形式显示汇总的错误信息
ShowSummary - 是否在页面上显示汇总的错误信息
六、自定义验证
ErrorMessage - 验证出错后的提示信息
ControlToValidate - 要验证的控件的ID
Display - 显示方式。Static-不显示也占空间。Dynamic-不显示不占空间
ClientValidationFunction - 客户端验证函数的函数名。(不要加括号)
客户端验证函数的规范:
function 函数名(事件源,事件数据)
{
事件数据.Value -- 要被给证的值。该验证控件所要验证的那个输入框中的值。
事件数据.IsValid -- 告诉验证控件,验证是否通过。
}
function zhiShu(a, b) { //a-事件源,b-事件数据
//步骤
//1.把要被验证的值取出来。
var s = b.Value;
//2.进行验证
var isOK = false;
if (isNaN(s) == false) { //首先要看是不是个数字
var zc = 0;
var num = parseInt(s);
for (var i = 1; i <= num; i++) { //从1开始到数值本身,挨个整除,如果能被整除就记录一下zc++;
if (num % i == 0) {
zc++;
}
}
if (zc == 2) {
isOK = true;
}
else {
isOK = false;
}
}
else {
isOK = false;
}
//3.告诉验证控件是否验证通过。
b.IsValid = isOK;
}
两个应用技巧:
1.防止按钮激发验证控件。
默认情况下,3类按钮都会激发验证。
如果不想激发验证:给按钮的CauseValidation=false
2.验证分组的问题。
把输入控件(文本框,单选,多选)、验证控件(非空,对比,范围,正则,自定义,汇总)、按钮的ValidationGroup属性设成相同的值。它们就变成一组了。
文件上传
控件:
FileUpload - 控件,界面+方法+属性
Button/LinkButton/ImageButton
FileUpload控件:
1.SaveAs("要上传到服务器的绝对路径") 方法:上传文件。
般需要使用Server.MapPath()进行相对路径与绝对路径之间的转换。
2.FileName属性:要上传文件的绝文件名,不带路径。
3.FileBytes属性:上传文件的内容,即二进制数据。
场景:
一、单文件上传到服务器硬盘
最简单的上传:
string path = Server.MapPath( "uploads/aaa.txt"); //需要路径映射
FileUpload1.SaveAs(path);
问题:所有上传文件都叫aaa.txt。如何保持文件原有的名子?
优化一:使用FileUpload的FileName属性,获取出上传文件的客户端的名子。
string fileName = FileUpload1.FileName; //取得文件上传之间在客户端的名子。
string path = Server.MapPath("uploads/" + fileName);
FileUpload1.SaveAs(path);
问题:如果不同用户上传同一文件名的文件,如何避免覆盖?
优化二:不同用户,在同是时间传相同的文件名。
在文件名中使用用户名加以区分:
string fileName = DateTime.Now.ToString("yyyyMMddhhmmss") +Session["user"].ToString() + FileUpload1.FileName; //取得文件上传之间在客户端的名子。
string path = Server.MapPath("uploads/" + fileName);
FileUpload1.SaveAs(path);
问题:上传文件大于4M就会报错。 //默认上传文件的最大大小是4096K
优化三:扩容。
在Web.Config中配置上传请求的最大长度。
<system.web>
<httpRuntime maxRequestLength="40960"/> //默认是4096
</system.web>
作业:回去查找资源:C#如何上传大文件?
二、多文件上传到服务器硬盘
(一)简单实现:
思路:遍历页面Form中的每个控件,判断是否是FileUpload,如果是的话就把它强制转化为FileUpload类型,再按单文件上传逐个上传即可。
int i = 1; //上传文件的流水号
foreach (Control ctrl in this.form1.Controls) //遍历Form中的每个控件
{
if (ctrl is FileUpload) //看一下ctrl 对象是不是FileUpload类型
{
FileUpload file = (FileUpload)ctrl; //强制转化为FileUpload类型
//单文件上传的代码
string fileName = DateTime.Now.ToString("yyyyMMddhhmmssms") +i.ToString("0000") + file.FileName;
string path = Server.MapPath("uploads/" + fileName);
file.SaveAs(path);
i++;
}
}
问题:没有选择上传文件的也会在服务器端生成一个0k的文件。
(二)优化:把没有选择上传文件的给跳过去.
int i = 1;
foreach (Control ctrl in this.form1.Controls)
{
if (ctrl is FileUpload) //看一下ctrl 对象是不是FileUpload类型
{
FileUpload file = (FileUpload)ctrl;
if (file.HasFile) //判断每个控件中是否选择了上传的文件。
{
string fileName = DateTime.Now.ToString("yyyyMMddhhmmssms") + i.ToString("0000") + file.FileName;
string path = Server.MapPath("uploads/" + fileName);
file.SaveAs(path);
i++;
}
}
}
三、上传文件到数据库的Image字段
第一步:把文件的二进制数据取出来。FileUpload1.FileBytes (byte[])
第二步:送到数据库中去。 //ADO.NET或Linq2Sql
四、从数据库中的Image字段中取出来,显示在页面上。
1.选做一个显示图片的页面。例如:ShowPic.aspx.
这个页面根据传来的主键值,查询出图片数据,并Response.OutputStream显示在界面。
protected void Page_Load(object sender, EventArgs e)
{
if (Request["id"] != null)
{
string index = Request["id"].ToString();
//主要做是:
//1.读取某一条Photo表的数据记录。
var query = _Context.Photo.Where(p => p.Ids.ToString() == index);
Photo data = query.First();
byte[] pic = data.Content.ToArray();
//2.把二进制数据直接输出到界面上。
Response.OutputStream.Write(pic, 0, pic.Length); //向输出流里输出二进制数据
Response.End();
}
}
2.在另一个界面上,放一个Image控件,让该Image控件的ImageUrl指向上面的那个页面,并传指定的值过去。
HTML代码:
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="显示" />
<br />
<asp:Image ID="Image1" runat="server" />
C#代码:
//填充下拉列表.略
//“显示”按钮上的代码
protected void Button1_Click(object sender, EventArgs e)
{
Image1.ImageUrl = "ShowPic.aspx?id=" + DropDownList1.SelectedValue;
}
如何做验证吗?
思路:
1.也是需要两个页面。一个页面是用来画验证码的;另外一个页面是用来展现文本框和验证验的。
2.使用画图技术中的知识点,画随机数图片。随机数需要事选保存在Session中,检查验证码是否正确就要使用session中的值进行对比。
3.点击验证码刷新如何实现?
function dochange(img) {
var temp = Math.random(); //JS生成随机数的代码。
img.setAttribute("src","yzm.aspx?id="+temp);
}
作业:找C#生成验证码的代码。
JQuery
一、语法的基本结构:
第一步:导入JQuery脚本包。
第二步:写JQuery的ready事件
$(document).ready(function(){
//在这里面写代码。
});
注意:
1.JQuery的触发时机。。。。。。。。。
2.非侵入性的编码方式。
3.链式结构的编码方式。
4.集合式操作。操作选择器选择出来的一组对象。
二、具体语法
(一)找到元素
选择器的种类:同样式表(CSS3.0)
第一类:基本选择器
1.最最基本的:标签,ID选择器,class选择器
2.组合选择器:空格(后代),逗号,标签名.class,> (子级选择器)
第二类: 过虑选择器
1.基本过滤(按照HTML标记的书写顺序来过滤)
:first - 第一个
:last - 最后一个
:eq(索引号) - 任意一个
:lt(索引号) - 小于某个索引号
:gt(索引号) - 大于某个索引号
:odd - 奇数个
:even - 偶数个
:not(选择器) - 排除
2.属性过滤
[属性名] - 选择拥有这个属性的元素
[属性名=值] - 找属性名是某个值的
[属性名!=值]
[属性名*=值] - 属性值中包含某个值
[属性名^=值] 属性值是以..开头
[属性名$=值] 属性值是...结尾
3.内容过滤
:has(选择器) - 开始与结束标记之间是否包含某类子元素,如果包含,就选择出来。
:contains(字符串) - 开始与结束标记之间是否包含某段文字,如何包含就选择出来。
(二)DOM操作
1.操作元素本身
操作属性,操作样式,操作内容
(1)操作属性:
a.获取属性值:var s = xxx.attr("属性名");
b.添加属性:attr("属性名","属性值")
c.移除属性:removeAttr("属性名")
(2)操作样式:
1).操作样式的class选择器
addClass("class选择器的名")
removeClass("class选择器的名")
toggleClass("class选择器的名") 切换样式
2).操作内联样式
css("样式名") 获得样式值
css("样式名","样式值") 设置和替换样式
(3)操作内容
1)表单元素:
取值:var s = xxxx.val()
赋值:xxx.val("值")
2)非表单元素:
取值:var s = xxx.html(); var s = xxx.text();
赋值:xxx.html("值");xxx.text("值")
<textarea>dsfasdfasdf</textarea>
2.操作相关元素
找相关元素:父、子、兄弟、前、后
操作相关元素:添加、复制、删除、替换
(三)事件与动画
(四)Ajax异步通信
DOM操作
操作相关元素:
里:children(),find("选择器")
外:parent(),parents("选择器")
下:next(),nextAll(选择器)
上:prev(),prevAll("选择器")
附加:集合操作
first(),last(),eq(n)
元素的添加、复制、替换、移除
添加:append(元素对象),prepend(元素对象),after(元素对象),before(元素对象)
复制:clone()
移除:
清空 empty() - 保留外围的元素,把子元素和内容全都清除掉。
移除 remove() - 把元素全都删除。
替换:
使用JQuery实现Ajax效果
一、结构:
两块代码:服务端代码,客户端代码(发请求之前的代码-主调代码,发请求之后的代码-回调代码)。
一般来说,我们要先写服务端,再写客户。客户代码,先写主调,再写回调。
问题:如何解决跨语言的数据交换?——XML 可扩展的标记语言。
附加:XML语言
是什么东西? - 文本格式数据载体。
语法注意:
1. 标签自定义一般是双标签。单标签一定要以/>结尾
2.大小写敏感。
3.只能有一个根元素。
(一)服务端代码:
//第一步:获取传来的数据
//第二步:处理数据生成结果
//第三步:Response写入XML字符串
(二)客户端代码
$.ajax({
url:"要调用服务端的路径",
data:{key:value,key:value},
type:"POST",
dataType:"XML",
beforeSend:function(data){
//提交服务器之前触发,通常用来在这个地方显示加载动画
},
success:function(data){ //data代表服务端返回来的数据xml
//解析XML:解析服务端返回来的XML数据
//显示HTML:在页面上把解析出来的XML内容显示出来。
},
error:function(data){
//服务器端执行出错。
},
complete:function(data){
//不管成功还是失败,总会走这里。
}
});
举例:
一、返回简单数据
1.不需要提供请求数据
2.需要提供请求数据
二、返回复杂数据
1.不需要提供请求数据
2.需要提供请求数据
(一)返回对象
(二)返回集合
作业:使用Ajax实现数据删除
一、.ashx文件
1.获取要删除的主键值
2.执行删除
3.输出XML <?xml version='1.0'?><root>true</root>
二、.aspx文件
(一)HTML
使用Repeater显示数据
删除按钮可以使用超链接来做(也可使用button/submit),class="del"
(二)JQuery
给每个删除按钮加上click事件。$(".del").click(function(){});
var tr = $(this).parents("tr"); //在主调中找到当前删聊按钮所在的行。
主调:在每个click事件中,调用ajax向.ashx发请求删除数据。
回调:解析返回xml文件,跟返回true/false.删除指向的table行。 注意:回调函数中不能用this
var isOK = $(data).find("root").text();
if(isOK == true)
{
$(tr).remove();
}
网站教学 提纲总结到ajax结束后面还有的更多相关文章
- ASP.NET动态网站制作(26)-- Ajax
前言:这节课讲解关于Ajax的相关内容. 内容: 1.当点击页面中的一个按钮提交数据或请求数据的时候,整个页面的信息都会提交(不管信息是否是提交或者请求的数据,页面中所有的数据都提交),这样耗用的时间 ...
- Java-如何挖取某个网站中的ajax请求信息
通常情况,通过网络爬虫挖取到的基本为网页静态内容,而动态ajax取数的内容是我个人暂时不知如何一次性把网站中的ajax获取 这里介绍的是某个网站中的某一个ajax多某个table刷新,期数据,并提供其 ...
- 掌握 Ajax,第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- JavaScript学习总结【12】、JS AJAX应用
1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...
- jQuery基础---Ajax基础教程
jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...
- c# http请求ajax页面
我们在用Http请求的时候,某些页面是ajax加载的,所以请求过来的页面数据不完整.也就是说ajax局部加载数据的地方,我们请求不到,这时候该怎么办呢? WebDriver+phantomjs 这两个 ...
- jQuery基础---Ajax基础
内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 发文不易, ...
- 一文搞懂Ajax,附Ajax面试题
目录 前言 正文 Ajax是什么东西? 实现核心/工作原理:XMLHttpRequest对象 XMLHttpRequest大致用法 创建XMLHttpRequest对象 发送请求 服务器响应 1. r ...
- jQuery源码分析系列(31) : Ajax deferred实现
AJAX的底层实现都是浏览器提供的,所以任何基于api上面的框架或者库,都只是说对于功能的灵活与兼容维护性做出最优的扩展 ajax请求的流程: 1.通过 new XMLHttpRequest 或其它的 ...
随机推荐
- VS2010 ,工程文件减肥
写一个bat文件来清理VS2010工程文件. 将其放入到工程文件夹下,双击即可自动将sdf,ipch等占用空间很大的文件删除. 这样的方式较之于转移浏览数据库文件的位置而言更为灵活一些,不用特别的设置 ...
- 一些Xcode 5的使用提示和技巧
摘自:http://www.cocoachina.com/newbie/env/2014/0127/7766.html 感谢论坛成员郭亚鑫的热心翻译. 在iOS开发中,Xcode 是最使用最多的I ...
- android wifi讲解 wifi列表显示
1.怎样获取wifi对象并进行操作 要操作WIFI设备,需要先获取Context.getSystemService(Context.WIFI_SERVICE)来获取WifiManager对象,并通过这 ...
- [C++Boost]程序参数项解析库Program_options使用指南
介绍 程序参数项(program options)是一系列name=value对,program_options 允许程序开发者获得通过命令行(command line)和配置文件(config fi ...
- Ubuntu 安装启动Tomcat
首先下载ubuntu 的tar包 官网: http://tomcat.apache.org/download-80.cgi 安装启动 1 .下载对应的tar 2 .解压任意文件夹下,更改名字tomca ...
- this小记
this小记 太久没有研究底层的js相关,今晚差点被紫红爸爸上课了. 正题 var net=new Object(); //定义一个全局变量net net.AjaxRequest=function(u ...
- cocos2d-x 实现clash of clans多点聚焦缩放场景
猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=434 都是以前写的一些效果,整理 ...
- Android网络:开发浏览器(二)——功能完善之长按网页图片菜单
上述的历史和书签的功能已经实现.不过如果我们长时间按住图片,并不会出现如同UC中的一系列选项,我们可以来看看UC中的长按图片出现的菜单. 图10.2.9 UC中的长按图片菜单 我们可以看到UC中 ...
- (摘录)MSMQ的简单介绍
MSMQ(MicroSoft Message Queue,微软消息队列)是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可以分布于相连的网络空间中的任 ...
- 为 Devops 和系统管理员提供的 400+ 免费资源
014年,谷歌索引的数据量大约为200TB(1T等于1024 GB).而且,据估计,谷歌的200TB只占到整个互联网的0.004%.基本上,互联网是一个拥有无限的信息的地方. 因此,为了努力降低搜索和 ...