asp.net 服务端控件的使用

最新推荐文章于 2019-07-31 16:46:08 发布

zy0421911

最新推荐文章于 2019-07-31 16:46:08 发布

阅读量590

点赞数

分类专栏： ASP.NET 文章标签： asp.net 控件

本文链接：https://blog.csdn.net/zy0421911/article/details/50878895

版权

ASP.NET 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

前端页面代码

<%@ 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));
                }
            }
        }
    }
}