Getting Snacks in ASP.NET

I came across some code on w3schools that I'd like to use: TryIt

Does anyone know how I can incorporate it with an asp:LinkButton or asp:Button using OnClientClick, while still having onClick run the server-side code?

Answer №1

Just recently I added a snackbar feature to my project, even though it's been almost a year since everyone else started using it.

To make the snackbar work, you'll need an UpdatePanel and register a client script block in 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 back-end coding was a bit challenging, but it does the job effectively. You need to create a javascript string on page load and 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);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when trying to render text within Javascript as "NOTICE", however PHP is able to display it seamlessly without any hiccups

PHP uses metadata from image files to create text and stores it in a variable with the same name as the IMG source. No issues there. JavaScript is responsible for displaying the gallery, allowing users to scroll and enlarge images. While enlarging an imag ...

Is it necessary for CSS Media query to load all the referenced CSS files?

When utilizing a CSS Media Query to assign two different stylesheets, such as desktop.css and mobile.css based on the max-width, how does this process function? Is it necessary for both stylesheets to be loaded by the browser every time, and then the appr ...

Let's unravel this JavaScript enigma: the code snippet window.confirm = divConfirm(strMessage) awaits

Imagine a scenario where you have an old website with a lot of existing JS code. If a user wants to update all the alert messages to modern, stylish Div-based alerts commonly used in jQuery, YUI, Prototype, etc., there are primarily three types of JS dialo ...

Redirecting and styling following an HTTP post operation

Implementing Stripe on my Firebase-hosted website. Utilizing a Cloud Function to handle the transaction. I have integrated the Stripe Checkout within a button displayed directly on my single HTML page, which then directs to the /charge function in inde ...

What is the best way to create a highlighted navigation bar using Angular 2?

Is there a way to keep the navbar active even after refreshing the page in Angular 2? I am currently using CSS to accomplish this, but the active tab is removed upon page refresh. Any suggestions on how to tackle this? HTML:-- <ul class="nav navbar- ...

In JavaScript, a "switch statement" retrieves a test value from a "input type text" by accessing the value using getElementByName.value

Attempting to test 7 possible values for the variable 'a' by passing it to a function from user input in seven 'input type text' boxes, then checking each value individually with clicks on 7 'input type image' elements. Howeve ...

When returning to the page, Vue reactivity experiences a hiccup

Using a basic binary variable called Vue named binary_state, I control the class of an element known as "controlled_element" in this discussion. This "controlled_element" has two classes, "class_true" and "class_false," depending on the value of binary_sta ...

ADO.NET Data Services

While experimenting with Ado.Net Data Services using this code, I encounter an error when attempting to access the service: The server encountered an error processing the request. Please refer to the server logs for more information. Any idea why this m ...

Issues with loading CSS on Magento 2

Looking for some assistance after encountering an error with my Magento 2.1.2, PHP7, Ubuntu setup. I performed a fresh installation and created a new theme. However, when switching to the new theme, I started seeing this error both on the frontend and back ...

When resizing the screen, the contents of the Bootstrap 3 navbar disappear instead of collapsing as intended

I'm currently working on developing a responsive navigation bar that collapses when the screen size is reduced. However, I seem to be encountering an issue where the only visible element after resizing the screen is the header which remains active at ...

color settings on a search icon as a background

I'm struggling to make the background color of my search glyph fill the entire box. I want it to resemble this image. However, at the moment, it looks more like this. I can't figure out what's causing the issue. Below is the HTML code I&a ...

PHP Authentication using Text File

Is there a way to display user data in row by row format in text files after they have filled out a form? Here is an example of how the data should look: <!DOCTYPE HTML> <html> <head> </head> <body> <?php // define vari ...

What strategies can I use to control the DOM within the onScroll event in ReactJS?

I am currently working on implementing an arrow-up button that should be hidden when I am at the top of my page and displayed once I scroll further down. However, I am facing issues with manipulating the DOM inside my handleScroll function to achieve this. ...

The functionality of scrolling in Angular Material tabs is not functioning properly

I have encountered a challenge while working with angularjs material design. The md-scroll functionality is not working as expected for scrolling up and down, even though it works fine for left and right scrolling. In a tab with a table view, the vertical ...

The drop-down tabs are being covered by my <div> element

I've been struggling with the layout of my website due to issues with the positioning of my div tags. Whenever I hover over the arcade tab or other drop-down menus, they end up behind the div for my movies. I would like to reverse this behavior so tha ...

Is it possible to modify the backdrop of the entire webpage?

I'm encountering an issue in my React Native project where I am unable to set a consistent background color across all elements on my pages. This is the code snippet causing the problem: import React, { Component } from "react"; import { View, Text, ...

Comparison of utilizing PHP within CSS versus Implementation through JavaScript [General]

Curious about the incorporation of PHP in CSS, especially in relation to my current Wordpress Theme project. I am aiming for high levels of customization and have been using a JS file to change CSS Properties through PHP. However, I'm not entirely con ...

animation frames delay for intervals

Can the animation-delay be applied not just at the start but also during iterations? For instance, consider this example: .lv1 { width: 200px; height: 200px; background: red; animation: flu 1s infinite; animation-delay: 2s; } .lv2 { backgro ...

What is the best way to align three tables columns in a single row?

I am facing an issue with aligning the columns of three different tables in one line. I have tried applying CSS styling, but the columns still appear misaligned. How can I ensure that the columns are properly arranged in a single line? Below are my HTML/C ...

Incorporating custom HTML5 player to watch Youtube videos on my website

I'm trying to display YouTube videos on my website using a simple video tag. I've managed to retrieve the encoded url of the video from the page source and successfully download it through IDM, but when I try to use this URL as the source for an ...