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

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

ただいまの
回答率

87.49%

ASP.NET MVC:部分ビューでのonclickイベントによるJavaScriptの実行

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,052

score 9

過去にASP.NET MVCの部分ビューとJavaScriptの実行に関して質問されていた方がいらっしゃったので、私からも質問させていただきます。

現在MVCを使ったポータルサイトの開発で、サイトにログインやその他の操作を行ったときのアクセスログをデータベースに残しており、そのログデータを閲覧するページを作成しております。
初期表示では以下のように、先頭からいくつかのログデータだけを表示させます。

日時 ユーザー名 内容
19/12/10 09:00 ユーザーA ログイン
19/12/10 09:30 ユーザーA ユーザー追加
19/12/10 09:32 ユーザーB ログイン

1 Next

下にある「1」や「Next」は該当のページを開くためのリンクで、例えば「Next」をクリックすることで次のレコードからまたいくつかのデータが表示されます。

日時 ユーザー名 内容
19/12/10 09:54 ユーザーA ログアウト
19/12/10 10:08 ユーザーB ログアウト
19/12/10 10:11 ユーザーC ログイン

PREV 1 2 Next

太字になっているところは現在のページを表し、それ以外が該当のページに飛ぶためのリンクになっています。
今回困っているのは、このリンクを用いて該当するデータを表示させる処理が上手くいっていないことです。

ログページの概要

ビュースクリプトLog.cshtml:今回のログデータを表示させるページ。ログの期間やログ内容などの条件を指定する検索フォームがある。またsection scritpsを用いてコントローラーのログ検索アクションを呼び出す関数をJavaScriptで記述。

<table align="center">
  <tr>
    <th>期間</th>
    <td>
      <input type="date" id="startdate" name="startdate" /><input type="date" id="enddate" name="endate" />
    </td>
  </tr>
  <tr>
    <th>その他条件</th>
    <td>
      <label><input type="checkbox" name="chk1" value="login" /> ログインログを検索</label>
      <label><input type="checkbox" name="chk1" value="userinfo" /> ユーザー情報ログを検索</label>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="submit" value="検索" onclick="getlog(1);" />
    </td>
  </tr>
</table>
<div id="logtable"></div>

@section scripts{
  <script>
    function getlog(pno) {
      var search = [];
      var chk1 = document.getElementsByName('chk1');
      for (let i = 0; i < chk1.length; i++) {
        if (chk1[i].checked) {
          search.push(chk1[i].value);
        }
      }

      var sdate = document.getElementById('startdate').value;
      var edate = document.getElementById('enddate').value;

      $.ajax({
        url: "/Log/GetLog",
        type: 'POST',
        data: { 'StartDate': sdate, 'EndDate': edate, 'Search': search, 'Page': pno },
        datatype: 'html',
        async: true
      }).done(function (data) {
        $('#logtable').html(data);    // GetLogから返送された部分ビューのHTMLデータを差し込み
      });
    }
  </script>
}


部分ビュー_Log.cshtml:実際のログデータの表示部分を担当。

@model IEnumerable<Project.Models.LogData>
<table align="center" border="1">
  <tr>
    <th>日時</th><th>ユーザー名</th><th>内容</th>
  </tr>
  @foreach (var item in Model) {
    <tr>
      <td>@Html.DisplayFor(modelItem => item.Date)</td>
      <td>@Html.DisplayFor(modelItem => item.UserName)</td>
      <td>@Html.DisplayFor(modelItem => item.Log)</td>
    </tr>
  }
</table>


コントローラーLogController.cs:アクションGetlogはajax経由で呼び出され、ページ数に応じデータベースから取得したログデータを部分ビューに組み込んで返送します。

public ActionResult GetLog(DateTime StartDate, DateTime EndDate, string[] Search, int Page)
{
  var loglist = (from a in db.AccessLogs
      where a.Date >= StartDate && a.Date <= EndDate && Search.contains(a.Log)    // 期間や条件によるデータの絞り込み
      orderby a.Date ascending select a).Skip((Page - 1) * 3).Take(3).ToList();

  ViewBag.Flg == true;
  return PartialView("_Log", loglist);
}

