توضیحات و دانلود

پیاده سازی jQuery Accordion از پایگاه داده در ASP.Net MVC
0 0
پیاده سازی jQuery Accordion از پایگاه داده در ASP.Net MVC

با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان jQuery Accordion را از بانک اطلاعات در ASP.Net MVC Razor پیاده سازی کرد.
مفهوم
پلاگین jQuery Accordion به یک Container یعنی HTML DIV نیاز دارد ، در این پلاگین اعمال می شود. در داخل Container مجموعه های مختلفی از کنترل های عنوان و محتوا وجود دارد که در کنار یکدیگر به عنوان یک صفحه Accordion عمل می کنند.
بانک اطلاعات
در زیر طرح جدول AccordionContent است که محتویاتjQuery Accordion را ذخیره می کند .
جدول بانک اطلاعاتی دارای دو ستون عنوان و محتوا است که به ترتیب عنوان و محتوای صفحه jQuery Accordion خواهد بود.

توجه :

می توانید جدول بانک اطلاعاتی SQL را با کلیک روی لینک دانلود کنید. فایل SQL را بارگیری کنید
فضاهای نام
باید نامهای زیر را وارد کنید.

using System.Configuration;
using System.Data.SqlClient;

Model
کلاس Model از ویژگی های زیر تشکیل شده است.

public class AccordionModel
{
    public string Title { get; set; }
    public string Content { get; set; }
}

Controller
Controller از روش زیر تشکیل شده است.
روش انجام عملیات GET
در داخل این روش Action ، یک لیست عمومی از کلاس AccordionModel ساخته شده است. مجموعه Generic List با سوابق موجود در جدول پایگاه داده جمع شده است.
و سرانجام مجموعه Generic List به 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
در داخل View، کلاس AccordionModel به عنوان IEnumerable اعلام شده است که مشخص می کند که آن به عنوان یک مجموعه در دسترس خواهد بود.
در داخل یک DIV HTML ، یک حلقه بر روی Model اجرا می شود تا یک لیست HTML بدون کنترل که هر مورد در آن وجود دارد ایجاد شود
1. Heading element – این شامل عنوان صفحهAccordion خواهد بود.
2. Paragraph element – این شامل محتوای صفحه Accordion است و با کلیک روی صفحه Accordion نشان داده می شود.
سرانجام در jQuery document ready ، پلاگین jQuery Accordion روی 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>

عکس صفحه

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :