Solved

<asp:LinkButton> and visited CSS property

Posted on 2011-02-25
12
1,521 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

617 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