添加 toastr javascript asp.net webform

Posted 2023-02-22

【中文标题】添加 toastr javascript asp.net webform

【英文标题】：Adding toastr javascript asp.net webform

【发布时间】：2013-03-10 19:23:59

【问题描述】：

我尝试在使用按钮提交表单后显示 toastr 消息（信息、错误等），并在 asp.net 网络表单中更新 gridview 控件（位于更新面板中）。谢谢

【问题讨论】：

刚刚得到它； ScriptManager.RegisterStartupScript(this, GetType(), ",toastr", "toastr.info('Customer added','Message')", true);

使用 ScriptManager 的有趣方法...整洁！

【参考方案1】：

您可以使用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");

如果您想要更健壮的东西，可以将type 参数设为enum。

【讨论】：

我认为这很简洁而且非常强大......谢谢

【参考方案2】：

从网络表单调用，（注意这是一个 MasterDetail 表单，所以有一个 MasterPage。

MasterPage.ShowToastr(Page, "Message Here", "Title Here", "Info", False, "toast-bottom-full-width", 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>

我希望这对某人有所帮助，因为我多年来一直在尝试将 toastr 选项集成到一个电话中。如果您想在调用 toastr 时有更多可用选项，请向函数添加更多参数。所有可以设置的选项都在注释代码（javascript）中。

【讨论】：

尽管代码有效，但当我尝试使用 foreach 语句调用函数来显示通知列表时遇到问题。