asp.net-mvc-3 - 从实体框架或 SQL 查询填充 JQuery Accordion

Question

我是 JQuery 的新手，我想知道是否有可能从实体框架（最好）或 SQL 查询中填充 JQuery Accordion。结果集将用于过滤出 XML 文件中列出的哪些项目将为登录用户显示。

Answer 1

你不能直接这样做。您将需要构建一个控制器操作，该操作将从实体框架中检索过滤后的项目。然后，您可以在将手风琴标记呈现并初始化为 jquery UI 手风琴的视图中返回它们。

例如，您可以编写一个控制器操作，根据登录用户的名称过滤页面列表：

    public ActionResult Index()
    {
        //retrieve the pages filtered by user
        string userName = HttpContext.Current.User.Identity.Name;
        IEnumerable<Page> pages = _pageService.FindByUserName(userName);

        if(Request.IsAjaxRequest())
            return PartialView(pages);
        else
            return View(pages);
    }

然后将从控制器返回的视图将以 jquery ui 手风琴所需的结构呈现过滤后的项目。它还将包含一段用于初始化手风琴的 javascript 代码（假设您已经在全局布局中引用了 jquery 和 jqueryUI 脚本）：

@model IEnumerable<Page>

<div id="accordion">
@foreach (var page in Model.Pages)
{
    <h3>@page.Name</h3>
    <div>
        <p>
            Enter any accordion content here
        </p>
    </div>
}
</div>

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

如果您想使用 jquery 从视图手动执行 AJAX 请求，另一种选择是将控制器的结果作为 JSON 返回。然后，您将处理返回的 JSON 数据，以便将手风琴的 HTML 添加到 DOM，最后您将其初始化为 jquery 手风琴。

控制器看起来像：

    public ActionResult Index()
    {
        //retrieve the pages filtered by user
        string userName = HttpContext.Current.User.Identity.Name;
        IEnumerable<Page> pages = _pageService.FindByUserName(userName);

        return Json(pages, JsonRequestBehavior.AllowGet);
    }

视图将与此类似：

<div id="accordion">
</div>

<script type="text/javascript">
    $(function () {
        $.ajax({
           url: '@Url.Action("YourController", "Index")',
           dataType: 'json', 
           success: function(data) {
               var accordionDiv = $("#accordion");
               accordionDiv .empty();
               $.each(data, function(k, v){
                   accordionDiv .append('<h3>' +
                             v.Name + 
                          '</h3>' +
                          '<div><p>' +
                              'Accordion content goes here' +
                          '</p></div>'
                        );
               });                                         
               accordionDiv.accordion(); 
           }              
        });
    });
</script>