Solved

<asp:LinkButton> and visited CSS property

Posted on 2011-02-25
12
1,446 Views
Last Modified: 2013-12-17
Hello Experts,

I have an interesting one.

I'm working with an <asp:LinkButton> and other <a href> tags on a page.
I'm trying to get the visited property to work with all links but haven't had any luck.
The regular <a href> tags work with the visited property but the LinkButton is temperamental.

My main goal is to have a link on the page execute a server side function when clicked.
Also, the link must change color when clicked. Functioning exactly like the a:visited property would. Meaning when you come back to the page after leaving the link must be it's visited color.

With that being said...I've tried doing javaScript post backs and I've tried using different controls like asp:HyperLink and also various ways to call CSS properties to try and force the visited property to work. Yet I'm unsuccessful.

Please take a look, it's easy to conceptualize the problem as well as setup a test project. But I fear I'm running into a limitation of .Net and not something I can fix with little effort.

Enjoy ;)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication2
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            TextBox2.Text = "Clicked";
        }

        protected void LinkButton2_Click(object sender, EventArgs e)
        {
            TextBox2.Text = "Clicked2";
        }
    }
}

Open in new window

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="~/Default.aspx.cs" Inherits="WebApplication2._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Home page</title>
        <style type="text/css">
            a:link{color:Blue;}
            a:visited{color:Green;}
            a:active{color:Red;}
            .class1 a:visited{color:Gray;}
        </style>
    </head>

    <body>
        <form runat="server">
            <a href="/" >Link 1</a><br /><br />           
            <a href="#" class="class1" onclick="javascript:__doPostBack('LinkButton1','');" >OnClick Post Back</a><br /><br />
            <!--<asp:LinkButton ID="LinkButton1" runat="server" CssClass="class1" onclick="LinkButton1_Click">LinkButton1</asp:LinkButton><br /><br />-->
            <asp:LinkButton ID="LinkButton2" runat="server" CssClass="class1" onclick="LinkButton2_Click">LinkButton</asp:LinkButton><br /><br />
            <asp:HyperLink ID="HyperLink1" NavigateUrl="javascript:__doPostBack('LinkButton2','');" runat="server">HyperLink</asp:HyperLink><br /><br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </form>
    </body>

</html>

Open in new window

0
Comment
Question by:no158
  • 7
  • 4
12 Comments
 
LVL 13

Accepted Solution

by:
devlab2012 earned 500 total points
ID: 34981322
To use a:visited, browser checks the history to see if the hyperlink target page is already visited or not. You are using javascript functions as the link target. Use the asp:Hyperlink and set the NavigateUrl to some page, then the a:visited will work fine.
0
 

Author Comment

by:no158
ID: 34981898
The problem is that I need to call a server function from that link. So either I do a JavaScript post back or a use an onclick in a LinkButton to essentially do the same thing.

I guess I'm just hoping there would of been an easier way of doing this.

But I'm not losing hope yet...
0
 

Author Comment

by:no158
ID: 34987574
Any other ideas?
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 8

Expert Comment

by:PagodNaUtak
ID: 34995627
<style type="text/css">  
            a:link{color:Blue;}  
            a:visited{color:Green;}  
            a:active{color:Red;}  
           a.SelectedItem:link;
           a.SelectedItem:visited {color:#ffffff;}
           a.SelectedItem:hover {color:#999999;}
           a.SelectedItem:active {color:#ffffff;}
</style>
0
 

Author Comment

by:no158
ID: 34997301
All works except the a.SelectedItem:visited {color:#ffffff;} line, which is the one I'm trying to get working with the LinkButton control.

Maybe a possible solution would be to send URL information to the browser but only execute the server side function. I'm just not sure how to do this with JavaScript.

This is my current example:
<a href="/" class="SelectedItem" onclick="javascript:__doPostBack('LinkButton1',''); return false;" >OnClick Post Back</a>

Only problem is that it wont goto the URL so it never records at the browser level that the link was clicked. There has to be a way to do this, seems like such a simple thing.
0
 
LVL 8

Expert Comment

by:PagodNaUtak
ID: 35003505
Remove the "return false" in your code as shown below:
<a href="/" class="SelectedItem" onclick="javascript:__doPostBack('LinkButton1','');" >OnClick Post Back</a>

Open in new window

0
 

Author Comment

by:no158
ID: 35003609
That will just execute the href. Which is an unintended behavior.
0
 
LVL 8

Expert Comment

by:PagodNaUtak
ID: 35004088

<a href="/" class="SelectedItem" onclick="javascript:__doPostBack('LinkButton1',''); Response.Redirect('YourURL');" >OnClick Post Back</a>

Open in new window

0
 

Author Comment

by:no158
ID: 35006933
Just tried it out and the URL gets executed.
0
 
LVL 8

Expert Comment

by:PagodNaUtak
ID: 35013738
Does it work? Does color changed?
0
 

Author Comment

by:no158
ID: 35017281
It changes color, but thats because it's executing the link.
Because it's executing the link, it doesn't run the server script.

So that approach basically removes the functionality and just sends you to another page.
But the color does change.

My main goal is to have a link on the page execute a server side function when clicked.
Also, the link must change color when clicked. Functioning exactly like the a:visited property would. Meaning when you come back to the page after leaving the link must be it's visited color.
0
 

Author Closing Comment

by:no158
ID: 35971366
Problem wasn't really solved but it was the closest solution.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question