在 web WebControl中,定位用户界面元素

分享于 

6分钟阅读

Web开发

  繁體

介绍

有两种创建可以在 ASP.NET 应用程序中使用的控件的方法。 第一种方法是 UserControl (。ascx ),并且很容易创建,因为可以使用 Visual Studio 定位控件。 缺点是 UserControl s 是不能容易地重用的,因为必须将它们从一个web应用程序复制到另一个web应用程序。 第二种方法是创建 WebControl 在一个单独的DLL中,这些控件更具可移植性,可以添加到你的调色板中。 不过,你不能使用 Visual Studio 来设计它们的拖拉 &。

第一次尝试

因为我个人喜欢重用方面,所以我决定总是创建我的控件作为 WebControl 同时,未来的收益将超过最初的成本。 所以我创建了我的第一个 WebControl 那是一个 下拉列表标签 控件。


using System;


using System.Web.UI;


using System.Web.UI.WebControls;


using System.ComponentModel;



namespace ManyMonkeys.Web.ControlLibrary


{


 /// <summary>


 /// A DropDownList with a named label.


 /// </summary>


 [DefaultProperty("Text"), 


 ToolboxData("<{0}:LabelledDropDownList 


 runat="server"></{0}:LabelledDropDownList>")]


 public class LabelledDropDownList : 


 System.Web.UI.WebControls.DropDownList, INamingContainer


 {


 Label lblHeader = new Label();



 [Bindable(false), 


 Category("Appearance"), 


 DefaultValue("")] 


 public string Text 


 {


 get


 {


 return lblHeader.Text;


 }



 set


 {


 lblHeader.Text = value;


 }


 }



 /// <summary> 


 /// Render this control.


 /// </summary>


 /// <param name="output"> 


 /// The HTML writer to write out to </param>


 protected override void Render(HtmlTextWriter output)


 {


 lblHeader.RenderControl(output);


 output.WriteLine("<br>");


 base.Render(output);


 }


 }


}



然后将它的添加到调色板中,然后拖到窗体上,看起来像这样。

那并不是那么难,是吧? 让我们运行它并在 IE 中查看它。

啊,现在你可以从 上面 WYSISYG看到的不是我们可以使用的术语了,当处理 Visual Studio 时。 但我们怎么修复它?

解决方案

线索是在的位置 下拉列表 控件。它具有样式标记,使它可以在屏幕上的特定位置定位。 但是,在 Visual Studio 中查看时,它们并不是以相同的方式应用的。 要解决这个问题,我们需要将样式标记应用到表示 标签 还有 下拉列表 但是,同时包装两个对象比较容易 标签 还有 下拉列表<div> 标记并将样式应用到它。


/// <summary>


/// Render this control.


/// </summary>


/// <param name="output">


/// The HTML writer to write out to </param>


protected override void Render(HtmlTextWriter output)


{


 // get the styles that we want to apply to the div tag


 output.AddStyleAttribute("LEFT",this.Style["LEFT"]);


 output.AddStyleAttribute("TOP",this.Style["TOP"]);


 output.AddStyleAttribute("POSITION", this.Style["POSITION"]);



 // remove the styles we have already applied


 this.Style.Remove("LEFT");


 this.Style.Remove("TOP");


 this.Style.Remove("POSITION");



 // draw our control


 output.RenderBeginTag("div");


 lblHeader.RenderControl(output);


 output.WriteLine("<br>");


 base.Render(output);


 output.RenderEndTag();


}




现在在 Visual Studio 中查看控件时,它看起来与以前一样,但是当你在 IE 中查看它时,一切都很好。

现在应该注意到你必须打电话 AddStyleAttribute 在开始使用标记进行标记之前 BeginRenderTag ,为了将这些样式应用到它。

结束语

我希望这个小文章能帮助其他开发人员避免我最初创建的悲伤 WebControl 它们不会从创建可以重用的控件中被关闭。 我已经将这个简单的修复添加到我最初创建的许多控件中 UserControl 现在它们都存在于一个库中,我可以应用到许多web应用程序中。 所添加的优势是如果在控件( 通常在客户端JavaScript中) 中找到一个 Bug,我只需在一个位置修复它。

请花一点时间给这篇文章评分。 你的反馈对我很重要。


WEB  pos  webcontrol  
相关文章