CODEWITHSUNDEEP
c#asp.net-mvc-4razortabview
selvam
selvam

Reputation: 1197

How to work on Tab view in MVC 4 ASP.NET?

I am new one for ASP.NET. I want to list out my views in TabView.

I do the Following Changes in my application,

In _Layout.cshtml i add the following bundle in

<head>
      @Styles.Render("~/Content/themes/base/css") 
</head>

and

<Body>
    @Scripts.Render("~/bundles/jqueryui") 
<Body>

After that i add two controller like Default1 and Default2, in both controller i add one view like, index.

Then i write the following code in Index.cshtml in Home view to display my controller view in particular tab like.

<div id="body">
<div id="tabs">

<ul>
  <li><a href="/Default1/Index">Tab 1</a></li>
  <li><a href="/Default2/Index">Tab 2</a></li>

</ul>
  @section scripts
{
<script>


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



</script>
}
</div>
</div>

But it's not working. I don't Know i add more code for work that.

Please help me. Thanks in advancce.

Upvotes: 1

Views: 4793

Answers (2)

jaydeep_nil
jaydeep_nil

Reputation: 11

You have to add content also to display on tab click .so add two div in your code .as shown below.

Modified code ::

     <div id="body">
     <div id="tabs">

     <ul>
        <li><a href="#tab-1">Tab 1</a></li>
         <li><a href="#tab-2">Tab 2</a></li>

         </ul>
         @section scripts
      {
         <script>
    $(function () {
        $("#tabs").tabs();
    });

     </script>
         }
      </div>

         <div id="tab-1"> 
        'content which you want to display on click of first tab'

       </div>
     <div id="tab-2">

             'content which you want to display on click of second tab'
             </div>
             </div>

Upvotes: 1

Ben
Ben

Reputation: 1963

Don't know if it will fix all your issues but this:

$(function () {

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

});

should be:

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

You don't need 2 $(function() {}) handlers

Upvotes: 0

Related Questions