0

私はJQueryが初めてで、Entity Framework（できれば）またはSQLクエリからJQueryアコーディオンを設定する可能性があるかどうかを知りたいです。結果セットは、XML ファイルにリストされているどのアイテムがログイン ユーザーに表示されるかをフィルターするために使用されます。

4

1 に答える 1

0

直接それを行うことはできません。EntityFrameworkからフィルター処理されたアイテムを取得するコントローラーアクションを作成する必要があります。次に、アコーディオンマークアップがレンダリングされ、jqueryUIアコーディオンとして初期化されるビューでそれらを返すことができます。

たとえば、ログインしているユーザーの名前に基づいてページのリストをフィルタリングするコントローラーアクションを作成できます。

    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);
    }

コントローラから返されるビューは、jqueryuiアコーディオンに必要な構造でフィルタリングされたアイテムをレンダリングします。また、アコーディオンを初期化する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>
于 2012-11-20T20:50:01.130 に答える