asked on

<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

ASKER CERTIFIED SOLUTION

devlab2012

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

no158

ASKER

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...

no158

ASKER

Any other ideas?

PagodNaUtak

no158

ASKER

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.

PagodNaUtak

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

no158

ASKER

That will just execute the href. Which is an unintended behavior.

PagodNaUtak

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

Open in new window

no158

ASKER

Just tried it out and the URL gets executed.

PagodNaUtak

Does it work? Does color changed?

no158

ASKER

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.

no158

ASKER

Problem wasn't really solved but it was the closest solution.

&lt;asp:LinkButton&gt; and visited CSS property

<asp:LinkButton> and visited CSS property