2013-03-21 14 views
11

ボタンを使用してフォームを送信した後にtoastrメッセージ(情報、エラーなど)を表示しようとしていますが、asp.net webformの更新パネルにあるgridviewコントロールを更新しています。おかげtoastr javascript asp.net webformを追加する

+1

ちょうどそれを得ました。 ScriptManager.RegisterStartupScript(this、GetType()、 "toastr"、 "toastr.info( 'Customer added'、 'Message')"、true); – dblay

+1

ScriptManagerを使った興味深いアプローチ...すっきり! –

答えて

8

あなたがPage.ClientScript.RegisterStartupScriptメソッドを使用してそれを行うことができます例:。

Page.ClientScript.RegisterStartupScript(this.GetType(), 
    "toastr_message", "toastr.error('There was an error', 'Error')", true); 

しかし、私はおそらく私のためにそれを処理するための方法または拡張メソッドを作成します。

public static void ShowToastr(this Page page, string message, string title, string type = "info") 
{ 
    page.ClientScript.RegisterStartupScript(page.GetType(), "toastr_message", 
      String.Format("toastr.{0}('{1}', '{2}');", type.ToLower(), message, title), addScriptTags: true); 
} 

使用:

ShowToastr(this.Page, "Hello world!", "Hello"); 

あなたは少しより堅牢な何かをしたい場合は、あなたがenumtypeパラメータを作ることができます。

+0

私はそれがきちんとしていると本当に頑丈だと思う...ありがとう – dblay

2

これはMasterDetailフォームがとてもマスターページを持っている注意してください(、Webフォームから呼び出す。

MasterPage.ShowToastr(ページ、 "ここでのメッセージ"、 "タイトルここ"、 "情報"、偽、「toast-ボトム全幅」、False)が

マスターページ(VB)でVB.NET ShowToastr実装

Public Shared Sub ShowToastr(ByVal page As Page, ByVal message As String, ByVal title As String, Optional ByVal type As String = "info", Optional ByVal clearToast As Boolean = False, Optional ByVal pos As String = "toast-top-left", Optional ByVal Sticky As Boolean = False) 
    Dim toastrScript As String = [String].Format("Notify('{0}','{1}','{2}', '{3}', '{4}', '{5}');", message, title, type, clearToast, pos, Sticky) 
    page.ClientScript.RegisterStartupScript(page.[GetType](), "toastr_message", toastrScript, addScriptTags:=True) 
End Sub 

JavaScript関数ShowToastrは、共有機能として、マスターページ内に存在する。

<link href="./Media/css/Grey/ListBox.Grey.css" rel="stylesheet" type="text/css" /> 
<link href="./Media/css/WebTrack.css" rel="stylesheet" type="text/css" /> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" 
    rel="stylesheet" /> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js" 
    type="text/javascript"></script> 

<script language="javascript" type="text/javascript"> 
    function Notify(msg, title, type, clear, pos, sticky) { 
     //  toastr.options.positionClass = "toast-bottom-right"; 
     //  toastr.options.positionClass = "toast-bottom-left"; 
     //  toastr.options.positionClass = "toast-top-right"; 
     //  toastr.options.positionClass = "toast-top-left"; 
     //  toastr.options.positionClass = "toast-bottom-full-width"; 
     //  toastr.options.positionClass = "toast-top-full-width"; 
     //  options = { 
     //   tapToDismiss: true, 
     //   toastClass: 'toast', 
     //   containerId: 'toast-container', 
     //   debug: false, 
     //   fadeIn: 300, 
     //   fadeOut: 1000, 
     //   extendedTimeOut: 1000, 
     //   iconClass: 'toast-info', 
     //   positionClass: 'toast-top-right', 
     //   timeOut: 5000, // Set timeOut to 0 to make it sticky 
     //   titleClass: 'toast-title', 
     //   messageClass: 'toast-message' } 


     if (clear == true) { 
      toastr.clear(); 
     } 
     if (sticky == true) { 
      toastr.tapToDismiss = true; 
      toastr.timeOut = 10000; 
     } 

     toastr.options.onclick = function() { 
      //alert('You can perform some custom action after a toast goes away'); 
     } 
     //"toast-top-left"; 
     toastr.options.positionClass = pos; 
     if (type.toLowerCase() == 'info') { 
      toastr.options.timeOut = 1000; 
      toastr.tapToDismiss = true; 
      toastr.info(msg, title); 
     } 
     if (type.toLowerCase() == 'success') { 
      toastr.options.timeOut = 1500; 
      toastr.success(msg, title); 
     } 
     if (type.toLowerCase() == 'warning') { 
      toastr.options.timeOut = 3000; 
      toastr.warning(msg, title); 
     } 
     if (type.toLowerCase() == 'error') { 
      toastr.options.timeOut = 10000; 
      toastr.error(msg, title); 
     } 
    } 
</script> 

トラスターのオプションを1回の呼び出しで統合しようとすると、これが誰かを助けてくれることを願っています。 toastrの呼び出しでより多くのオプションを使用できるようにするには、関数にさらにパラメータを追加します。設定できるすべてのオプションはコメント付きコード(javascript)にあります。

関連する問題