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

Question

過去に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の実行」とタイトルにはありますが、他の手段で実現が可能であればそれでも構いません。

Comments

[退会済みユーザー]

開発環境を書いてください。特に CORE なのか .NET Framework ベースなのかと、そのバージョン。あと、Visual Studio のバージョンも書いてください。

質問の最初の方を見ると（今はそこしか見てませんが）ページングができればよさそうに見えます。ページングという目的が果たせれば、表題の「部分ビューでのonclickイベントによるJavaScriptの実行」という手段にはこだわらないということで良いですか？

[t.okuno]

失礼いたしました。
開発環境はVisual Studio 2017で.NET Framework 4.6.1を使用しています。
また、仰る通りページングが可能であれば表題の手段には特にこだわりません。

[退会済みユーザー]

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

[t.okuno]

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

[退会済みユーザー]

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

Answer 1

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

中身の動きがよく分からないものを使うのは嫌だから自力でコードを書いて実装したいということでなければ、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 とかを考えなくても、わずかなコーディングで、上のチュートリアルの画像にあるページング機能を容易に実装できます。

Comments

[t.okuno]

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

[退会済みユーザー]

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

[t.okuno]

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