質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

VB.NET

Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

Q&A

解決済

2回答

4842閲覧

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

Eltk

総合スコア51

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

VB.NET

Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

0グッド

0クリップ

投稿2019/08/22 13:20

編集2019/08/24 07:49

前提・実現したいこと

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

イメージ説明

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

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

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

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

該当のソースコード

aspx

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

jQuery

1$(function () { 2 $('.accordion-content').hide(); 3 4 $('.accordion-click').click(function () { 5 $(this).next().slideToggle(); 6 }); 7});

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

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

使用PC
Windows10

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/08/22 15:30

accordion.js とは何?
退会済みユーザー

退会済みユーザー

2019/08/22 15:39 編集

質問者さんは https://teratail.com/questions/205611 を聞いた人ですよね? そのスレッドの回答は 100% 理解できて、問題・課題は 100% 解決できたのでしょうか? そうでないとすると、ここに書いてある課題を掲示板でのやり取りで解決するのはかなり難しい(はっきり言うと、ほとんど無理)だと思うのですけど。
Eltk

2019/08/22 21:59

失礼いたしました。 accordion.jsは該当ソースコードの2つ目にあたるjQuery(javascript)のファイルのことです。 質問の方も修正しました。 おっしゃる通り、完全な実装は時間がかかると自身でも思いますが、今回の質問は、クライアント側のコードについての質問ですので、タイトルに書いてあることを実装する1-100を教えてほしいというよりは、そのためのaspxのファイル(場合によってはjsやvbファイルも?)の書き方を教えていただきたく、質問いたしました。
退会済みユーザー

退会済みユーザー

2019/08/22 22:38

アコーディオンというのは jQuery ではなくて jQuery UI の Accordion プラグインのことでは? であれば、きちんとそのように上の質問文を編集して書いてください。 ところで、今の実装で Accordion は機能しているのですか? iQuery UI が動くには jQuery が必要ですが、コードには見当たりません。
退会済みユーザー

退会済みユーザー

2019/08/22 22:49

完全な実装を1 から 10 までここで教えるつもりは自分もありません。逆に、1 を聞いて 10 を知って欲しいとも思ってません。5 ぐらいの情報で解決できればと思います。yambejp さんの回答にそれが提供されていると思います。でも、今の質問者さんの知識レベルでは回答の内容が理解できないのですよね? それでは話が通じないので、もっと勉強して基本的な知識をつけていただくようお願いします。
Eltk

2019/08/24 00:32

返信が遅くなりまして、申し訳ございません。 アコーディオンはプラグインを使用しておりません。 数値的なお話をしていただいて、ようやく少し自分の知識やこちらのサイトでのアドバイスとの差を 感じました。 まずは、0から1、1から5のレベルに上げることを目標にします。 ありがとうございます。
退会済みユーザー

退会済みユーザー

2019/08/24 01:32

プラグインではないというのはホントに間違いないですか? 最初のコメントでも聞きましたが、accordion.js とは何なのですか? それがjQuery プラグインではないのですか?
Eltk

2019/08/24 01:36

jQueryは使用しておりますが、プラグインは使用していないと思います。 以下の記事を参考にほぼそのままコピペしました。 accordion.jsは、以下の記事の内容をほぼ流用したjsファイルです。 https://qiita.com/koharu178/items/3d875a1ba2924b1c855d
退会済みユーザー

退会済みユーザー

2019/08/24 01:56

了解しました・・・が、そういう情報は最初の質問に書いてください。エスパーではないのできちんと情報提供してもらわないと分かりません。
Eltk

2019/08/24 02:51

かしこまりました。 以後気をつけて質問を記載いたします。
退会済みユーザー

退会済みユーザー

2019/08/24 02:56

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

2019/08/24 03:59

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

回答2

0

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

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

投稿2019/08/22 13:22

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Eltk

2019/08/22 13:26

早々にありがとうございます。 すみません、ASP.NET初めてまだ1ヶ月ぐらいなので、頂いているアドバイスが理解できていないのですが、 今回は、サーバーに送る処理というよりは、Viewの書き方(処理を考慮に入れたときに実装できなくなった)をまず知りたいです。 ちなみに、DBのテーブルやその中身のカラムは既に決められたものがあり、それに合うように登録しないといけませんので、外部のAPI?のようなものは使用できない縛りがあります。
退会済みユーザー

退会済みユーザー

2019/08/22 14:50

View って何ですか? ASP.NET Web Forms アプリの話なら View という言葉は出てこないはずですけど? 決められたものとか縛りって何ですか? 何か提案しても、それれはできない、これもできないと言われては答えられないと思うのですけど。
Eltk

2019/08/22 22:05

失礼いたしました。 プログラミング言語の勉強をし始めたころ、Railsを使ってアプリケーションの開発を行っておりまして、 その考え方が自身の知識の最初でしたので、Viewという言い方が作り方は関係なく一般的な言い方だと誤って認識しておりました。 おっしゃる通りです。回答をいただいた方、申し訳ございませんでした。 外部のAPIは使用しない方向で実装可能でしたら、そちらでお願いしたいです。 (こちらのコメント後、再度質問内容を修正いたします)
退会済みユーザー

退会済みユーザー

2019/08/22 22:52 編集

用語は正しく使ってください (ASP.NET Web Forms アプリで View という用語を使うのはダメ)。混乱を招くばかりです。 yambejp さんが書かれた方法が自分もおすすめです。と言うか、それ以外に現実的な方法はなさそうです。API は同じアプリ内に Web サービスを実装すれば良さそうです。「外部」と言うのが別アプリと思っているとすると思い違いです。 質問者さんは ASP.NET コントロールのクリックでポストバックして・・・ということを考えているようですが、それは全くの悪手です。(どうしてもポストバックしなければならない理由があれば話は別ですが)
Eltk

2019/08/24 00:41

ご返信が遅くなりまして、申し訳ございません。 かしこまりました。以後、Viewという用語はWebFormsアプリ関連で使用しないようにします。 自分が考えているような方法はないのですね。 教えていただいたAPIを使用するか、もしくは実装内容自体を見直さないといけないということですね。 yambejpさんから頂いた回答が私が初心者であること関係なく最善方法だということで、ベストアンサーに悩みますが、その他様々なルールや情報を教えていただきましたので、SurferOnWwwさんをベストアンサーにさせていただきます。 yambejpさんも、初心者の僕に丁寧に接してくださり、ありがとうございましたm(_ _)m
退会済みユーザー

退会済みユーザー

2019/08/24 01:28

ポストバックする方法がないわけではなくて悪手ということです。どうしてもということであればアドバイスはできます。
Eltk

2019/08/24 01:38

コントロールのtimerというものを使う方法でしょうか? 悪手であることの理由がわからないのでなんとも言えませんが、もしtimerを使い方法を選択したとして、 そのときにまた困った場合は、改めてご質問させていただこうと思います。 ありがとうございます。
退会済みユーザー

退会済みユーザー

2019/08/24 01:57

違います。
Eltk

2019/08/24 02:52

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

退会済みユーザー

2019/08/24 02:58

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

2019/08/24 04:00

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

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/24 13:08

編集2019/08/24 22:16
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Eltk

2019/08/25 01:16

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問