2016-01-28 7 views
1

Я стараюсь следовать this example, чтобы создать 2 вкладки; Я включаю скрипты, как описано в this question.Как правильно отображать вкладки?

Результат такой, как если бы у меня не было javascript.

Что делать неправильно и как его исправить?

Просмотр:

@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")); 
     ... 
    } 

Результирующая Исходный код (фрагмент)

<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 (фрагмент)

<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" /> 

ответ

1

Найдено сам. Сценарии и ссылки на стиль были неверными. Раствор представляет собой:

@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> 
}