如何使用jquery在asp.net mvc 4中添加accordion pane

我使用ASP.NET MVC 4創建簡單的web應用程序。我使用的是剃鬚刀代碼。我有 HomeController.cs，Index.cshtml，_Layout.cshtml文件。我已經把代碼放在他們像： _Layout.cshtml：如何使用jquery在asp.net mvc 4中添加accordion pane

<!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>

我想創建手風琴窗格狀頁 - http://jqueryui.com/accordion/

所以，請幫助我，我會很感激那個人。

來源

2013-07-27 Shekhar

什麼不工作？ – melancia

它似乎工作正常。正如你已經添加了必需的jQuery庫頁頭，你應該刪除以下行：

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

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

來源

2013-07-29 12:49:23 melancia

感謝它爲我工作。但是，我仍然遇到了問題，所以我把它放在了最前面。它就像'@ Styles.Render（「〜/ Content/css」）' '@ Scripts.Render（「〜/ bundles/jquery」）' – Shekhar

你需要確保你jQuery是地方jQuery用戶界面之前，你可以參考更多的細節 here一步一步到如何在MVC中創建手風琴

來源

2013-10-31 09:22:30 tsohtan

如何使用jquery在asp.net mvc 4中添加accordion pane

回答

相關問題