C#-WebForm-简单控件

最新推荐文章于 2024-04-29 15:09:18 发布

weixin_30955617

最新推荐文章于 2024-04-29 15:09:18 发布

阅读量462

点赞数 1

文章标签： c# 前端 ui ViewUI

原文链接：http://www.cnblogs.com/qq450867541/p/6233679.html

版权

在HTML中称“元素”，添加了“runat=‘server’”后称控件，后台服务端可以控制

想要后台改变前端的控件，需要先让后台获取前端控件

常用的简单的表单元素（控件）

==================================================

1、label —— span

label 经过编译后，在HTML中为span

常用属性：

　　★Text：要显示的文字内容 —— <span>要显示的文字内容</span>

　　★CssClass：指向的Class属性

<asp:Label ID="Label1" runat="server" Text="1234" CssClass="aaa"></asp:Label>

网页展示：　　HTML编码：

　　height：高度

　　width：宽度

　　enabled：控件是否启用，但对label无效

　　visible：控件是否可见，编译后无代码

编译前：

        <asp:Label ID="Label1" runat="server" Text="1234" CssClass="aaa" Height="100" Width="100" BackColor="#FF99CC" BorderColor="#FF3300" BorderStyle="Solid" BorderWidth="5"></asp:Label>

编译后：　

<span id="Label1" class="aaa" style="display:inline-block;background-color:#FF99CC;border-color:#FF3300;border-width:5px;border-style:Solid;height:100px;width:100px;">1234</span>

如果有多个相同的label，则会出现代码冗余，影响数据传输

使用<style ></style>

减少代码，减少流量，加快传输

==================================================

2、★★★★★Lateral - 向前端返回代码

Lateral 编译后会把其 text 原封不动的展示出来

常用属性：

　　text：可以是文字，也可以是要执行的代码（李献策lxc）

比如：

<asp:Literal ID="Literal1" runat="server" Text="2016-12-29"></asp:Literal>

网页展示　　编译后

比如：

<asp:Literal ID="Literal1" runat="server" Text="<script>alert('2016年12月29日')</script>"></asp:Literal>

网页展示　　编译后

练习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>
    <style type="text/css">

        .aaa {
            display:inline-block;background-color:#FF99CC;border-color:#FF3300;border-width:5px;border-style:Solid;height:100px;width:100px;
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <%-- <asp:Label ID="Label1" runat="server" Text="1234" CssClass="aaa"></asp:Label> --%>

            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" />

            <asp:Literal ID="Literal1" runat="server" ></asp:Literal>

        </div>
    </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 _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Click += Button1_Click;
    }
    //按钮点击事件
    void Button1_Click(object sender, EventArgs e)
    {
        if (TextBox1.Text.Length > 0)
        {
            Literal1.Text = "<script>alert('内容不为空！');</script>";
        }
        else
        {
            Literal1.Text = "<script>alert('空！');</script>";
        }
    }
}

后台代码

练习2：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Click += Button1_Click;
    }
    //按钮点击事件
    void Button1_Click(object sender, EventArgs e)
    {
        for (int i = 0; i < 20; i++)
        {
            Literal1.Text += "<span class='aaa'>" + i + "</span>";
        }
    }
}

打印多个span

页面展示

编译代码

==============================================================

3、textbox - text、password、textarea

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

属性：

　　★★★TextMode - text模式

　　　　1、默认 SingleLine - 单行文本框，编译后为 type="text"

　　　　2、Password - 密码框，编译后为 type="password"

　　　　3、MultiLine - 文字域，编译后为 <textarea></textarea>

　　　　在设计界面中 textmode 属性有多个，只用前三个

　　maxlength:最大长度，在文本域 <textarea></textarea> 中不起作用

　　readonly：只读属性（李献策lxc）

==============================================================

4、hiddenfield - hidden 隐藏域

<asp:HiddenField ID="HiddenField1" runat="server" />

<input type="hidden" name="HiddenField1" id="HiddenField1" />

==============================================================

5、button - submit 提交

imagebutton - image 提交图片

linkbutton - 超链接模样的按钮，仅控件如此

button、reset - 没有控件对应

编译前

<asp:Button ID="Button1" runat="server" Text="Button" />

<asp:ImageButton ID="ImageButton1" runat="server" />

<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>

编译后

<input type="submit" name="Button1" value="Button" id="Button1" />

<input type="image" name="ImageButton1" id="ImageButton1" src="" />

<a id="LinkButton1" href="javascript:__doPostBack(&#39;LinkButton1&#39;,&#39;&#39;)">LinkButton</a>

button属性：

　　★★★OnClientClick - 在客户端OnClick上执行的客户端脚本

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick='alert("haha")' />

<input type="submit" name="Button1" value="Button" οnclick="alert(&quot;haha&quot;);" id="Button1" />

客户端脚本执行优先级高，即先弹窗再执行其他操作

转载于:https://www.cnblogs.com/qq450867541/p/6233679.html

weixin_30955617

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
C#-WebForm-简单控件

在HTML中称“元素”，添加了“runat=‘server’”后称控件，后台服务端可以控制想要后台改变前端的控件，需要先让后台获取前端控件常用的简单的表单元素（控件）==================================================1、label —— spanlabel 经过编译后，在HTML中为span常用属性：　　★Text...
复制链接

扫一扫