How to implement jquery accordion in asp.net MVC


AccordianJqery

It is very straight forward to implement 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.

Step1: Create one blank asp.net mvc  application.

Step2: Download the Jquery and Jquery UI libray fron Nuget Package Manager in the application.

Step 3: Create the Home controller  like this


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication8.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}



Step 4: Create the Index view and implement Jquery and style sheet like this Code snippet


@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.2.min.js"></script>
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<link href="~/Content/themes/base/accordion.css" rel="stylesheet" />
<link href="~/Content/demos.css" rel="stylesheet" />

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

<div class="demo">
<div id="accordion">
  <h3>This is the Title1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>This is the Title2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  
</div>

</div>


Summary: Here i donot have done any exatra work to implement this functionality so asp.net MVC is very user friedly with Jquery UI Library. This is one of the good features of asp.net MVC.

Advertisements

2 Responses to “How to implement jquery accordion in asp.net MVC”

  1. SutoCom Says:

    Reblogged this on SutoCom Solutions.

  2. Learn Jquery with in 15 hrs | Chandradev's Blog Says:

    […] 18. How to implement jquery accordion in asp.net MVC […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: