locked
ASP.NET MVC TAB only showing html format RRS feed

  • Question

  • User1984354752 posted

    Hi there;

    I'm working in an ASP.NET mvc application. I want to add to my project jquery tabs. I  struggled to visualize my tabs ...I  came acrossed this link => https://stackoverflow.com/questions/13219874/asp-net-mvc-4-tabs which explains how to implement the tabs. Still I don't manage to visualize the tabs this is my code:

    Can somebody tell me what I'm doing wrong? 

    Razor view:

    @{
    Layout = "~/Views/Shared/_Layout.cshtml";
    }

    @section scripts{
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    <script src="~/Scripts/i18n/grid.locale-en.js"></script>
    <script src="~/Scripts/jquery.jqGrid.min.js"></script>


    <script type="text/javascript">
    $(function () {
    $("#tabs").tabs();
    });
    </script>


    }


    <div id="tabs">

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

    <div id="tabs-1">
    Content for Tab 1 goes here.<br />
    TEST 1
    </div>

    <div id="tabs-2">
    Content for Tab 2 goes here.<br />
    TEST 2
    </div>

    <div id="tabs-3">
    Content for Tab 3 goes here.<br />
    TEST 3
    </div>

    </div>

    LAYOUT VIEW 

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/modernizr")

    </head>
    <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    <li>@Html.ActionLink("Projects", "Index", "Project")</li>
    <li>@Html.ActionLink("Contracts", "Index", "Contracts")</li>
    <li>@Html.ActionLink("Contract_Amounts", "Index", "Contract_Amounts")</li>

    </ul>
    </div>
    </div>
    </div>
    <div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

    Saturday, March 14, 2020 9:38 AM

Answers

  • User1984354752 posted

    Dear Bruce:

    I followed your advice . I changed "~/Content/jquery.jqGrid/ui.jqgrid.css  to src=" ~/Scripts/jquery-ui-1.10.0.min.js" . I can see the tabs now.

    Thanks very much for your assistance....much appreciated

    Have a nice happy day and coding

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 16, 2020 4:35 PM

All replies

  • User-474980206 posted

    You have two issues. 

    first you don’t appear to include the jquery-UI JavaScript support file (just the css)

    two, the jquery-UI css is not compatible with bootstrap. As they are both css layout frameworks with overlap, you should pick one or the other. They can be made to work together but you need to override css where effected. What was wrong with bootstraps tabs?

    Saturday, March 14, 2020 3:42 PM
  • User1984354752 posted

    Dear Bruce;

    Thanks very much for your prompt answer. The bootstrap  isn't shown at all …..just the HTML markup with the contents of every tab on top of one another. What do you refer with the jquery-UI JavaScript support file …...I have this reference in the page  <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />   is there another reference missing?

    According to your explanation I have to choose between jquery-UI css and bootstrap ...right?. if this the case which of the Styles render reference I have to delete? 

    Thank in advance for your support …..much appreciated. 

    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/modernizr")

    </head>
    <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    <li>@Html.ActionLink("Projects", "Index", "Project")</li>
    <li>@Html.ActionLink("Contracts", "Index", "Contracts")</li>
    <li>@Html.ActionLink("Contract_Amounts", "Index", "Contract_Amounts")</li>

    </ul>
    </div>
    </div>
    </div>
    <div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    </body>
    </html>

    Saturday, March 14, 2020 4:20 PM
  • User-474980206 posted

    if you are using the default layout, it typically references bootstrap css & script. also all your sample markup is using bootstrap classes. these will stop working when you remove bootstrap. If you pick jQuery-ui, you should replace all the bootstrap classes with jQuery-ui classes (there is no navbar in jQuery-ui).  

    "~/Content/jquery.jqGrid/ui.jqgrid.css" is for jQgrid and unrelated  to either jQuery-ui and bootstrap.  generally you would change this markup to match jQuery-ui or bootstrap CSS whichever  framework you pick

    i have no idea which framework these are:

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

    as jQuery-ui is older and not responsive, not sure why you would pick it. 

    Sunday, March 15, 2020 10:08 PM
  • User1984354752 posted

    Dear Bruce:

    I followed your advice . I changed "~/Content/jquery.jqGrid/ui.jqgrid.css  to src=" ~/Scripts/jquery-ui-1.10.0.min.js" . I can see the tabs now.

    Thanks very much for your assistance....much appreciated

    Have a nice happy day and coding

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 16, 2020 4:35 PM