添加 toastr javascript asp.net webform

Adding toastr javascript asp.net webform

提问by David Blay

I am trying to display a toastr message (info,error etc) after submitting a form using a button and update a gridview control (which is in a update panel" in asp.net webform. Thanks

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

回答by Meryovi

You can do it using Page.ClientScript.RegisterStartupScriptmethod. Example:

您可以使用Page.ClientScript.RegisterStartupScript方法来完成。例子：

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

But I would probably create a method or extension method to handle that for me:

但我可能会创建一个方法或扩展方法来为我处理：

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

Use:

利用：

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

If you want something a little more robust, you could make the typeparameter an enum.

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

回答by user3691614

Calling from web form, (note this is a MasterDetail form so has a MasterPage.

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

MasterPage.ShowToastr(Page, "Message Here", "Title Here", "Info", False, "toast-bottom-full-width", False)

MasterPage.ShowToastr(Page, "Message Here", "Title Here", "Info", False, "toast-bottom-full-width", False)

The VB.NET ShowToastr implementation in the Master Page (VB)

母版页 (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

The Javascript function ShowToastr resides in the master page as a shared function.

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>

I hope this helps someone, as I tried for ages to get the toastr options integrated in one call. If you want to have more options available on the call to toastr, then add more parameters to the functions. All of the options that can be set are in the commented code (javascript).

我希望这对某人有所帮助，因为我尝试了很长时间才能在一次通话中集成 toastr 选项。如果您希望在调用 toastr 时有更多可用选项，请向函数添加更多参数。所有可以设置的选项都在注释代码 (javascript) 中。