(转)简单自定义控件2

简单的自定义控件二

分类: ASP.NET C# 173人阅读 评论(0) 收藏 举报

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

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

 

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

            return strb.ToString();
        }

上面有2个参数,是文本框的标题,所有我们要写2个属性

 

 

  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部分这样
  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)上

 

  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个输入框标题 +  一个按钮,然后我们添加更具体的属性和事件。等待出炉吧

posted @ 2014-03-29 15:40  wanshutao  阅读(199)  评论(0编辑  收藏  举报