如何正确呈现标签？答案

【问题标题】：How to render tabs properly?如何正确呈现标签？
【发布时间】：2016-01-28 21:31:54
【问题描述】：

我正在尝试关注 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" />

【问题讨论】：

标签： jquery asp.net asp.net-mvc jquery-ui razor

【解决方案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>
}

【讨论】：