jQuery UI Accordion in ASP.NET MVC - feed with data from database

時間 2019-12-18

標籤 jquery accordion asp.net asp mvc feed data database 欄目 JQuery 简体版

原文原文鏈接

In the part one I’ve shown how to implement the jQuery Accordion on client-side and add some predefined skin. javascript

In the part two the Accordion is implemented in ASP.NET WebForms application, filled with data from database.css

Now, in this blog I will show the same for an ASP.NET MVC application.html

Note: The database table is the same from the part 2.java

I’ve created empty ASP.NET MVC Application.jquery

I’ve added the followingweb

So, I have one HomeController, one Home –> Accordion.aspx View and WebStoreModel.edmx entity model for the WebStore database. It contains only one table.ajax

Then, in the Global.asax file I’ve slightly changed the default route

public static void RegisterRoutes(RouteCollection routes)

{

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(

"Default", // Route name

"{controller}/{action}/{id}", // URL with parameters

new { controller = "Home", action = "Accordion", id = UrlParameter.Optional } // Parameter defaults

);

}

since I don’t have Index.aspx page, I only have Accordion.aspx page.app

In the HomeController.cs I have the following ActionResult methodasp.net

 
       using jQueryUIAccordion_MVC.Models; 
      

 
       public  
       ActionResult Accordion() 
       
 { 
       
       var entities =  
       new  
       MyWebStoreEntities(); 
       
       return View(entities.Products.ToList()); 
       
 }

MyWebStoreEntities() is the entity container name. This way, if we would have more entities inside the model, we can easily retrieve any.ide

You can use LINQ 2 SQL Classes if you want and you will retrieve the data using LINQ statement.

And, the Accordion View code is

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>jQuery Accordion :: ASP.NET MVC Example</title>
    <link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/blitzer/jquery-ui.css" rel="Stylesheet" />

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>

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

</head>
    <body>
        <div id="products" style="width: 500px;">
            <% foreach (var item in Model) { %>
            <h3>
                <a href="#"><%: item.name %></a></h3>
            <div>
                <p>
                    <%: item.description %>
                </p>
                <p>
                <font color="green">Price <b><%: item.price %></b></font>
                </p>
            </div>
            <% } %>
        </div>
</body>
</html >

Note: You can use <%: item.name %> if you have ASP.NET 4.0 which replaces the Html.Encode(item.name) – otherwise, you will need to go with <%= Html.Encode(item.name) %> or Server.HtmlEncode(..).

And that’s it. If you run the web application, the result will be same as in part 2.

Great result in few simple steps! Thats what you get if you use jQuery with ASP.NET ;)!

I hope you like it :).

Regards,
Hajan

YOU CAN DOWNLOAD THE COMPLETE PROJECT (Client-side Implementation + WebForms + MVC) HERE.