Adding toastr javascript asp.net webform

可以使用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

从web表单调用，(注意这是一个MasterDetail表单，所以有一个MasterPage。

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

VB。. NET ShowToastr在母版页中的实现(VB)

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时有更多可用选项，那么向函数添加更多参数。所有可以设置的选项都在注释代码(javascript)中。

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script>
    $(document).ready(function () {
        toastr.options = {
            'closeButton': true,
            'debug': false,
            'newestOnTop': false,
            'progressBar': false,
            'positionClass': 'toast-top-right',
            'preventDuplicates': false,
            'showDuration': '1000',
            'hideDuration': '1000',
            'timeOut': '5000',
            'extendedTimeOut': '1000',
            'showEasing': 'swing',
            'hideEasing': 'linear',
            'showMethod': 'fadeIn',
            'hideMethod': 'fadeOut',
        }
    });
    
    function Success(msg, Redirect = 1) {
        toastr.success(msg);
        if (Redirect != 1) {
            window.location.href = Redirect;
        }
        return false;
    }
    function Error(msg) {
        toastr.error(msg)
        return false;
    }
    function Warning(msg) {
        toastr.warning(msg)
        return false;
    }
    
    // Toast Image and Progress Bar
    
    // Toast Position
    $('#position').click(function (event) {
        var pos = $('input[name=position]:checked', '#positionForm').val();
        toastr.options.positionClass = "toast-" + pos;
        toastr.options.preventDuplicates = false;
        toastr.info('This sample position', 'Toast Position')
    });
 </script>
    
    
    ----------
    .Cs Page code for success message
    this.ClientScript.RegisterStartupScript(this.GetType(), "SweetAlert1", "Success('Added Successfully');", true);
    
    .Cs Page code for error message
    this.ClientScript.RegisterStartupScript(this.GetType(), "SweetAlert1", "Error('error message');", true);
    
    .Cs Page code for warning message
    this.ClientScript.RegisterStartupScript(this.GetType(), "SweetAlert1", "Warning('warning message');", true);