アコーディオンをクリックしたときにアクセスログを取り、データベースに登録したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 170

takumi0610

score 23

前提・実現したいこと

DBのテーブルに予め保存している値を、アコーディオンのクリック部分(開く前に見えている部分)の中に内包した状態で、
上部をクリックすると、アコーディオンが開き、
その上で、どのアコーディオンを開いたかというアクセスログを取ることをしたいです。
※アコーディオン自体はjQueryを使って実装済みです。(以下のサイトを参考に実装しましたので、jQueryプラグインは使用しておりません)
参考URL

イメージ説明

発生している問題・エラーメッセージ・試したこと

★困っていること
・クリック部分(class="accordion-click")(添付写真の黄色の部分)は、どこをクリックしてもアクセスカウントが取れるようにしたいのですが、
(添付写真ではわかりずらいのですが)この領域内に、Repeaterを使って、既にidとtextの2つをASP.NETのコントロールを使って実装済みです。

アクセスカウントを取るためには、vb側でDBとやりとりする処理(SQL文を書く)が必要→コントロールを使うのが最善だと考えているのですが、クリックイベントを持っているコントロール(ButtonやLinkButtonコントロール)では、実現できませんでした。

※コントロールの中にコントロールもしくはaタグを含むことができないから?と考えています。
もしくは、jQuery(javascript)のファイルで、SQL文を書くことができたらと思いましたが、そのような記事が見当たりませんでした。

該当のソースコード

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Source/Site1.Master" CodeBehind="accordion.aspx.vb" Inherits="study_accordion.accordion" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <link rel="stylesheet" href="/CSS/accordion.css" />
    'accordion.jsは、「該当のソースコード」の2つめに書いているjQuery(javascript)のファイルのことです。
    <script src="/Script/accordion.js"></script>
    <div id="accordion">
        <div class="accordion-click">
            <asp:HyperLink ID="LinkButton1" runat="server" Text='<%# Eval("id") %>'></asp:HyperLink>
            <asp:HyperLink ID="LinkButton2" runat="server" Text='<%# Eval("text") %>'></asp:HyperLink>
        </div>
        <div class="accordion-content">
            <p>アコーディオン中身</p>
        </div>
    </div>
</asp:Content>
$(function () {
    $('.accordion-content').hide();

    $('.accordion-click').click(function () {
        $(this).next().slideToggle();
    });
});

補足情報(FW/ツールのバージョンなど)

統合開発環境
Visual Studio2019
(言語:VB.NET、プロジェクトテンプレート:ASP.NET Webアプリケーション)

使用PC
Windows10

その他
外部のAPIを使わない方向で可能でしたら、その方法を教えていただきたく思います。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • takumi0610

    2019/08/24 11:51

    かしこまりました。
    以後気をつけて質問を記載いたします。

    キャンセル

  • SurferOnWww

    2019/08/24 11:56

    質問文を編集して追記願います。コメント欄は開かないと見えないので、見ない人もいますので。

    キャンセル

  • takumi0610

    2019/08/24 12:59

    質問文編集完了しました。

    キャンセル

回答 2

+1

どのアコーディオンを開いたかというアクセスログ

ちょっと意図がわかりかねますが、ログ専用のAPIを用意して
ajaxで適当なパラメータつけておくればhttpdのログが残るとおもいます
(そういうことではない?)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/24 11:52

    そうでしたか。
    でしたら、ぜひ参考にさせていただきたいと思いますので、概要だけでも教えていただけませんでしょうか。

    キャンセル

  • 2019/08/24 11:58

    今スマホしか使えないので、遅くなると思いますが、自宅に帰ってから解答欄に聞きます。

    キャンセル

  • 2019/08/24 13:00

    かしこまりました。私の方はいつでも構いません。
    お忙しい中恐れ入りますが、よろしくお願いいたいます。

    キャンセル

checkベストアンサー

0

クリック部分(class="accordion-click")(添付写真の黄色の部分)は、どこをクリックしてもアクセスカウントが取れるようにしたいのですが、

クリックしてポストバックできるようにするのが望みと理解してレスします。

先に言った通りポストバックするというのは全くの悪手で、悪手を深く考えても時間と労力の無駄になりそうですので、ポストバックする方法のみ書いておきます。その先は質問者さんの方で考えて課題を解決してください。

もし、その先を質問者さんの方で考えてお手上げでしたら API と Ajax で対応する方向に進むことをお勧めします。

ASP.NET には、クライアントのイベントでサーバーにデータをポストバックするための、クライアントスクリプトを自動生成する機能があります。

生成されるのは __doPostBack という名前の JavaScript の関数ですがそれをユーザーが直接使うのは NG です。代わりに、GetPostBackEventReference メソッド と RaisePostBackEvent メソッド を使うのがお勧めです。

詳しくは以下の記事を見てください。

ClientScriptManager.GetPostBackEventReference Method
https://docs.microsoft.com/ja-jp/dotnet/api/system.web.ui.clientscriptmanager.getpostbackeventreference

IPostBackEventHandler.RaisePostBackEvent(String) Method
https://docs.microsoft.com/ja-jp/dotnet/api/system.web.ui.ipostbackeventhandler.raisepostbackevent

上に紹介した記事を質問者さんのコードに適用して「クリック部分」をクリックするとポストバックするようにしたのが以下のコードです。

.aspx.cs ファイル

IPostBackEventHandler を継承しているのに注目してください。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

public partial class _0077_GetPostBackEventReference : Page, IPostBackEventHandler
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // __doPostBack("<UniqueID>", "postback data") という文字列が生成される。
        string script = Page.ClientScript.GetPostBackEventReference(this, "postback data");

        // div1 の onclick 属性に上で生成したスクリプトを設定する。
        div1.Attributes["onclick"] = script;
    }

    public void RaisePostBackEvent(string eventArgument)
    {
        // 上の GetPostBackEventReference(this, "postback data"); で設定した
        // "postback data" はポストバックした時に eventArgument に取得できる
    }
}

.aspx ファイル

<div id="div1" class="accordion-click" runat="server"> に注目してください。runat="server" でサーバーコントロールにして id を付与しています。

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="0077-GetPostBackEventReference.aspx.cs" 
    Inherits="_0077_GetPostBackEventReference" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="accordion">
        <div id="div1" class="accordion-click" runat="server">
            <asp:HyperLink ID="LinkButton1" runat="server" Text="abc"></asp:HyperLink>
            <asp:HyperLink ID="LinkButton2" runat="server" Text="def"></asp:HyperLink>
        </div>
        <div class="accordion-content">
            <p>アコーディオン中身</p>
        </div>
    </div>
    </form>
</body>
</html>

この先の問題・課題は、ポストバックされて応答が返ってきてブラウザに再描画された時どのようにアコーディオンを広げるか、すでにアコーディオンが開いているときはログはとらない (ポストバックはしない) と思うがそれをどうするか、アコーディオンはたぶん多数あると思うがそれにどう対処するかなどがあると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/25 10:16

    僕のコードの場合という形で、親切に具体的なお話まで解説くださり、ありがとうございました。
    今回、divにもidとrunat="server"を追加することで、コントロールのような働きをさせることができるという知識が衝撃的でした。
    それが使えるのであれば、当初の悩みである「コントロールをコントロールで内包することができない」ことが解決され、掲題の内容解決にも繋がりそうな気がしました。
    ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる