How to show tab control in asp.net

Question

I am developing a C# .NET web application using .NET Framework 4.0.

In that, I need to show a page with 3 tabs like our web browsers do. Each tab has a different functionality.

How can I create tab control in Visual Studio using the .NET Framework 4.0, is there any built in tab controls?

regards

Answer 1

There's the AJAX control toolkit tabs and jQuery UI tabs. I have used both and prefer jQuery UI. Microsoft officially includes/recommends jQuery with web applications.

If each tab has completely separate content, I would suggest rendering a simple, styled bar of links and have each element link to a new page/view. That way, hidden content isn't rendered until it's needed.

jQuery UI Example

Note that this doesn't have anything to do with .NET or Visual Studio; this is a purely client-side solution.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script>

$(function() {
    $( "#tabs" ).tabs();
});

</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">Content 1</div>
    <div id="tabs-2">Content 2</div>
    <div id="tabs-3">Content 3</div>
</div>