How to create tabs view in ASP.NET MVC3 with Razor?

Question

I am developing a web application in ASP.NET MVC3 with C# and Razor. I need to create tabs within my web page, exactly as it is displayed in browsers.

I don't know if there is already a template made available by MVC3 or creating tabs is an easier task than I think. Actually it is the first time ever I've been asked to do it.

Anybody has some advice or suggestion? At the beginning I plan to do it with postbacks in order not to lose too much time with jQuery or other client technologies. Thank you very much :D

Answer 1

In my opinion, the time you'd "lose" from learning jQuery (depending on your familiarity with JavaScript/jQuery) would be well worth the time you'd spend on having to play around with the HTML and CSS to get decent looking tabs.

The jQuery UI Tabs are easy to set up, and very responsive and nice to look at.

Answer 2

The default templates from MVC have a simple tab system in place for navigation that is based on simple css.

You should have a look at those. I know that you said that you wanted to avoid jQuery for this, but they don't have a significant learning curve and there are hundreds of examples of their use on the web.

http://jqueryui.com/demos/tabs/ in conjunction with PartialViewResults and jquery ajax can be a powerful tool.
ASP.NET MVC 2 loading partial view using jQuery - no client side validation