定制的MessageBox ConfirmBox和 ASP.NET web服务的FrameBox控件

分享于 

17分钟阅读

Web开发

  繁體

介绍

本文将介绍针对 ASP.NET web forms的定制 MessageBoxConfirmBoxFrameBox 控件,以及如何在应用程序中使用它们。

背景

我看到许多开发人员在各种技术论坛中询问:

  • 如何从服务器( 代码后面) 中显示消息框?
  • 如何自定义JavaScript确认和通知弹出窗口?
  • 如何在 Windows 应用程序中显示消息框?

这个想法

如你所见,显示弹出消息框一直是web编程中大多数开发人员的痛苦。 在 ASP.NET web forms的上下文中,每个人都可能使用 Page.ClientScript.RegisterStartupScript 或者 ScriptManager.RegisterClientScriptBlock 调用JavaScript通知并确认函数以在网页中显示通用消息框的方法。

之前我使用了一个项目,以前使用了很多弹出消息来提示最终用户基于某些操作。 开始,我仅仅使用 JavaScript alertconfirm 函数提示用户,直到我意识到使用简单的JavaScript alert/confirm 函数使页面 ugly,因为我无法自定义它来符合网页配色方案。 另外,我需要基于不同的操作,如果成功操作发生并使用 JavaScript 警告来显示终端用户。 为了克服这些问题,我可以在页面中创建一个模式面板,应用一些 CSS 来设置消息框的外观和感觉,但这不是一个好方法。 为什么两个主要原因:可维护性和可以重用性。 因为我需要有一个可以跨多个应用程序重用的弹出消息,因这里我决定创建一个复合控件。

主要功能

以下是这些控件的主要功能:

  • 这些控件可以在页面中轻松地提示消息,无论是通过服务器端还是客户端使用。
  • 这些是作为公共控件创建的,可以跨应用程序重用。 这个控件的维护要容易得多,因为它所做的任何更改都会反映到使用它的所有。
  • 这些控件为开发人员提供选择,以选择标准 JavaScript alert/confirm 没有标准的消息类型。 由于这些控件提供用户友好界面,并且每个消息类型都在不同的颜色方案中,因此最终用户可以很容易地识别消息,因此最终用户也受益于。 这些将帮助开发人员在应用程序之间拥有一致的消息框,并为最终用户提供一个有趣的消息框。
  • 控件的最新版本( 版本 4 ) 公开了一些属性,你可以使用这些属性更改外观和感觉。

控制版本和下载位置

这些控件绝对是免费的免费 ! 源代码可以找到,也可以在CodePlex上下载,在CodePlex上。 下面是链接:

以下是下载的可用版本:

请注意 ASP.NET 和AjaxControlToolkit版本。

滚动你自己的版本

如果希望使用不同版本的AjaxControlToolkit,或者你想在. NET 4.5或者. NET 4.6版本中使用它,则可以使用以下方法:

使用控件

MessageBox

MessageBox控件的开销为: 这里控件为开发人员提供了提示,可以提示各种消息类型,例如信息。警告。成功和错误消息类型。 这里控件可以通过服务器端或者客户端调用。 下面是 MessageBox 控件的一些屏幕快照。

控件的积分
  • 下载并提取 ProudMonkey.Common.Controls.dll。
  • 将 ProudMonkey.Common.Controls.dll 和 AjaxControlToolkit.dll 添加到项目解决方案中。
  • 右键单击项目并选择Add引用"。
  • 单击Browse选项卡并找到在步骤 2中指定的两个 dll。
  • 单击确定。
  • 通过在页面顶部的最上方添加下面的行来添加控件。 你也可以在你的web.config 文件中使用 register。 一切 都 将 取决于 你.
<%@Registerassembly="ProudMonkey.Common.Controls"namespace="ProudMonkey.Common.Controls"tagprefix="cc1"%><%@Registerassembly="AjaxControlToolkit"namespace="AjaxControlToolkit"tagprefix="asp"%>
  • 由于 MessageBox 控件使用更高版本的ASP.NET AJAX ( AjaxControlToolkit ),所以一定要使用 ToolkitScriptManager 而不是 ScriptManager。 可以在 AjaxControlToolkit 控件中找到 ToolkitScriptManager
  • 然后,按照如下所示定义 MessageBox 控件:
