Snackbar in ASP.NET

Question

I am using this code from w3schools: TryIt

How can i integrate it with asp:LinkButton or asp:Button using OnClientClick, while onClick is executing the server code.

Answer 1

Almost a year late to the party, but I've just implemented the same snackbar.

It needs an UpdatePanel and you need to register a client script block on your event handler:

<asp:UpdatePanel runat="server" ID="UpdatePanel1">
    <ContentTemplate>
        <div>
            <asp:Button runat="server" ID="ShowSnackbar" Text="Show Snackbar" OnClick="ShowSnackbar_Click" />
        </div>

        <div id="snackbar">
            <asp:Label runat="server" ID="Snack" />
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

The codebehind was tricky but it works. On page load, create a string that contains the javascript, then use that string value to register your script block...

private string snackbarScript;

protected void Page_Load(object sender, EventArgs e)
{
    snackbarScript = GenerateSnackbarJS();
}
private string GenerateSnackbarJS()
{
    var sb = new StringBuilder();
    sb.AppendLine("var x = document.getElementById('snackbar');");
    sb.AppendLine("x.className = 'show';");
    sb.AppendLine("setTimeout(function(){ x.className = x.className.replace('show', ''); }, 3000);");
    return sb.ToString();
}

protected void ShowSnackbar_Click(object sender, EventArgs e)
{
    Snack.Text = "Here's the snackbar";
    ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "snackbar", snackbarScript, true);
}