Coolite Toolkit学习笔记二：服务器端Alert,Confirm,Prompt

一：Alert
Alert组件最简单的用法就是直接弹出一个消息提示框：

protected void Button_Click(object sender, AjaxEventArgs e)
{
Ext.Msg.Alert("标题内容", "消息内容").Show();
}

如果我们需要在弹出的提示框点了“确定”以后要执行其他操作怎么办呢？这时候可以使用Alert方法的重载方法，通过JFunction指定一个客户端方法，点了“确定”后就指定相应的客户端JavaScript方法，使用如下：

protected void Button_Click(object sender, AjaxEventArgs e)
{
Ext.Msg.Alert("标题内容", "消息内容", new JFunction { Fn = "JsMethod" }).Show();
}

<ext:Button ID="Button1" runat="server" Text="Submit">
    <AjaxEvents>
        <Click OnEvent="Button_Click"></Click>
    </AjaxEvents>
</ext:Button>
<script type="text/javascript">
    function JsMethod() {
        alert("Client JsMethod");
    }
</script>

Coolite Toolkit还为Alert提供了四中图标UI效果，他们分别是问题(Question)、警告(Warning)、错误(Error)和信息(Informational)，使用不同的参数将构建出不同的Alert显示风格。使用方法如下：

protected void Button_Alert(object sender, AjaxEventArgs e)
{
    Ext.Msg.Show(new MessageBox.Config
    {
        Title = "图标提示框",
        Message = "这个框带个图标",
        Buttons = MessageBox.Button.OK,
        Icon = MessageBox.Icon.INFO,
        AnimEl = this.btnAlert.ClientID
    });
}

图标的取值可以直接通过MessageBox.Icon枚举设置，分别定义有：NONE、ERROR、INFO、QUESTION和WARNING。

除了上面的应用外，还可以通过Message.ButtonConfigs来配置Alert的高级应用，比如配置确认对话框，根据不同选择执行不同的AjaxMethod方法（下面代码里的NS为通过ScriptManager指定的客户端名称空间，其功能等同于Coolite.AjaxMethods）。

protected void Button_Click(object sender, AjaxEventArgs e)
{
    Ext.Msg.Alert("标题内容", "消息内容", new MessageBox.ButtonsConfig
    {
        Yes = new MessageBox.ButtonConfig
        {
            Handler = "NS.DoYes()",
            Text = "确定"
        },
        No = new MessageBox.ButtonConfig
        {
            Handler = "NS.DoNo()",
            Text = "取消"
        }
    }).Show();
}

[AjaxMethod]
public void DoYes()
{
Ext.Msg.Alert("操作提示", "你刚刚点了-确定").Show();
}

[AjaxMethod]
public void DoNo()
{
Ext.Msg.Alert("操作提示", "你刚刚点了-取消").Show();
}

注：点了“确定”后直接执行服务端的另一方法没有实现出来，还望实现过的朋友指点，谢谢。

二：Confirm
上面通过Coolite Toolkit的扩展功能将Alert组件实现了Confirm的效果，其实Confirm自身的功能也是非常强大的，同Alert一样，最简单的使用则是直接弹出确认对话框。

protected void Button_Confirm(object sender, AjaxEventArgs e)
{
Ext.Msg.Confirm("操作提示", "消息内容").Show();
}

如果要知道是点击了那一个操作按扭，则同样可以通过JFunction指定一个客户端的JavaScript方法用来接收操作结果。

protected void Button_Confirm(object sender, AjaxEventArgs e)
{
    Ext.Msg.Confirm("操作提示", "消息内容",
        new JFunction
        {
            Fn = "ShowResult"
        }).Show();
}

<ext:Button ID="btnConfirm" runat="server" Text="Confirm">
    <AjaxEvents>
        <Click OnEvent="Button_Confirm"></Click>
    </AjaxEvents>
</ext:Button>
<script type="text/javascript">
    function ShowResult(btn) {
        Ext.Msg.alert("你刚刚点了按扭：" + btn);
    }
</script>

Confirm同样也可以定制根据操作调用AjaxMethod，实现方式和本文前面的Alert实现方式一样。

三：Prompt
Prompt可应用于简单的是数据录入，Coolite Toolkit里的服务端Prompt使用非常简单，同上面Alert和Confirm一样通过JFunction指定客户端方法处理操作结果。

protected void Button_Prompt(object sender, AjaxEventArgs e)
{
    Ext.Msg.Prompt("数据录入", "请在下面录入数据",
        new JFunction
        {
            Fn = "showResultText"
        }).Show();
}

<ext:Button ID="btnPrompt" runat="server" Text="Prompt">
    <AjaxEvents>
        <Click OnEvent="Button_Prompt"></Click>
    </AjaxEvents>
</ext:Button>
<script type="text/javascript">
    function showResultText(button,text) {
        alert("你录入的数据为：" + text);
    }
</script>

以上实现的是单行的Prompt，Coolite Toolkit也提供了多行支持，使用如下：

protected void Button_Prompt(object sender, AjaxEventArgs e)
{
    Ext.Msg.Show(new MessageBox.Config
    {
        Title = "数据录入",
        Message = "请在下面录入数据：",
        Width = 300,
        Buttons = MessageBox.Button.OKCANCEL,
        Multiline = true,
        AnimEl = this.btnPrompt.ClientID,
        Fn = new JFunction { Fn = "showResultText" }
    });
}

