C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Asp.Net jQuery href Example

The jQuery library provides various options to work with href links, in this post Asp.Net jQuery href Example, we shall see the various attributes and events of the Hyperlink control.

Running the sample

To run the sample at your desk, create a new Asp.net page; copy the entire code below, change reference of the jQuery files to point to your local directory. Build and run the application.

<title>Links (a href)</title>

<link

type="text/css"

href="Stylesheet.css"

rel="Stylesheet" />

<script

type="text/javascript"

src="JavaScript/jquery-1.7.2.js"></script>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

$('#cmdGet').click(function(event) {

event.preventDefault();

alert('H REF: ' + $('#lnkGoogle').attr('href'));

alert('ID: ' + $('#lnkGoogle').attr('id'));

alert('Attribute (target): ' + $('#lnkGoogle').attr('target'));

alert('TEXT: ' + $('#lnkGoogle').text());

});

$('#cmdSet').click(function(event) {

event.preventDefault();

$('#lnkGoogle').attr('href', 'http://www.gmail.com');

$('#lnkGoogle').text('Gmail');

$('#lnkGoogle').attr('target', '_self');

});

$('#lnkGoogle').click(function(event) {

alert("Link Clicked, redirecting to " + $(this).attr('href'));

});

$('#lnkGoogle').hover(function() {

alert("Hover on Link");

});

$('#cmdLoop').click(function(event) {

event.preventDefault();

$('a').each(function() {

alert('Link: ' + $(this).text());

});

});
</script>

</head>

<body>

<b>Links (a Href)</b><br />

<a id="lnkGoogle"

href="http://www.google.com"

target="_blank">Google</a>

<br />

<a id="lnkYahoo"

href="http://www.yahoo.com">Yahoo</a><br />

<a id="lnkFacebook"

href="http://www.facebook.com">Facebook</a><br />

<b>Hyperlinks (asp:HyperLink)</b><br />

<asp:HyperLink

ID="lnkMicrosoft"

runat="server"

Text="Microsoft"

NavigateUrl="http://www.microsoft.com/">

</asp:HyperLink><br />

<asp:HyperLink

ID="lnkMSDN"

runat="server"

Text="MSDN"

NavigateUrl="http://msdn.microsoft.com/en-US/">

</asp:HyperLink>

<asp:Button

ID="cmdGet"

runat="server"

Text="Get"

Width="100"/>

<asp:Button

ID="cmdSet"

runat="server"

Text="Set"

Width="100"/>

<asp:Button

ID="cmdLoop"

runat="server"

Text="Loop"

Width="100"/>

</form>
</body>

</html>

Run the application, Click on the Get, Set & Loop button, observe the events and attributes of the Hyperlink control.

Asp.Net jQuery loop through all href controls in a Page

The jQuery library provides various options to work with href links, in this post Asp.Net jQuery loop through all href controls in a Page, we shall see on how to loop through all the Hyperlink controls in a page using jQuery.

We can loop through all the Hyperlink controls in a page using jQuery as follows.

$('a').each(function() {

alert('Link: ' + $(this).text());

});

Here is a full example

<title>Links (a href)</title>

<link

type="text/css"

href="Stylesheet.css"

rel="Stylesheet" />

<script

type="text/javascript"

src="JavaScript/jquery-1.7.2.js"></script>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

$('#cmdLoop').click(function(event) {

event.preventDefault();

$('a').each(function() {

alert('Link: ' + $(this).text());

});

});
});

</script>

</head>

<body>

<b>Links (a Href)</b><br />

<a id="lnkGoogle"

href="http://www.google.com"

target="_blank">Google</a>

<br />

<a id="lnkYahoo" href="http://www.yahoo.com">Yahoo</a><br />

<a id="lnkFacebook" href="http://www.facebook.com">Facebook</a><br />

<b>Hyperlinks (asp:HyperLink)</b><br />

<asp:HyperLink

ID="lnkMicrosoft"

runat="server"

Text="Microsoft"

NavigateUrl="http://www.microsoft.com/">

</asp:HyperLink><br />

<asp:HyperLink

ID="lnkMSDN"

runat="server"

Text="MSDN"

NavigateUrl="http://msdn.microsoft.com/en-US/">

</asp:HyperLink>

<asp:Button

ID="cmdLoop"

runat="server"

Text="Loop"

Width="100"/>

</form>

</body>

</html>

Run the application, Click on the Loop button, notice that the details of all the Hyperlinks in the page appear in a Message box.

Asp.Net jQuery href mouse hover Event Handler

The jQuery library provides various options to work with href links, in this post Asp.Net jQuery href mouse hover Event handler, we shall see on how to capture the mouse hover event of a Hyperlink controls using jQuery.

We can handle the mouse hover event of a href control using jQuery as follows.

$('#lnkGoogle').hover(function() {

alert("Hover on Link");

});

Here is a full example

<title>Links (a href)</title>

<link

type="text/css"

href="Stylesheet.css"

rel="Stylesheet" />

<script

type="text/javascript"

src="JavaScript/jquery-1.7.2.js"></script>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

$('#lnkGoogle').hover(function() {

alert("Hover on Link");

});
});

</script>

</head>

<body>

<b>Links (a Href)</b><br />

<a id="lnkGoogle"

href="http://www.google.com"

target="_blank">Google</a>

<br />

<a id="lnkYahoo" href="http://www.yahoo.com">Yahoo</a><br />

<a id="lnkFacebook" href="http://www.facebook.com">Facebook</a><br />

<b>Hyperlinks (asp:HyperLink)</b><br />

<asp:HyperLink

ID="lnkMicrosoft"

runat="server"

Text="Microsoft"

NavigateUrl="http://www.microsoft.com/">

</asp:HyperLink><br />

<asp:HyperLink

ID="lnkMSDN"

runat="server"

Text="MSDN"

NavigateUrl="http://msdn.microsoft.com/en-US/">

</asp:HyperLink>

<asp:Button

ID="cmdSet"

runat="server"

Text="Set"

Width="100"/>

</form>

</body>

</html>

Run the application, Hover on the Link, notice that the mouse Hover event is Handled and a Message box appears.