Question

我试图用this tutorial在我的页面中制作手风琴，但没有任何效果。这是我的观点：

@model  SGP.Models.Queries

@Scripts.Render("~/bundles/jqueryui")

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

    <div id="accordion">
        <h3>Assiduidade</h3>
        <div>
            @using (Html.BeginForm())
            {             
                <table>
                    <tr>
                        <th>
                            @Html.DisplayName("Nome")
                        </th>
                        ...
                    </tr>
                    @foreach (var item in Model.query1)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Nome)
                            </td>
                            ...
                        </tr>    
                    }
                </table>
            }
        </div>
        <h3>Avaliação</h3>
        <div>
            @using (Html.BeginForm())
            {                   
                <table>
                    <tr>
                        <th>
                            @Html.DisplayName("Nome")
                        </th>
                        ...
                    </tr>
                    @foreach (var item in Model.query2)
                    {
                        <tr>
                            ...
                        </tr>
                    }
                </table>
            }
</div>
</div>

这是我的_Layout.cshtml：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - SGP</title>
       ...
 @Styles.Render("~/Content/fullcalendar")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

</head>
    <body>
        <header>
            ...
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year 
                </div>
            </div>
        </footer>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/Content/themes/base/css", "~/Content/css")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/fullcalendar")
        @RenderSection("scripts", required: false)
    </body>
</html>

但是当我运行我的应用程序时，没有手风琴。我在BundleConfig中添加了jQuery-ui.css和代码，就像它在教程中所说的那样但没有任何效果。我究竟做错了什么？感谢

Answer 1

您只需在视图中加入jquery插件和jquery-ui.css即可。

另一种解决方案是在视图顶部设置layout。

@{
     Layout="~/your_layout_path";
}

以下是工作solution

的示例

手风琴MVC 4

1 个答案: