Adding toastr javascript asp.net webform

Question

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

Answer 1

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

Answer 2

You can do it using Page.ClientScript.RegisterStartupScript method. Example:

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 type parameter an enum.

Answer 3

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

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

The VB.NET ShowToastr implementation in the Master Page (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

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

  <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).