带设计器支持的可自定义“加载中”控件， 用于 Web 应用程序

• 下载源代码 - 33.37 KB

介绍 

无论何时发生“页面加载”，向用户显示一些进度指示器都是一个好习惯。这会给用户与网站交互带来良好的感觉。传统上，这是在“页面加载”时编写JavaScript来实现的——但是需要一遍遍地编写相当多的JavaScript代码行。此外，不太了解JavaScript的初学者可能会在实现它时遇到一些困难。而且，在编写传统代码时，句法错误的可能性总是存在的。因此，一个包含所有必要功能的自定义控件将始终为我们节省一些时间！

这是一个完全可自定义的控件，只需从工具箱中拖放即可使用。它包含设计时支持、工具箱支持和属性浏览器支持。还可以根据具体需要扩展或限制功能。

背景

在处理过去几个项目时，在页面加载期间，我们被要求在屏幕上显示某个指示器或信息消息，以便提供良好的用户体验。为了实现这一点，我们过去常常采用在页面加载时添加JavaScript的传统方法。然后，我想创建一个执行相同操作的自定义控件，这样我就无需重复我的脚本并为每个页面一遍遍地编写相关的代码。此外，拥有自定义和设计时支持将是一个优势！

Using the Code

从使用的角度来看，只需要从工具箱中拖放控件即可。用户特定的属性可以在设计时或运行时设置。因此，默认情况下，不需要进行任何代码更改或实现。为控件添加了设计时标记，用于其设计时外观，使其在Web窗体设计器中清晰可见。

 // Just drag and drop
 <CustomControl:Loading ID="Loading1" runat="server" />

这就是控件的打包方式。它利用了控件的两个事件

// Custom Controls Constructor
// Binding of event handlers for processing
this.Init += new EventHandler(Loading_Init);
this.Load += new EventHandler(Loading_Load);

页面生命周期开始后，“加载”控件在其Init事件中形成并显示给用户

// JavaScript injected to use in order to show/hide the control
private string _UtilityScripts = "<SCRIPT LANGUAGE='JavaScript'>
if(document.getElementById){var isLoaded = true;} 
function ShowObject(obj){if (isLoaded){obj.style.display = 'block';}} 
function HideObject(obj){if (isLoaded){obj.style.display = 'none';}}
</SCRIPT>";

private void Loading_Init(object sender, EventArgs e)
{  
    //.... 
    WebControl tempWC = sender as WebControl;  
     
    //Loading control is displayed to the user while page loads
    tempWC.Page.Response.Write(_UtilityScripts + loadingDiv);
    tempWC.Page.Response.Flush(); 
      
    //.... 
}

在显示之前，代码隐藏中设置了控件的字体装饰和其他各种属性。页面加载完成后，通过在控件的Load事件执行期间注入JavaScript来隐藏控件。

// JavaScript injected to hide the control
private string _HideDiv = "<SCRIPT LANGUAGE='JavaScript'> 
var divLoadObject = document.getElementById(\"{0}\");
HideObject(divLoadObject);</script>"; 
  
private void Loading_Load(object sender, EventArgs e)
{ 
     //.... 
     WebControl tempWC = sender as WebControl;
     tempWC.Page.Response.Write(string.Format(_HideDiv, "loadingScreen"));
     //.... 
}

对控件进行了额外更改以使其支持AJAX。因此，基于AJAX的网站也可以毫无障碍地使用它。

// Example codes embedded 
// For making the control AJAX enabled
 ScriptManager currPageScriptManager = 
	ScriptManager.GetCurrent(Page) as ScriptManager;
 if (currPageScriptManager != null)
        _IsAsyncPostBack = currPageScriptManager.IsInAsyncPostBack; 

// Controls property '_IsAsyncPostBack' is used to handle the Async scenarios

自定义支持各种样式和对齐方式。根据用户设置的属性（或默认属性），控件加载并显示在网页上。这就是使其工作所需的一切。现在，让我们来看一下各种支持，这些支持使控件更易于用户使用。为了支持这些功能，添加了一个设计器类，该类重写了一些方法和属性。

1. 设计器支持：在Web窗体编辑器的设计视图中可见的界面。

2. 设计视图中的属性浏览器支持：与属性关联的类型。

3. 工具箱支持：用于从Visual Studio .NET工具箱中拖放控件。

控件支持的属性

• LoadingText - 获取或设置控件显示时要显示的文本
• LoadingImagePath - 获取或设置要在控件中显示的图像的图像路径
• HorizontalAlignment - 获取或设置控件在网页中的水平对齐方式
• VerticalAlignment - 获取或设置控件在网页中的垂直对齐方式
• TextVAlignment - 获取或设置控件中文本的垂直对齐方式
• TextLocation - 获取或设置控件中相对于图像的文本位置

这就完成了“加载”自定义控件的制作。可以自定义要显示的文本、要使用的图像，将字体样式应用于文本，并根据各种水平/垂直对齐方式在网页上显示控件。

最初我在VS2008中制作了它，但考虑到希望在VS2005 Web项目中使用它的用户，我将其移植到了VS2005。可以成功地将它升级到VS2008而不会出现任何错误。

关注点

这是一次不同的开发体验——我专门学习了设计时支持，以及在属性浏览器窗口中公开选定的控件属性。

历史

• 2010年1月7日：初始版本