如何使用jquery在asp.net mvc 4中添加accordion窗格?

I am creating simple web application using ASP.NET MVC 4. I am using razor code. I have HomeController.cs, Index.cshtml,_Layout.cshtml files. I have put the code in them like: _Layout.cshtml:

我正在使用ASP创建简单的web应用程序。净MVC 4。我用的是剃刀密码。我有HomeController。cs,Index.cshtml _Layout。cshtml文件。我已经将代码放入其中，例如:_Layout.cshtml:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
            $(function () {
                $("#accordion").accordion();
            });
        </script>
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("Practice", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </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 - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

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

Index.cshtml:

    @{
    ViewBag.Title = "Home Page";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET MVC visit
                <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
                If you have any questions about ASP.NET MVC visit
                <a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>.
            </p>
        </div>
    </section>
}
<h3>We suggest the following:</h3>
<div id="accordion">  
    <h1><a href="#1">Section 1</a></h1>  
    <div>In section 1</div>  
    <h1><a href="#2">Section 2</a></h1>  
    <div>In section 2</div>  
</div>

I am trying to create accordion pane like on page - http://jqueryui.com/accordion/

我正在尝试在页面上创建accordion窗格——http://jqueryui.com/accordion/。

So please Help me I will be so thankful to that person.

所以请帮助我，我会非常感谢那个人。

2 个解决方案

#1

It seems to be working fine. As you've already added the required jQuery libraries to the page header, you should remove the line below:

看起来效果不错。由于您已经向页面头中添加了所需的jQuery库，您应该删除下面的行:

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

Working demo: http://jsfiddle.net/Sj7Mh/

工作演示:http://jsfiddle.net/Sj7Mh/

#2

You need to make sure you jquery is place before jquery UI, you could refer more detail here for step by step to on how create the accordion in MVC

您需要确保jquery在jquery UI之前就位，您可以在这里详细介绍如何在MVC中创建手风琴导航

#1