Winson.Framework_对话框的使用

Functional Demos

对话框的使用

一、基本说明：

在3.0版里，已整合了jQuery UI里的对话框控件，现在大家可以直接使用C#语法去调用jQuery里的对话框，可灵活设置所有属性，也可自行更改不同的skin

二、属性说明：

Title:对话框标题
ShowType:对话框类型,分别为DialogType.Alert(默认)和DialogType.Confirm
Css:CSS名称,默认为flora
Opacity:背景透明度,默认为0.5
OkButton:确定按钮文本,默认为'OK'
CancelButton:取消按钮文本,默认为'Cancel'
Width:对话框宽度,默认为300
Height:对话框高度,默认为200
MinWidth:对话框最小收缩宽度,默认为250
MinHeight:对话框最小收缩高度,默认为150
Model:是否使用模式对话框,默认为true
Resizable:是否允许扡动对话框,默认为true
OkEvent:确定按钮事件,以JS语法实现,默认关闭对话框
CancelEvent:取消按钮事件,以JS语法实现,默认关闭对话框
ConfirmOK:'为元素添加确认对话框'时的确定按钮文本
ConfirmCancel:'为元素添加确认对话框'时的取消按钮文本
ConfirmOKEvent:'为元素添加确认对话框'时的确定按钮事件,JS语法实现,默认为关闭对话框
ConfirmCancelEvent:'为元素添加确认对话框'时的取消按钮事件,JS语法实现,默认为关闭对话框

三、使用说明：

此对话框可分三种形式调用:

1.直接调用:

只需实例化一个Dialog对象,然后为其设置相应的属性,调用ShowMsgBox方法即可,代码如下:


//引用命名空间
using Winson.Framework.Controls;

//实体化对话框
Dialog dialog = new Dialog(this);
//设置各种属性
dialog.Title = Title.Text;
if (IsResizable.SelectedValue.Equals("1"))
	dialog.Resizable = true;
else
	dialog.Resizable = false;
if (IsModel.SelectedValue.Equals("1"))
	dialog.Modal = true;
else
	dialog.Modal = false;
if (DaType.SelectedValue.Equals("1"))
	dialog.ShowType = DialogType.Alert;
else
	dialog.ShowType = DialogType.Confirm;
//显示对话框
dialog.ShowMsgBox(Content.Text);

2.为页面元素添加确认对话框:

此方法可为页面一元素(如一个按钮)添加JS方式的确认对话框,代码如下:
前台HTML代码:


 点击以下按钮:
 <Input Type="Button" Name="TestButton01" value="  Test ">

后台代码:


Dialog dialog = new Dialog(this);
dialog.Title = "添加确认对话框测试";
dialog.ShowType = DialogType.Confirm;
dialog.ConfirmOK = " 确定 ";
dialog.ConfirmCancel = " 取消 ";

//指定要显示的信息
//指定要附加的元素(如input,div,a....)
//指定元素的name属性,如 "TestButton01"
dialog.AddConfirmBox("你确定要这样做吗?","input", "TestButton01");

//因此,此方法会为页面所有相同name的元素添加同一个对话框

3.为页面元素添加确认对话框,同时可指定跳转的页面及添加参数(只能跳转到相同的页面):

此方法是为了在列表里添加多个确定对话框时使用的,如每一行一个连接,然后点此连接后再跳转到相应的页面,然后根据传递的参数去做不同的事情,此方法已支持URL重写的跳转页面,只需在web.config里设置相关的UrlRewrite参数即可,代码如下:

前台HTML代码:


以下有多个按钮,每个将指向同一个URL,但所传递的参数是不同的,参数使用para属性来传递,当然此属性可由你自定义的:
 <Input Type="Button" Name="TestButton02" value="  Test "  para="pa01">
 <Input Type="Button" Name="TestButton02" value="  Test "  para="pa02">
 <Input Type="Button" Name="TestButton02" value="  Test "  para="pa03">
 <Input Type="Button" Name="TestButton02" value="  Test "  para="pa04">
 <Input Type="Button" Name="TestButton02" value="  Test "  para="pa05">

后台代码:


