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

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();
}


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

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>

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

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" }
     });
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值