Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

<asp:LinkButton> and visited CSS property

Posted on 2011-02-25
12
Medium Priority
?
1,547 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 1000 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
Stack Overflow Podcast - Developer Story

Welcome to the Stack Overflow podcast recorded Thursday July 20 at Stack Overflow Headquearters in NYC. Your hosts today are podcast regulars Jay Hanlon, David Fullerton, and Ilana Yitzhaki, plus the quite irregular Matt Sherman (Stack Overflow Engineering Manager extraordinaire)

 
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

Basic Security of Your VPC

So, you’ve got this shiny new VPC and a fancy new application configured on your EC2 servers ready to go. This application is only accessible from your computer, which is great for security, but you need your users to be able to access it! So, what’s the easiest way to do this?

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

722 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