これまでに試したこと

●_Log.cshtmlのテーブル内にリンク用のカラムを追加し、そこからJavaScriptを呼び出す

@model IEnumerable<Project.Models.LogData>
<table align="center" border="1">
  // 省略
  <tr>
    <tr colspan="3">  // 実際には自作ビューヘルパーを呼び出して現在のページ数に応じここに表示させるリンクを変えている
      <a href="#" onclick="getlog(1);">1</a>
      <a href="#" onclick="getlog(2);">NEXT</a>
    </tr>
  </tr>
</table>


リンク自体はちゃんと表示されましたが、getlog(pno)を呼び出すリンクが_Log.cshtml、getlog(pno)の記述がLog.cshtmlと分かれているせいかリンクによるgetlog(pno)の呼び出しが上手く利きませんでした。

●先程のリンクをLog.cshtmlに記述し、JavaScriptの呼び出しが利くようにする

// 省略
<div id="logtable"></div>
@if ((bool)ViewBag.Flg == true)  // アクションメソッドの中でViewBag.Flgを設定
{
  <div>  // 実際には自作ビューヘルパーを呼び出して現在のページ数に応じここに表示させるリンクを変えている
    <a href="#" onclick="getlog(1);">1</a>
    <a href="#" onclick="getlog(2);">NEXT</a>
  </div>
}
// 省略


リンクがそもそも表示されませんでした。あくまでも自分の推測ですが、アクションメソッドが<div id="logtable"></div>の部分だけを更新して、Log.cshtmlそのものを更新していないからだと思われます。

質問

以上のように検索フォームは本体のビュー、検索結果のログデータ表示には部分ビューを使用している状態で、レコード遷移用のリンクをどこかに表示し、押されたリンクに応じて該当するレコードを検索し再度部分ビューにデータを表示させるにはどのような記述を行えばいいでしょうか?リンクには特にこだわっていないので、例えばリンクを全てボタンに変えてしまっても大丈夫です。
ご教授のほどよろしくお願いいたします。

追記:開発環境

開発ツール:Visual Studio 2017
フレームワーク:.NET Framwork 4.6.1

また「部分ビューでのonclickイベントによるJavaScriptの実行」とタイトルにはありますが、他の手段で実現が可能であればそれでも構いません。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • SurferOnWww

    2019/12/10 14:46

    それを質問欄を編集して追記するようお願いします。コメント欄は初期画面では閉じているので見ない人がいますから。

    キャンセル

  • t.okuno

    2019/12/10 15:03

    再度失礼いたしました。
    先程の情報を質問欄に追記いたしました。

    キャンセル

  • SurferOnWww

    2019/12/11 09:12

    回答しましたが、読んだ・読まなかった、役に立った・立たなかった、役に立たなかったなら何故かぐらいはフィードバックしてください。

    キャンセル

回答 1

checkベストアンサー

+2

ページングが可能であれば表題の手段には特にこだわりません。

中身の動きがよく分からないものを使うのは嫌だから自力でコードを書いて実装したいということでなければ、PagedList NuGet パッケージをインストールして使うことをお勧めします。

イメージ説明

具体的な設定手順は以下のチュートリアルを見てください。

チュートリアル: ASP.NET MVC アプリケーションでの Entity Framework による並べ替え、
フィルター処理、およびページングの追加
https://docs.microsoft.com/ja-jp/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application

部分ビューとか onclickイベントとか JavaScript とかを考えなくても、わずかなコーディングで、上のチュートリアルの画像にあるページング機能を容易に実装できます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/12/11 09:13

    早速インストールして使ってみたところ、思い通りの処理が記述できました。
    教えてくださってありがとうございます!

    キャンセル

  • 2019/12/11 09:15

    私の質問欄へのコメントと質問者さんの上のコメントが前後してしまいました。すみません。

    キャンセル

  • 2019/12/11 09:18

    こちらこそ、回答が遅れて申し訳ありませんでした。

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る