<cc1:MessageBoxID="MessageBox1"runat="server"/>
  • 那你就可以。 =}
  • 使用MessageBox控件服务器端方法( 代码后面)
MessageBox1.ShowError("Your Message");//Displaying an Error message MessageBox1.ShowWarning("Your Message");//Displaying a Warning message MessageBox1.ShowInfo("Your Message");//Displaying an Information message MessageBox1.ShowSuccess("Your Message");//Displaying a Successful message

使用代码 上面,你可以显示消息框,它的默认大小为 [H(125px) and W(300px)]。 请注意,大小是像素格式。 如果要手动设置 MessageBox 大小,则可以使用重载方法,例如:

MessageBox1.ShowError("Your Message",300,400); 
客户端方法( JavaScript )

下面是在JavaScript中如何使用 MessageBox 控件的代码 Fragment:

ShowMsgBox('Error','Sample Error Message.'); 

代码 上面 将显示带有你的消息的" error"类型的默认 MessageBox。 如果要手动设置 MessageBox 大小,则可以使用重载方法,例如:

ShowMsgBox('Error','Sample Success Message.',300,400); 

注意:在单击OK确定,后,如果不希望在服务器上引起 postback,那么在客户端( JavaScript ) 中调用 ShowMsgBox() 方法之后,请确保包含" return false;"。

由于我们需要告诉用户一个消息类型,所以我们需要告诉用户要向用户显示的消息类型,这是完全不同的,如所示。 因此,如果要通过JavaScript显示各种消息类型,那么可以使用以下任一值 below 作为第一个参数:

  • error
  • success
  • info
  • warning

ConfirmBox

对控件的收费为: 这个自定义控件是为了提供更好的外观和感觉确认消息,并添加了"不再询问我"选项到最终用户。 众所周知,到目前为止,我们的标准是在应用程序的每一个位置都包含这个确认步骤,让用户可以执行 delete 或者关键操作。 对于一些用户来说,这个确认步骤已经变得有点烦人了。 所以我决定看看在 ConfirmationBox 控件中包含典型"不要再问我问题"复选框所需要的内容。

下面是 ConfirmBox 控件的屏幕快照示例:

便笺
  • "不再询问我"选项只会在会话中被记住,因这里如果页面重新加载或者刷新,则确认框将显示为正常。
  • 对于调用该选项的每个控件,"不再询问我"选项是唯一的,因此如果选择显示 Delete 按钮的确认框,那么"不再询问我"将只对该按钮控件应用
  • 默认焦点设置为无。
  • 这里控件只能通过客户端调用。
ConfirmBox控件ASPX标记的示例用法
<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"> 
 <title></title></head><body> 
 <formid="form1"runat="server"> 
 <div> 
 <asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"> 
 </asp:ToolkitScriptManager> 
 <asp:LabelID="Label1"runat="server"Text="Label"/> 
 <cc1:ConfirmBoxID="ConfirmBox1"runat="server"/> 
 <asp:ButtonID="Button1"runat="server"Text="Button"onclick="Button1_Click"OnClientClick="ShowConfirmBox(this,'Are you sure?'); return false;"/> 
 </div> 
 </form></body>
代码 behind ( C# )
using System; using System.Web; publicpartialclass YetAnotherTest : System.Web.UI.Page 
{ 
 protectedvoid Page_Load(object sender, EventArgs e) { 
 } 
 protectedvoid Button1_Click(object sender, EventArgs e) { 
 Label1.Text = "Postback occured!"; 
 } 
} 

FrameBox

对控件的收费为: 创建这个定制控件是为了允许开发人员显示窗口的模式类型,以便在其中显示外部或者内部站点。 这个控件还提供了一个属性,开发人员可以动态地更改框架的标题文本。 查看下面显示的示例屏幕:

FrameBox控件的示例用法
<%@Registerassembly="ProudMonkey.Common.Controls"namespace="ProudMonkey.Common.Controls"tagprefix="cc1"%><%@Registerassembly="AjaxControlToolkit"namespace="AjaxControlToolkit"tagprefix="asp"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"> 
 <title></title></head><body> 
 <formid="form1"runat="server"> 
 <asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"/> 
 <cc1:FrameBoxID="FrameBox1"runat="server"/> 
 <asp:ButtonID="Button1"runat="server"Text="Button"OnClientClick="ShowFrameBox('Vinz Blog',
 'http://geekswithblogs.net/dotNETvinz/Default.aspx');
 returnse;"/> 
 </form></body></html>