上图效果主要是通过Ext.Msg.Show()方法，通过该方法还可以定制许多我们需要的UI效果，比如说定制一个进度条效果，其实现为如下代码片段：

protected void Button_Wait(object sender, AjaxEventArgs e)
{
    Ext.Msg.Show(new MessageBox.Config
    {
        Title = "请等待",
        Message = "系统正在加载，请等待

",
        ProgressText = "系统加载中",
        Width = 300,
        Progress = true,
        Closable = false,
        AnimEl = this.btnWait.ClientID
    });
    this.StartLongAction();
}
private void StartLongAction()
{
    this.Session["Task1"] = 0;
    ThreadPool.QueueUserWorkItem(LongAction);

this.TaskManager1.StartTask("Task1");
}
private void LongAction(object state)
{
    for (int i = 0; i < 10; i++)
    {
        Thread.Sleep(1000);
        this.Session["Task1"] = i + 1;
    }
    this.Session.Remove("Task1");
}
protected void RefreshProgress(object sender, AjaxEventArgs e)
{
    object progress = this.Session["Task1"];
    if (progress != null)
    {
        Ext.MessageBox.UpdateProgress(((int)progress) / 10f, "");
    }
    else
    {
        this.TaskManager1.StopTask("Task1");
        Ext.MessageBox.Hide();
        this.ScriptManager1.AddScript("Progre***esult();");
    }
}

Code

<ext:Button ID="btnWait" runat="server" Text="Wait">

</AjaxEvents>

</ext:Button>

<ext:TaskManager ID="TaskManager1" runat="server">

<Tasks>

<ext:Task

TaskID="Task1"

Interval="1000"

AutoRun="false">

</AjaxEvents>

</ext:Task>

</Tasks>

</ext:TaskManager>

function Progre***esult()

{

alert("进度条走完了");

}

</script>

注：以上内容源于官方文档和示例整理而成，笔记于此愿与有志者共同学习交流。
Coolite Toolkit官方网站：http://www.coolite.com/

转载于:https://blog.51cto.com/beniao/202652

Coolite Toolkit学习笔记二：服务器端Alert,Confirm,Prompt相关推荐

Coolite(二)服务器端Alert,Confirm,Prompt
一:Alert Alert组件最简单的用法就是直接弹出一个消息提示框: protected void Button_Click(object sender, AjaxEventArgs e) ...
Coolite Toolkit学习笔记系列文章
Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件.它是基于跨浏览器的ExtJS 库开发而来的,并且简化了开发步骤,并且包含有丰富的Ajax运用,同ExtJS 一样都是开源 ...
Coolite Toolkit学习笔记一：AjaxEvent、AjaxMethod和Listeners
一:AjaxEvent Coolite Toolkit所提供的AjaxEvent可以应用在很多的控件中,实现异步提交等相关功能.比如使用在Coolite Toolkit的Button控件中, ...
Coolite Toolkit学习笔记九：表单布局控件FormLayout与FromPanel
FormLayout在我们平时开发中使用频率非常高,使用它可快速.方便的实现表单界面布局,以及使用一些其他控件自身的特性组合起来实现丰富强大的UI界面.下面通过一个简单示例来体验FormLayout的 ...
Coolite Toolkit学习笔记三：基本控件之Button、TextField、DataField、ComboBox
Button.TextField.DataField.ComBox这些控件好象也没什么好学的,任何一个学过ASP.NET的朋友都应该会使用这些控件,Coolite Toolkit里的这些控件相比标准的 ...
Coolite Toolkit学习笔记五：常用控件Menu和MenuPanel
Coolite Toolkit里的Menu控件和其他的.NET Web控件不一样,如果只是设计好了Menu或是通过程序初始化菜单项,菜单是不会呈现在界面上的,因为Coolite Toolkit规定Me ...
Coolite Toolkit学习笔记六：常用控件Accordion、ToolBar、ToolTip
一.Accordion控件 Accordion的功能非常适用,使用很简单,轻轻松松的就可以构建一个可折叠的界面展示应用效果.相信大多数做ASP.NET开发的朋友都使用过ASP.NET AJA ...
Coolite Toolkit学习笔记八：常用控件TabPanel
TabPanel控件使用非常简单,但是功能却非常强大,它同MenuPanel.TreePanel一样提供了很多的集合属性,可以定制出丰富的应用.其中用得最多的就是他的Tabs属性,用于定义子标签选项, ...
Coolite Toolkit学习笔记四：容器控件之FiledSet、Panel和Window
一.FieldSet控件 FieldSet控件在开发中使用率还是很高的,毕竟Web中微软没有提供Group控件,通常都是使用FieldSet来进行表单等界面布局分组.在Coolite To ...
[转载]dorado学习笔记(二)
原文地址:dorado学习笔记(二)作者:傻掛 ·isFirst, isLast在什么情况下使用?在遍历dataset的时候会用到 ·dorado执行的顺序,首先由jsp发送请求,调用相关的ViewM ...

Coolite Toolkit学习笔记二：服务器端Alert,Confirm,Prompt

Coolite Toolkit学习笔记二：服务器端Alert,Confirm,Prompt相关推荐

最新文章

热门文章