• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1696
  • Last Modified:

<asp:LinkButton> and visited CSS property

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
no158
Asked:
no158
  • 7
  • 4
1 Solution
 
devlab2012Commented:
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
 
no158Author Commented:
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
 
no158Author Commented:
Any other ideas?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
PagodNaUtakCommented:
<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
 
no158Author Commented:
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
 
PagodNaUtakCommented:
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
 
no158Author Commented:
That will just execute the href. Which is an unintended behavior.
0
 
PagodNaUtakCommented:

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

Open in new window

0
 
no158Author Commented:
Just tried it out and the URL gets executed.
0
 
PagodNaUtakCommented:
Does it work? Does color changed?
0
 
no158Author Commented:
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
 
no158Author Commented:
Problem wasn't really solved but it was the closest solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now