您的位置：首页 > 编程语言 > ASP

asp.net 服务端控件的使用

2016-03-13 17:16 459 查看
前端页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CZBK.ItcastProject.WebApp._2016_03_14.Index" %>

<!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>
<script src="../JS/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
//alert( $('#tb').val());    //服务端控件，转换成html的时候  自动就把尖括号中间的文字变成value属性了  所以用.val()获取
alert($('#<%=tb.ClientID%>').val());//获取客户端Id
});
})
function show() {
alert('客户端注册的单击事件');
}
</script>
<style type="text/css">
.cls {
background-color: yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="tb" OnTextChanged="tb_TextChanged">外部</asp:TextBox>
<%--  服务端控件，转换成html的时候  自动就把尖括号中间的文字变成value属性了  所以用.val()获取--%>

<asp:Button ID="Button1" runat="server" Text="通过客户端Id获取文本框中的值" OnClick="Button1_Click" />

<asp:Button ID="Button2" runat="server" Text="客户端注册的单击事件" OnClientClick="show()" OnClick="Button2_Click" />
<%--OnClientClick表示客户端点击事件，事件写在script里    OnClick表示服务端点击事件，写在服务端cs代码中--%>

<asp:Button ID="Button3" runat="server" Text="服务端OnClick事件向页面输出内容" OnClick="Button3_Click" />
<%--服务端OnClick事件向页面输出内容--%>

<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" AutoPostBack="true" TextMode="Email"></asp:TextBox>
<%--文本框内容改变事件 服务端向页面输出内容   注意要加AutoPostBack属性 有OnTextChanged方法 调用__doPostBack方法 自动提交 TextMode属性可以限制输入文本的内容 --%>
<%--TextMode属性可以限制输入文本的内容 当页面提交的时候 如果格式不对 会给出提示--%>
<%--重新加载页面 所以多次触发事件内容不会叠加--%>

<asp:Label ID="Label1" runat="server" Text="Label" AssociatedControlID="RadioButton1">男</asp:Label>
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="sex" />
<asp:Label ID="Label2" runat="server" Text="Label" AssociatedControlID="RadioButton2">女</asp:Label>
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="sex" />
<%--label和 RadioButton 的配合使用  Label中AssociatedControlID属性用来和RadioButton关联--%>
<%--体现到网页源代码就是 label中的for属性，也可以在html中直接写--%>
<%--RadioButton中GroupName属性用来分组 --%>

<asp:Label ID="Label3" runat="server" Text="Label">没关联的label标签</asp:Label>
<%--没关联的label体现在html中就是span--%>

<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button4" runat="server" Text="上传图片" OnClick="Button4_Click" />
<%--上传图片效果   用FileUpload和Button  会自动在html代码中 添加 enctype属性--%>

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Picture/0.jpg" />
<%-- 带图片的按钮--%>

<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<%--带超链接的按钮，就是个超链接  a标签--%>
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<%--日历控件  点一次  就会调用doPostBack方法--%>

<asp:Button ID="Button5" runat="server" Text="测试Visible属性   CssClass属性" CssClass="cls" Visible="false" />
<%--测试Visible属性  Visible属性设置为false  html代码中就没有这个标签了 而不是隐藏了 和display:none不一样    CssClass属性--%>

<asp:Literal ID="Literal1" runat="server"><a href="http://www.baidu.com">Literal</a></asp:Literal>
<%--Literal标签只是展示一段文本 相当于直接从html中写  其中的标签也会体现出来  只是展示value的值   --%>

<hr />
三种控件的区别
<asp:TextBox ID="TextBox2" runat="server">工具箱拖出来的控件</asp:TextBox>
<%-- 工具箱拖出来的控件--%>
<input type="text" id="txt1" name="name" runat="server" value="带runat=server的控件" />
<%--带runat=server的控件--%>

<input type="text" name="txt2" value="直接写的html控件" />
<%--直接写的html控件--%>

</div>

</form>
</body>
</html>


后端服务器代码

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CZBK.ItcastProject.WebApp._2016_03_14
{
public partial class Index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//三种控件的取值
Response.Write(TextBox2.Text+'.'+txt1.Value+'.'+Request.Form["txt2"]);

//优先级 直接写的html标签  > 带runat=server的html标签 > 工具箱拖出来的控件

}

protected void Button1_Click(object sender, EventArgs e)
{

}

protected void Button2_Click(object sender, EventArgs e)
{

}

protected void tb_TextChanged(object sender, EventArgs e)
{

}
//服务端OnClick事件向页面输出内容
protected void Button3_Click(object sender, EventArgs e)
{
Response.Write("服务端OnClick事件向页面输出的内容");
}
//文本框内容改变事件向页面输出内容
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
Response.Write("文本框内容改变事件向页面输出的内容");
}
//上传图片单击事件
protected void Button4_Click(object sender, EventArgs e)
{
if (this.FileUpload1.HasFile)
{
string fileName = Path.GetFileName(this.FileUpload1.FileName);
string extName = Path.GetExtension(fileName);
if (extName == ".jpg")
{
this.FileUpload1.SaveAs(Request.MapPath("/Picture/"+fileName));
}
}
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  asp.net 控件
相关文章推荐
新的分享
章节导航