自定义WebControls.Panel,让div自由说话
在.Net服务器控件中WebControls.Panel代表了hmtl标签<div></div>,但用起来却很别扭。因为Panel不支持直接输出,感觉很怪异。明明我只要输出一个内容为<div>我要输出一个标签</div>,非要这样写
一般用的时候也就是用Lable替代了,当然Lable的标签是<span></span>,这样和目标就有些差别。其实完全可以重写了Panel控件,自由的在控件中操作div
定义类 MyPanel : Panel
复写的时候一定要writer.Write(this.Text);在前base.RenderContents(writer);在后。
writer.Write(this.Text);是输出文本的,相当于我给他增加了个输出文本的方法。而base.RenderContents(writer);是添加子控件的,删除了也是不行的,除非不绑定子控件了。
现在就只需要简单的代码
MyPanel mp = new MyPanel();
mp.Text = "我要输出一个标签";
就实现了<div>我要输出一个标签</div>这样的输出。
另外一个问题就来了,如果要给这个div定义样式,如果是class还好,设置
mp.CssClass = "my_css_class";就可以了。但是如果界面已经设置的css的样式是 #ouput,那么要求div的标签id名是'ouput'才可以正常实现样式,怎么办?
重写了ClientID属性吧
这样就把客户端的<div>上显示的ID定义成你设置的服务器控件名了。这个时候
MyPanel mp = new MyPanel();
mp.ID = "ouput";
mp.Text = "我要输出一个标签";
显示的效果就是 '<div id="ouput">我要输出一个标签</div>' 了。
如果不想要浏览器里显示的div的ID和服务器控件ID一样,那就自己设置一个。
MyPanel mp = new MyPanel();
mp.setClintID("output");
mp.Text = "我要输出一个标签";
就实现了目标。
Panel p = new Panel();
Literal l = new Literal();
l.Text = "我要输出一个标签";
p.Controls.Add(l);
Literal l = new Literal();
l.Text = "我要输出一个标签";
p.Controls.Add(l);
一般用的时候也就是用Lable替代了,当然Lable的标签是<span></span>,这样和目标就有些差别。其实完全可以重写了Panel控件,自由的在控件中操作div
定义类 MyPanel : Panel
public class MyPanel : Panel
{
private string text;
public virtual string Text
{
get
{
return text;
}
set
{
text = value;
}
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Write(this.Text);
base.RenderContents(writer);
}
}
{
private string text;
public virtual string Text
{
get
{
return text;
}
set
{
text = value;
}
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Write(this.Text);
base.RenderContents(writer);
}
}
复写的时候一定要writer.Write(this.Text);在前base.RenderContents(writer);在后。
writer.Write(this.Text);是输出文本的,相当于我给他增加了个输出文本的方法。而base.RenderContents(writer);是添加子控件的,删除了也是不行的,除非不绑定子控件了。
现在就只需要简单的代码
MyPanel mp = new MyPanel();
mp.Text = "我要输出一个标签";
就实现了<div>我要输出一个标签</div>这样的输出。
另外一个问题就来了,如果要给这个div定义样式,如果是class还好,设置
mp.CssClass = "my_css_class";就可以了。但是如果界面已经设置的css的样式是 #ouput,那么要求div的标签id名是'ouput'才可以正常实现样式,怎么办?
重写了ClientID属性吧
public override string ClientID
{
get
{
return this.ID;
}
}
{
get
{
return this.ID;
}
}
这样就把客户端的<div>上显示的ID定义成你设置的服务器控件名了。这个时候
MyPanel mp = new MyPanel();
mp.ID = "ouput";
mp.Text = "我要输出一个标签";
显示的效果就是 '<div id="ouput">我要输出一个标签</div>' 了。
如果不想要浏览器里显示的div的ID和服务器控件ID一样,那就自己设置一个。
public override string ClientID
{
get
{
if (!string.IsNullOrEmpty(clientid_name))
return clientid_name;
return base.ClientID;
}
}
private string clientid_name;
public void setClientID(string clientid_name)
{
this.clientid_name = clientid_name;
}
{
get
{
if (!string.IsNullOrEmpty(clientid_name))
return clientid_name;
return base.ClientID;
}
}
private string clientid_name;
public void setClientID(string clientid_name)
{
this.clientid_name = clientid_name;
}
MyPanel mp = new MyPanel();
mp.setClintID("output");
mp.Text = "我要输出一个标签";
就实现了目标。