C-Sharpcorner - Latest Articles: How to Implement JQuery Accordion in Asp.Net MVC

来源:转载

It is very straight forward to implement a JQuery accordion in asp.net MVC. If we have to implement any JQuery UI widgets in ASP.NET MVC there will be no need to do any extra work. This is the cool features of asp.net MVC.

Lets check with one simple ASP.NET MVC 4 application.

  • Step 1: Create one blank ASP.NET MVC application.
  • Step 2: Download the JQuery and JQuery UI libray fron Nuget Package Manager in the application.
  • Step 3: Create the Home controller like this;

    1. using  System;  
    2. using  System.Collections.Generic;  
    3. using  System.Linq;  
    4. using  System.Web;  
    5. using  System.Web.Mvc;  
    6.   
    7. namespace  MvcApplication8.Controllers  
    8. {  
    9.      public   class  HomeController : Controller  
    10.     {  
    11.          //   
    12.          // GET: /Home/   
    13.   
    14.          public  ActionResult Index()  
    15.         {  
    16.              return  View();  
    17.         }  
    18.   
    19.     }  
    20. }  
  • Step 4: Create the Index view and implement JQuery and style sheet like this Code snippet.

    1. @{  
    2.     ViewBag.Title =  "Index" ;  
    3. }  
    4.   
    5. <script src= "~/Scripts/jquery-2.1.1.min.js" ></script>  
    6. <script src= "~/Scripts/jquery-ui-1.11.2.min.js" ></script>  
    7. <link href= "~/Content/themes/base/all.css"  rel= "stylesheet"  />  
    8. <link href= "~/Content/themes/base/accordion.css"  rel= "stylesheet"  />  
    9. <link href= "~/Content/demos.css"  rel= "stylesheet"  />  
    10.   
    11. <script type= "text/javascript" >  
    12.     $( function  () {  
    13.         $( "#accordion" ).accordion();  
    14.     });  
    15. </script>  
    16.   
    17. <div  class = "demo" >  
    18. <div id= "accordion" >  
    19.   <h3>This is the Title1</h3>  
    20.   <div>  
    21.     <p>  
    22.     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer  
    23.     ut neque. Vivamus nisi metus, molestie vel, gravida  in , condimentum sit  
    24.     amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut  
    25.     odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.  
    26.     </p>  
    27.   </div>  
    28.   <h3>This is the Title2</h3>  
    29.   <div>  
    30.     <p>  
    31.     Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet  
    32.     purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor  
    33.     velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In  
    34.     suscipit faucibus urna.  
    35.     </p>  
    36.   </div>  
    37.     
    38. </div>  
    39.   
    40. </div>  

Summary

Here I have not done any extra work to implement this functionality so ASP.NET MVC is very user friendly with JQuery UI Library. This is one of the good features of ASP.NET MVC.

分享给朋友:
您可能感兴趣的文章:
随机阅读: