In this article I will explain with an example, how to implement jQuery Accordion from database in ASP.Net MVC Razor.
 
Concept
The jQuery Accordion plugin needs a Container i.e. HTML DIV, to this container the plugin is applied. Within the container there are different sets of Title and Content controls which together act as an Accordion Pane.
 
Database
Following is the schema of the AccordionContent Table which will store the contents of the jQuery Accordion.
The database table has two columns Title and Content, which will be the Title and Content of the jQuery Accordion Pane respectively.
Implement jQuery Accordion from database in ASP.Net MVC
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
Namespaces
You will need to import the following namespaces.
using System.Configuration;
using System.Data.SqlClient;
 
 
Model
The Model class consists of the following properties.
public class AccordionModel
{
    public string Title { get; set; }
    public string Content { get; set; }
}
 
 
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, a Generic List of AccordionModel class has been built. The Generic List collection is populated with the records from Database Table.
And finally the Generic List collection is returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<AccordionModel> items = new List<AccordionModel>();
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select Title, Content from AccordianContent";
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        items.Add(new AccordionModel
                        {
                            Title = sdr["Title"].ToString(),
                            Content = sdr["Content"].ToString()
                        });
                    }
               }
 
                con.Close();
            }
        }
 
        return View(items);
    }
}
 
 
View
Inside the View, the AccordionModel class is declared as IEnumerable which specifies that it will be available as a Collection.
Inside an HTML DIV, a loop is executed over the Model to generate an HTML Unordered List which each item containing
1. Heading element – This will contain the Title of the Accordion Pane.
2. Paragraph element – This will contain the Content of the Accordion Pane and will be shown when the Accordion Pane is clicked.
Finally inside the jQuery document ready event handler, the jQuery Accordion plugin is applied to the HTML DIV.
@using Accordion_jQuery_MVC.Models
@model IEnumerable<AccordionModel>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <div id="dvAccordian" style="width:400px">
        @foreach (AccordionModel item in Model)
        {
            <h3>@item.Title</h3>
            <div>
                <p>@item.Content</p>
            </div>
        }
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
          rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
    $(function () {
        $("#dvAccordian").accordion();
    });
    </script>
</body>
</html>
 
 
Screenshot
Implement jQuery Accordion from database in ASP.Net MVC
 
 
Downloads
Download Code