Description:
In this example we explain that how
to implement jQuery Accordion from database in Asp.Net MVC.or how to implement Accordion
panel from database in MVC using jQuery. Or how to dynamically bind jQuery
Accordion from database using MVC.or jQuery UI accordion in asp.net MVC feed
with data from database. Or dynamic jQuery Accordion using Repeater in asp.net
MVC.or how to implement jQuery Accordion menu in MVC.
Here we demonstrate that how to
implement Accordion from database in MVC using jQuery.
@using Accordion_jQuery_MVC.Models
@model IEnumerable<AccordionModel>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width"/>
<title>Implement jQuery Accordion from database in
ASP.Net MVC</title>
</head>
<body>
<div
id="dvAccordianMenu"
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
() {
$("#dvAccordianMenu").accordion();
});
</script>
</body>
</html>
Controller:
public class MenuController
: Controller
{
// GET:
Home
public
ActionResult Index()
{
List<AccordionModel> items = new List<AccordionModel>();
string
constr = ConfigurationManager.ConnectionStrings["connectionstring"].ConnectionString;
using
(SqlConnection con = new SqlConnection(constr))
{
using
(SqlCommand cmd = new
SqlCommand())
{
cmd.CommandText = "select Title, Content from Menu";
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);
}
}
0 comments:
Post a Comment