zoukankan      html  css  js  c++  java

  • (转)简单自定义控件2

    简单的自定义控件二

    分类： ASP.NET C# 2012-12-20 14:19 173人阅读 评论(0) 收藏 举报

    继上一篇《简单的自定义控件》http://blog.csdn.net/joyhen/article/details/8294951 

    今天我们来改进一下。还是原来的例子，照着修改，Render渲染输出的html

    [csharp] view plaincopyprint?
    1. protected string NewUserLoginControl()  
    2.         {  
    3.             StringBuilder strb = new StringBuilder("");  
    4.             strb.Append("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/" + "/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ");  
    5.             strb.Append("<html xmlns="http:/" + "/www.w3.org/1999/xhtml" > ");  
    6.             strb.Append("<head runat="server"> ");  
    7.             strb.Append("   <title>管理员登录登录</title> ");  
    8.             strb.Append("   <link href="style/login/base.css" rel="stylesheet" type="text/css" /> ");  
    9.             strb.Append("   <link href="style/login/style.css" rel="stylesheet" type="text/css" /> ");  
    10.             strb.Append("   <style type="text/css" id="overridestyle"> ");  
    11.             strb.Append("       body{ background-color:#F2F9FD;}/*#ddd*/#box  .block h2{  background-color:#2275b3;}/*#C66653,#646464*/ ");  
    12.             strb.Append("       .text_field{ height:30px; line-height:30px;  padding-left:5px;} .left{ line-height:30px;} ");  
    13.             strb.Append("   </style> ");  
    14.             strb.Append("   <!--[if lte IE 6]> ");  
    15.             strb.Append("       <script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script> ");  
    16.             strb.Append("       <script type="text/javascript">DD_belatedPNG.fix('.button img');</script> ");  
    17.             strb.Append("       <style type="text/css">.block{border:1px solid #DEEFFA}</style> ");  
    18.             strb.Append("   <![endif]--> ");  
    19.             strb.Append("   <!--[if lte IE 8]> ");  
    20.             strb.Append("       <style type="text/css">.block{border:1px solid #92b2d5}</style> ");  
    21.             strb.Append("   <![endif]--> ");  
    22.             strb.Append("</head> ");  
    23.             strb.Append("<body><%--onkeydown="onEnterDown();"--%> ");  
    24.             strb.Append("   <div id="box"> <div style="height:129px;"></div> ");  
    25.             strb.Append("   <div class="block" id="block-login"> <h2>管理员登录</h2> ");  
    26.             strb.Append("   <div class="content login"> <div class="flash"> ");  
    27.             strb.Append("   <div class="message notice"><p> 请输入正确的用户名和密码</p></div> ");  
    28.             strb.Append("   </div> <form id="form1" class="form login" action="###"> ");  
    29.             strb.Append("   <div class="group wat-cf"> ");  
    30.             strb.Append("       <div class="left"><label class="label right">" + Lbl_UserName + "</label></div> ");  
    31.             strb.Append("       <div class="right"><input type="text" class="text_field"/></div> ");  
    32.             strb.Append("       </div> <div class="group wat-cf"> ");  
    33.             strb.Append("       <div class="left"><label class="label right">" + Lbl_UserPwd + "</label></div> ");  
    34.             strb.Append("       <div class="right"><input type="password" class="text_field"/></div> ");  
    35.             strb.Append("   </div> <div class="group navform wat-cf"><div class="right"> ");  
    36.             strb.Append("   <button class="button"><%--onclick="submit_login();"--%><img src="images/key.png" alt="保存" />登录</button> ");  
    37.             strb.Append("   </div> </div> </form> </div> </div> </div> ");  
    38.             strb.Append("   <%--<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> ");  
    39.             strb.Append("   <script src="js/js_login.js" type="text/javascript"></script> ");  
    40.             strb.Append("   <script type="text/javascript">        $(function() {$("input[type=text]").focus();}) ");  
    41.             strb.Append("       function onEnterDown() {if (window.event.keyCode == 13) {submit_login();}} </script>--%> ");  
    42.             strb.Append("</body> </html>");  
    43.   
    44.             return strb.ToString();  
    45.         }  
    protected string NewUserLoginControl()
        {
            StringBuilder strb = new StringBuilder("");
            strb.Append("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/" + "/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
");
            strb.Append("<html xmlns="http:/" + "/www.w3.org/1999/xhtml" >
");
            strb.Append("<head runat="server">
");
            strb.Append("   <title>管理员登录登录</title>
");
            strb.Append("   <link href="style/login/base.css" rel="stylesheet" type="text/css" />
");
            strb.Append("   <link href="style/login/style.css" rel="stylesheet" type="text/css" />
");
            strb.Append("   <style type="text/css" id="overridestyle">
");
            strb.Append("       body{ background-color:#F2F9FD;}/*#ddd*/#box 
.block h2{  background-color:#2275b3;}/*#C66653,#646464*/
");
            strb.Append("       .text_field{ height:30px; line-height:30px;  padding-left:5px;}
.left{ line-height:30px;}
");
            strb.Append("   </style>
");
            strb.Append("   <!--[if lte IE 6]>
");
            strb.Append("       <script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
");
            strb.Append("       <script type="text/javascript">DD_belatedPNG.fix('.button img');</script>
");
            strb.Append("       <style type="text/css">.block{border:1px solid #DEEFFA}</style>
");
            strb.Append("   <![endif]-->
");
            strb.Append("   <!--[if lte IE 8]>
");
            strb.Append("       <style type="text/css">.block{border:1px solid #92b2d5}</style>
");
            strb.Append("   <![endif]-->
");
            strb.Append("</head>
");
            strb.Append("<body><%--onkeydown="onEnterDown();"--%>
");
            strb.Append("   <div id="box">
<div style="height:129px;"></div>
");
            strb.Append("   <div class="block" id="block-login">
<h2>管理员登录</h2>
");
            strb.Append("   <div class="content login">
<div class="flash">
");
            strb.Append("   <div class="message notice"><p> 请输入正确的用户名和密码</p></div>
");
            strb.Append("   </div>
<form id="form1" class="form login" action="###">
");
            strb.Append("   <div class="group wat-cf">
");
            strb.Append("       <div class="left"><label class="label right">" + Lbl_UserName + "</label></div>
");
            strb.Append("       <div class="right"><input type="text" class="text_field"/></div>
");
            strb.Append("       </div>
<div class="group wat-cf">
");
            strb.Append("       <div class="left"><label class="label right">" + Lbl_UserPwd + "</label></div>
");
            strb.Append("       <div class="right"><input type="password" class="text_field"/></div>
");
            strb.Append("   </div>
<div class="group navform wat-cf"><div class="right">
");
            strb.Append("   <button class="button"><%--onclick="submit_login();"--%><img src="images/key.png" alt="保存" />登录</button>
");
            strb.Append("   </div>
</div>
</form>
</div>
</div>
</div>
");
            strb.Append("   <%--<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
");
            strb.Append("   <script src="js/js_login.js" type="text/javascript"></script>
");
            strb.Append("   <script type="text/javascript">
       $(function() {$("input[type=text]").focus();})
");
            strb.Append("       function onEnterDown() {if (window.event.keyCode == 13) {submit_login();}}
</script>--%>
");
            strb.Append("</body>
</html>");

            return strb.ToString();
        }

    上面有2个参数，是文本框的标题，所有我们要写2个属性
    [csharp] view plaincopyprint?
    1. private string lbl_userName = "用户名:";  
    2.         [System.ComponentModel.Browsable(true)]//在属性窗口中是否可见   
    3.         [System.ComponentModel.Category("Appearance")]//属性的分类，如，行为，外观，大家可以在属性窗口看见这样的分类   
    4.         [System.ComponentModel.DefaultValue("用户名:")]  
    5.         [System.ComponentModel.Description("用户名:")]//这些是显示在属性窗口底下的   
    6.         public virtual string Lbl_UserName  
    7.         {  
    8.             get { return lbl_userName; }  
    9.             set { lbl_userName = value; }  
    10.         }  
    11.   
    12.         private string lbl_userPwd = "密　码:";  
    13.         [System.ComponentModel.Browsable(true)]  
    14.         [System.ComponentModel.Category("Appearance")]  
    15.         [System.ComponentModel.DefaultValue("密　码:")]  
    16.         [System.ComponentModel.Description("密　码:")]  
    17.         public virtual string Lbl_UserPwd  
    18.         {  
    19.             get { return lbl_userPwd; }  
    20.             set { lbl_userPwd = value; }  
    21.         }  
    private string lbl_userName = "用户名:";
        [System.ComponentModel.Browsable(true)]//在属性窗口中是否可见
        [System.ComponentModel.Category("Appearance")]//属性的分类，如，行为，外观，大家可以在属性窗口看见这样的分类
        [System.ComponentModel.DefaultValue("用户名:")]
        [System.ComponentModel.Description("用户名:")]//这些是显示在属性窗口底下的
        public virtual string Lbl_UserName
        {
            get { return lbl_userName; }
            set { lbl_userName = value; }
        }

        private string lbl_userPwd = "密　码:";
        [System.ComponentModel.Browsable(true)]
        [System.ComponentModel.Category("Appearance")]
        [System.ComponentModel.DefaultValue("密　码:")]
        [System.ComponentModel.Description("密　码:")]
        public virtual string Lbl_UserPwd
        {
            get { return lbl_userPwd; }
            set { lbl_userPwd = value; }
        }

    然后我们重写的Render部分这样
    [csharp] view plaincopyprint?
    1. protected override void Render(System.Web.UI.HtmlTextWriter writer)  
    2.         {  
    3.             writer.Write(NewUserLoginControl());  
    4.             base.Render(writer);  
    5.         }  
    protected override void Render(System.Web.UI.HtmlTextWriter writer)
        {
            writer.Write(NewUserLoginControl());
            base.Render(writer);
        }

    好了，重写生成一下CustomerWebControls这个类，然后把web层清理下，重新生成，这时我们把左侧控件箱里的userlogin拖到页面(假如页面是RenderLoginControl.aspx)上

    [html] view plaincopyprint?
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RenderLoginControl.aspx.cs" Inherits="MyWebSiteTest.admin.RenderLoginControl" %>  
    2.   
    3. <%@ Register Assembly="CustomerWebControls" Namespace="CustomerWebControls" TagPrefix="cc1" %>  
    4. <cc1:userlogin runat='server'></cc1:userlogin>  
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RenderLoginControl.aspx.cs" Inherits="MyWebSiteTest.admin.RenderLoginControl" %>

<%@ Register Assembly="CustomerWebControls" Namespace="CustomerWebControls" TagPrefix="cc1" %>
<cc1:userlogin runat='server'></cc1:userlogin>

    再去看看属性窗口

    这就出来效果了。上面其实都是大段的html，根本说不上是用户控件。但是这是个思路，下一篇我们把html全部去掉，只留下基本骨架，也就是2个输入框+2个输入框标题 +  一个按钮，然后我们添加更具体的属性和事件。等待出炉吧
  • 相关阅读:
    反射自动填充model
    source control tool
    项目管理案例分析
    IOC
    js framework
    WPF 难点内容
    WPF MVVM
    NewSQL
    软件部门员工考核
    JavaScript 中级
  • 原文地址：https://www.cnblogs.com/wanshutao/p/3632591.html
Copyright © 2011-2022 走看看