Coolite(二)服务器端Alert,Confirm,Prompt
生活随笔
收集整理的這篇文章主要介紹了
Coolite(二)服务器端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("ProgressResult();");
? ? }
}
<ext:Button ID="btnWait" runat="server" Text="Wait">
? ? <AjaxEvents>
? ?? ???<Click OnEvent="Button_Wait"></Click>
? ? </AjaxEvents>
</ext:Button>
<ext:TaskManager ID="TaskManager1" runat="server">
<Tasks>
? ? <ext:Task
? ?? ???TaskID="Task1"
? ?? ???Interval="1000"
? ?? ???AutoRun="false">
? ?? ???<AjaxEvents>
? ?? ?? ?? ?<Update OnEvent="RefreshProgress"/>
? ?? ???</AjaxEvents>? ?? ?? ?? ?? ?? ???
? ? </ext:Task>
</Tasks>
</ext:TaskManager>
<script type="text/javascript">
function ProgressResult()
{
? ? alert("進度條走完了");
}
</script>
? ?? ?? ?? ?? ?? ?
注:以上內容源于官方文檔和示例整理而成,筆記于此愿與有志者共同學習交流。
? ?? ?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("ProgressResult();");
? ? }
}
<ext:Button ID="btnWait" runat="server" Text="Wait">
? ? <AjaxEvents>
? ?? ???<Click OnEvent="Button_Wait"></Click>
? ? </AjaxEvents>
</ext:Button>
<ext:TaskManager ID="TaskManager1" runat="server">
<Tasks>
? ? <ext:Task
? ?? ???TaskID="Task1"
? ?? ???Interval="1000"
? ?? ???AutoRun="false">
? ?? ???<AjaxEvents>
? ?? ?? ?? ?<Update OnEvent="RefreshProgress"/>
? ?? ???</AjaxEvents>? ?? ?? ?? ?? ?? ???
? ? </ext:Task>
</Tasks>
</ext:TaskManager>
<script type="text/javascript">
function ProgressResult()
{
? ? alert("進度條走完了");
}
</script>
? ?? ?? ?? ?? ?? ?
注:以上內容源于官方文檔和示例整理而成,筆記于此愿與有志者共同學習交流。
轉載于:https://www.cnblogs.com/hendy/archive/2010/04/12/1710277.html
總結
以上是生活随笔為你收集整理的Coolite(二)服务器端Alert,Confirm,Prompt的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Reporting Service 在文
- 下一篇: 动态生成Repeater