Dialog dialog = new Dialog(this);
dialog.Title = "添加确认对话框测试";
dialog.ShowType = DialogType.Confirm;
dialog.ConfirmOK = " 确定 ";
dialog.ConfirmCancel = " 取消 ";

//指定要显示的信息
//指定要附加的元素(如input,div,a....)
//指定元素的name属性,如 "TestButton02"
//指定要跳转的页面名称,如 "Dialog" 即本页面,不需加后缀名,因为会自动判断有无使用URLRewrite
//指定要传递的参数属性名称, 如"para"
dialog.AddConfirmBox("你确定要这样做吗?","input", "TestButton02", "Dialog", "para");

四、效果演示：

1.直接调用:

　演　示　
　源　码

以下是消息对话框显示,可输入以下参数以查看不同效果:

对话框标题:

对话框内容:

是否可伸缩:是否
是否模式对话框:是否
对话框类型:消息框确认框


//引用命名空间
using Winson.Framework.Controls;

//实体化对话框
Dialog dialog = new Dialog(this);
//设置各种属性
dialog.Title = Title.Text;
if (IsResizable.SelectedValue.Equals("1"))
	dialog.Resizable = true;
else
	dialog.Resizable = false;
if (IsModel.SelectedValue.Equals("1"))
	dialog.Modal = true;
else
	dialog.Modal = false;
if (DaType.SelectedValue.Equals("1"))
	dialog.ShowType = DialogType.Alert;
else
	dialog.ShowType = DialogType.Confirm;
//显示对话框
dialog.ShowMsgBox(Content.Text);

2.为页面元素添加确认对话框:

　演　示　
　源　码

以下是消息对话框显示,可输入以下参数以查看不同效果:

点击以下按钮:

服务器端代码：


Dialog dialog = new Dialog(this);
dialog.Title = "添加确认对话框测试";
dialog.ShowType = DialogType.Confirm;
dialog.ConfirmOK = " 确定 ";
dialog.ConfirmCancel = " 取消 ";
dialog.AddConfirmBox("你确定要这样做吗?","input", "TestButton");

生成的前台JS代码：


$(document).ready(function(){
	$('input[name*="TestButton01"]').click(function(){
		$('body').append('');
		$('#MsgBox').html('你确定要这样做吗?').css('display','block').dialog({
			title:'添加确认对话框测试 ', 
			modal: true,
			overlay: { opacity: 0.5, background: 'black' },
			buttons: { ' 确定 ': function() { $(this).dialog('close'); } ,
					   ' 取消 ': function() { $(this).dialog('close'); } },
			width:300,
			height:200,
			resizable:true,
			close:function(event,ui){
				$(this).dialog('destroy');},
			minHeight:180,
			minWidth:280,
			dialogClass:'flora'});
		});
});

3.为页面元素添加确认对话框,同时可指定跳转的页面及添加参数:

　演　示　
　源　码

服务器端代码：


Dialog dialog = new Dialog(this);
dialog.Title = "添加确认对话框测试";
dialog.ShowType = DialogType.Confirm;
dialog.ConfirmOK = " 确定 ";
dialog.ConfirmCancel = " 取消 ";

//指定要显示的信息
//指定要附加的元素(如input,div,a....)
//指定元素的name属性,如 "TestButton02"
//指定要跳转的页面名称,如 "Dialog" 即本页面,不需加后缀名,因为会自动判断有无使用URLRewrite
//指定要传递的参数属性名称, 如"para"
dialog.AddConfirmBox("你确定要这样做吗?","input", "TestButton02", "Dialog", "para");

生成的前台JS代码：


$(document).ready(function(){
	$('input[name*="TestButton02"]').click(function(){
		$temp=$(this);
		$('body').append('');
		$('#MsgBox').html('你确定要这样做吗?').css('display','block').dialog({
			title:'添加确认对话框测试 ', 
			modal: true,
			overlay: { opacity: 0.5, background: 'black' },
			buttons: { ' 确定 ': function() { 
				location.href='Dialog.aspx?para='+ $temp.attr('para') } ,' 取消 ': function() {
				$(this).dialog('close'); } },
			width:300,
			height:200,
			resizable:true,
			close:function(event,ui){
				$(this).dialog('destroy');},
			minHeight:180,
			minWidth:280,
			dialogClass:'flora'});
	});
});

Top