自定义模式框

模态外观的自定义只适用于 ProudMonkey 控件( 带 ASP.NET 4.0的2和 3版本)的新版本。 新版本提供一些属性,你可以设置这些属性来自定义模式控件,包括页眉。按钮。正文 background 颜色。页眉字体等等。

自定义MessageBox模式

MessageBox 提供以下属性:

  • HeaderImageUrl: 这里属性将 ImageUrl 设置为 MessageBox 头中的background。 注意,图像的大小应该是 2,因为这里图像将水平重复。
  • HeaderBackgroundColor: 这里属性设置 MessageBox 标头的background 颜色。 如果不想使用 MessageBox的默认标题 background,或者不希望设置 HeaderImageUrl 属性,则可以使用这里属性。
  • HeaderTextColor: 这里属性设置 MessageBox 标头的文本前景色。
  • HeaderTextFont: 这里属性设置 MessageBox 标头的文本字体。
  • BodyBackgroundColor: 这里属性设置显示实际文本的MessageBox 正文的background 颜色。
  • BodyTextColor: 这里属性设置正文中显示的实际内容的文本前景色。
  • BodyTextFont: 这里属性设置正文中显示的实际内容的文本字体。
  • OKButtonImageUrl: 这里属性设置要用作for按钮的background 图像的ImageUrl
  • CloseButtonImageUrl: 这里属性设置要用作关闭按钮的background 图像的ImageUrl

注释:如果不设置任何这些属性,默认样式将自动应用。

示例用法
<cc1:MessageBoxID="MessageBox1"runat="server"HeaderImageUrl="Images/header.png"HeaderTextColor="White"HeaderTextFont="Arial Black"BodyBackgroundColor="#E1E5F0"BodyTextFont="Tahoma"BodyTextColor="#263F75"OKButtonImageUrl="Images/btnOK.jpg"CloseButtonImageUrl="Images/btnClose.jpg"/>
实际输出

自定义ConfirmBox模式

ConfirmBox 也提供相同的属性,就像 MessageBox 所做的一样。 唯一的附加属性是:

  • YesButtonImageUrl: 这里属性设置 ImageUrl 用作 yes button的background 图像。
  • NoButtonImageUrl: 这里属性设置要用作没有按钮的background 图像的ImageUrl

如果在 ConfirmBox 控件中不设置这些属性,则默认样式将自动应用。

示例用法
<cc1:ConfirmBoxID="ConfirmBox1"runat="server"YesButtonImageUrl="Images/btnYes.jpg"NoButtonImageUrl="Images/btnNo.jpg"CloseButtonImageUrl="Images/btnClose.jpg"HeaderImageUrl="Images/header.png"HeaderTextColor="White"HeaderTextFont="Arial Black"/>
实际输出

自定义FrameBox模型

FrameBox 具有以下属性:

  • HeaderImageUrl: 这里属性将 ImageUrl 设置为 FrameBox 头中的background。 注意,图像的大小应该是 2,因为这里图像将水平重复。
  • HeaderBackgroundColor: 这里属性设置 FrameBox 标头的background 颜色。
  • HeaderTextColor: 这里属性设置 MessageBox 标头的文本前景色。
  • HeaderTextFont: 这里属性设置 MessageBox 标头的文本字体。
  • CloseButtonImageUrl: 这里属性设置要用作关闭按钮的background 图像的ImageUrl
示例用法
<cc1:FrameBoxID="FrameBox1"runat="server"HeaderImageUrl="Images/header.png"HeaderTextColor="White"HeaderTextFont="Arial Black"CloseButtonImageUrl="Images/btnClose.jpg"/>
实际输出

这里有更多 !

就是这样我希望你能找到这个控制。 请告诉我,如果你发现任何 Bug。 欢迎评论。建议和批评 ! : )

摘要

在本文中,我们学习了如何使用定制的MessageBoxCofirmBoxFrameBox 控件在web服务的ASP.NET 应用程序中。 我们还学习了如何定制模式的外观和感觉。

历史记录

  • 10 2016年10月: 添加了 downloadables
  • 7th 2016年06月: 初始版本

WEB    控制  asp-net  Message  customize  
相关文章