I am struggling to figure out how to dynamically change the images on my buttons using CSS or through programming

Currently experiencing a two-part issue, one relating to CSS and the other to codebehind. Below is the navigation code for my buttons:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Buttons/upviewassets.png" OnClick="ImageButton1_Click" />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Buttons/upaddassets.png" OnClick="ImageButton2_Click" />

In the code snippet above, all the buttons are positioned side by side. The code behavior on the OnClick() event is as follows:

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
    ImageButton1.ImageUrl = "Buttons/dnviewassets.png";
    ImageButton2.ImageUrl = "Buttons/upaddassets.png";
}

protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
{
    ImageButton1.ImageUrl = "Buttons/upviewassets.png";
    ImageButton2.ImageUrl = "Buttons/dnaddassets.png";
}

Issue arises when attempting to utilize Response.Redirect in conjunction with the button clicks, resulting in images not changing properly. Additionally, without Response.Redirect initially, a quick jump occurs on first click but subsequent clicks function correctly.

Secondly, CSS was explored as an alternative method to manage image changes on button clicks, yet unsuccessful in achieving desired results. Seeking to replicate tab-like appearance within master page layout.

Appreciate any assistance!

Answer №1

In order to maintain button states across page redirects, I utilized session storage. The flag is saved in the session during a click event and retrieved on the redirected page during PreRender:

protected override void OnPreRender(EventArgs e)
{
    if (!IsPostBack)
    {
        PaintButtons();
    }
    base.OnPreRender(e);
}

The PaintButtons method handles the logic of toggling button images based on the stored flag value:

private void PaintButtons()
{
    if(Session["ImageButton_Toggled"] == null )
    {               
        ImageButton1.ImageUrl = "Buttons/upviewassets.png";
        ImageButton2.ImageUrl = "Buttons/upaddassets.png";
    }
    else
    {
        int toggleId = 1;
        int.TryParse(Session["ImageButton_Toggled"].ToString(), out toggleId);

        if (toggleId == 1)
        {
            ImageButton1.ImageUrl = "Buttons/dnviewassets.png";
            ImageButton2.ImageUrl = "Buttons/upaddassets.png";
        }
        else
        {
            ImageButton1.ImageUrl = "Buttons/upviewassets.png";
            ImageButton2.ImageUrl = "Buttons/dnaddassets.png";
        }
    }
}

The click event methods for ImageButton1 and ImageButton2 are defined in the masterpage:

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
    Session["ImageButton_Toggled"] = 1;
    Response.Redirect("~/WebForm1.aspx");
}

protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
{
    Session["ImageButton_Toggled"] = 2;
    Response.Redirect("~/WebForm1.aspx");        
}

This implementation allows seamless redirection while preserving the intended functionality of the masterpage.

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

How can the issue of the navbar color not being able to disappear or turn transparent be resolved, given its connection to the body color?

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap'); :root { --color-body: #b6cbce; --color-heading: #eef3db; --color-base: #033f47; --color-base2: #022a30; --color-brand ...

Implementing a Jquery check based on a checkbox

Hey, I'm having an issue with a condition. When I uncheck the checkbox, it doesn't uncheck. I've tried to make a block display, but the JavaScript isn't working. I attempted to add: document.getElementById("Reload").style.display = "b ...

The list style remains unchanged, as the dot is still being displayed at the start

As a newcomer, I am attempting to format my list so that no dot or dash appears in front of the list items. Despite my efforts, the dot is still visible. How can I eliminate the dot or dash from the list items? <ul> <li> <p> Item ...

Troubleshooting padding problem in mobile gallery view with Bootstrap

Having a problem with the gallery layout in Bootstrap. It looks great on desktop view, but on mobile, there's no space between images on the same row. On mobile, the images stack vertically without any spacing between them within a row. However, ther ...

The angular content is not scrolling

I have a basic angular content window that contains an adjustable group of settings values. When the window is collapsed, the fxLayout collapses properly, but I am having difficulty scrolling vertically. I have attempted to use overflow-y and just overflow ...

Achieve a smooth slide-in effect from the left for your sidebar when the button is clicked using TailwindCSS

I am currently working on a sidebar menu with a button that toggles its visibility. However, I am struggling to implement a sliding animation from the left when the sidebar appears, and a slide back to the right when it closes. This is what my code looks ...

What is the proper way to include a parameter in an ASP onclick function within a table row?

Below is a table row declared within a listview: <tr onclick="<%= _jsPostBackCall %>;" /> When calling a postback method on the backend, I need to retrieve the tr index: public void RaisePostBackEvent(string eventArgument) { ...

The IIS URL rewrite is causing issues with the rewriting of CSS and JS files

Struggling with my URL rewrites - every time I set up a rewrite for a page, it ends up affecting the CSS and JS files linked within the webpage, resulting in them not displaying properly. In an attempt to fix this issue, I tried using fully qualified path ...

Switching the image by clicking on the link

Looking for assistance with a code that displays three button images and fades in the relevant div when clicked using jQuery... http://jsfiddle.net/ttj9J/11/ HTML <a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/u1SbuRE ...

What is the best way to position a button to the right of a textarea?

I am facing an issue with my website that uses Bootstrap 4. The contact form in my design is beautifully aligned, but on my actual website, it appears misaligned. I have experimented with floats and tried organizing the form elements in rows and columns, b ...

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

Bootstrap table with responsive design does not properly handle horizontal overflow

In my project, I attempted to customize a bootstrap table but encountered an issue when viewing the table on mobile devices. The 'table' always extends its width to fit 100% of the content within it. What I aim to achieve is for the table to have ...

Difficulty integrating Bootstrap with JavaScript file in Visual Studio Code

I am attempting to incorporate a dynamic progress bar by utilizing Bootstrap's progressbar and creating a custom JavaScript file. The goal is to continuously adjust the width of the progress bar at regular intervals to give the appearance of a moving ...

Exclude the UL hierarchy from removing a class in jQuery

Check out this fiddle to see the code snippet: http://jsfiddle.net/3mpire/yTzGA/1/ I am using jQuery and I need to figure out how to remove the "active" class from all LIs except for the one that is deepest within the hierarchy. <div class="navpole"&g ...

What is the proper way to access a URL such as www.gmail.com using code?

Is there a way to dynamically open a URL in a new tab when a user clicks on a button? I am looking to retrieve the link from a database and have it automatically open in a new tab. For example, opening an address like gmail.com. ...

Tips for keeping a video background stationary while allowing the text to move smoothly

When I added the video for the background, it only appears at the top of the page. However, I want it to be visible as the rest of the page is scrolled. <div class="hero"> <video autoplay loop muted plays-inline class="back-video&qu ...

Transforming react.js into HTML and CSS programming languages

I have a small experiment I need help with. As I am not familiar with react.js, I would like to convert my main.jsx file into pure HTML/CSS/JS without using react. The issue I'm facing is how to handle form data submission to the server in vanilla HTM ...

Pass the DateTime object from ASP.NET to angularjs as a structured data type instead of converting it to a

I'm encountering an issue where I am sending a complex object from my ASP.NET backend to the AngularJS frontend. This object includes a DateTime property and a list of objects, each with their own DateTime property. These properties are all sent as st ...

Issues with toggling checkboxes using jQuery

I have a gridview with radio buttons in one of the columns, acting as true/false flags. Due to the requirements of my project, I need to use JavaScript to uncheck a radio button when another one is checked. Everything works fine, except when my gridview is ...

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...