CODEWITHSUNDEEP
jqueryasp.netasp.net-mvcjquery-uirazor
Yulia V
Yulia V

Reputation: 3559

How to render tabs properly?

I am trying to follow this example to create 2 tabs; I include the scripts as explained in this question.

The result is as if there is no javascript at all.

What am doing wrong and how to fix it?

View:

@model WebApplication1.Models.TheTableInformation

@{
    ViewBag.Title = "Show, Modify and Download a Table";
}

@using (Html.BeginForm("Act", "Excel", FormMethod.Post, new { tableInfo = Model }))
{
    <p>
        Find by table name: @Html.EditorFor(m => m.TheName)           
        <input type="submit" name="command" value="Show On The Page" />
    </p>

    <div id="tabs">    
        <ul>
            <li><a href="#tabs-Data">Data</a></li>
            <li><a href="#tabs-History">History</a></li>
        </ul>

        <div id="tabs-Data">
            ...
        </div>    
        <div id="tabs-History">         
            ...
        </div> 
    </div>
}

@section Scripts {
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(
        "~/Content/themes/base/base")"></script>
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(
        "~/Scripts/jquery-ui-{version}.min.js")"></script>
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(
        "~/Scripts/jquery-{version}.min.js")"></script>
    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs();
        });
    </script>
}

BundleConfig.cs

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/Content/themes/base/base").Include(
                     "~/Content/themes/base/base.css"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryuimin").Include(
                    "~/Scripts/jquery-ui-{version}.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/jquerymin").Include(
                    "~/Scripts/jquery-{version}.min.js"));
       ...
   }

Resulting Code Source (fragment)

<script src="/bundles/jquery?v=2BDNJmnbg3aRp0e0_W5EfbuETd2F7HgQ62imnNha1A41"></script>

<script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>


<script src="/Content/themes/base/base?v=PRoqfZz0EsUttHCzAfkRuCxIvrKrMaXCB2K4VnmM0p81"></script>
<script src="/bundles/jqueryuimin?v=EqKlUEwb5a6QnKK9APLpZeOKZkAYzlO2YiCGDkzKK6c1"></script>
<script src="/bundles/jquerymin?v=2BDNJmnbg3aRp0e0_W5EfbuETd2F7HgQ62imnNha1A41"></script>
<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>

Packages.config (fragment)

  <package id="jQuery" version="2.2.0" targetFramework="net451" />
  <package id="jQuery.UI.Combined" version="1.11.4" targetFramework="net451" />
  <package id="jQuery.Validation" version="1.11.1" targetFramework="net451" />

Upvotes: 1

Views: 420

Answers (1)

Yulia V
Yulia V

Reputation: 3559

Found it myself. Scripts and style referencing was incorrect. The solution is:

@Styles.Render("~/Content/themes/base/all")
@section Scripts {
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/jqueryui")"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tabs').tabs();
        });
    </script>
}

Upvotes: 1

Related Questions