[ASP.NET]ボタンを押したときに部分ビューを表示したい

Question

前提・実現したいこと

データベースに接続して取得したデータを部分ビューとして表示したいです。

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

現在、検索項目を指定して検索ボタンを押すと、ページ遷移して次のページにデータベースから取得したデータを貼り付けてしまいます。本来であれば、検索ボ項目を指定する同じページの余白に出力したいと考えています。

エラーメッセージ

エラーはなく、別のページに遷移して出力しています。

該当のソースコード

@{
    ViewData["Title"] = "リポジトリ検索";
}

@model Search
    <form asp-action="Index" asp-controller="Search" method="post">
        <div class="col-md-6">
            <label asp-for="GyoshuMei"></label>
            @{
                var industories = ViewBag.Industories;
                var industoryList = new List<SelectListItem>();
                foreach (var c in industories)
                {
                    var s = new SelectListItem();
                    s.Text = c.GyoshuMei.ToString();
                    s.Value = c.GyoshuMei.ToString();
                    industoryList.Add(s);
                }
            }
            @Html.DropDownListFor(model => model.GyoshuMei, industoryList, "全件")
        </div>
        <br />
        <br />
        <div class="col-md-12">
            <label asp-for="SystemMei"></label>
            @{
                var systemTypes = ViewBag.SystemTypes;
                var systemTypeList = new List<SelectListItem>();
                foreach (var c in systemTypes)
                {
                    var s = new SelectListItem();
                    s.Text = c.SystemMei.ToString();
                    s.Value = c.SystemKB.ToString();
                    systemTypeList.Add(s);
                }
            }
            @Html.DropDownListFor(model => model.SystemKB, systemTypeList, "全件")
        </div>
        <br />
        <br />
        <div class="col-md-12">
            <label for="keyword">キーワード</label>
            @Html.TextBoxFor(model => model.Keyword1)
            @Html.TextBoxFor(model => model.Keyword2)
            @Html.TextBoxFor(model => model.Keyword3)
            @Html.RadioButtonFor(model => model.OnTypeChanged, 0, new { @id = "AND" })AND
            @Html.RadioButtonFor(model => model.OnTypeChanged, 1, new { @id = "OR" })OR
        </div>
        <br />
        <div>
            <input id="search" type="submit" value="検索">
        </div>
        <br />
        <br />
        <br />
        @Html.PartialAsync("_SearchResult")
    </form>

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication3.Models;
using WebApplication3.Modules;

namespace WebApplication3.Controllers
{
    public class SearchController : Controller
    {
        mdlCommon mdlCmn = new mdlCommon();

        [HttpGet]
        public IActionResult Index()
        {
            List<Search> industoryList = new List<Search>();
            industoryList = mdlCmn.GetGyoshu();
            ViewBag.Industories = industoryList;

            List<Search> systemTypeList = new List<Search>();
            systemTypeList = mdlCmn.GetSystemTypes();
            ViewBag.SystemTypes = systemTypeList;

            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Index(Search search)
        {
            List<Search> results = new List<Search>();
            results = mdlCmn.GetResult(search);
            ViewBag.SearchResults = results;
            return PartialView("_SearchResult", results);
        }
}

試したこと

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

VS2019
ASP.NET Core MVC
Core Version 3.1.1

Comments

[退会済みユーザー]

コードは ``` と ``` で囲ってください。インデントされて見やすくなるので。インデントされてないコードは質問者さん自身でも読む気がしないのでは？

[退会済みユーザー]

Core のバージョンを書いてください。

[K_aito0122]

大変失礼いたしました。ご指摘の通り修正しました。

[退会済みユーザー]

> AJAXは使用しません

とのことですが、AJAX を使わないと望むこと（検索結果を「同じページの余白に出力」）はできないと思います。Core では .NET のような Ajax ヘルパーが使えないそうなので、それなりに面倒そうですが。

[K_aito0122]

AJAXを使わないと実現できないのであれば使おうと思います。

[退会済みユーザー]

検索結果を JSON で返すアクションメソッドを作って、それを jQuery ajax で呼び出して、返ってきたデータを JavaScript で「同じページの余白に出力」するということでいかがですか？　コードは書けますか？

[K_aito0122]

同じページの余白に出すことができれば構いません。すいません、正直コードは書けません。

[退会済みユーザー]

> 正直コードは書けません。

それでは無理そうですね。Core が必須でなければ .NET Framework の MVC5 で ajax ヘルパーを使って部分ビューを「同じページの余白に出力」することを考えた方がよさそうです。

[退会済みユーザー]

Core は必須ということですと、

(1) 上のコメントに書いたように、検索結果を JSON で返すアクションメソッドを作って、それを jQuery ajax で呼び出して、返ってきたデータを JavaScript で「同じページの余白に出力」する。

または、

(2) .NET Framework MVC5 で使っている JavaScript ライブラリ jquery.unobtrusive-ajax.js を入手して、その助けを借りて部分ビューを「同じページの余白に出力」する。

・・・ぐらいしか手はなさそうです。(1) は JSON, jQuery ajax, JavaScript の知識がないと何ともならないと思います。(2) はそのあたりの知識は無くてもかなりの部分デザイナで作れますが、Core では ajax ヘルパーが使えないのが面倒です。

どうしますか？　ギブアップするならそれでもかまいませんので、その旨書いてください。

[K_aito0122]

(1)の方法を採りたいと思います。
アクションメソッドからJSONで返すというのは、return JSON(DBから取得したデータ);
という形でしょうか。

[退会済みユーザー]

そうです。必要なら後で簡単なサンプルを回答欄に書いておきますので要・不要を言ってください。

[K_aito0122]

サンプルをぜひいただきたいです。よろしくお願いいたします。

[退会済みユーザー]

簡単なサンプルを回答欄に書いておきました。詳しい説明はしてませんので、不明点があれば回答のコメント欄で質問してください。

[退会済みユーザー]

今更ながらですが、回答のコメント欄に私が書いた (2) のやり方に方針変更した方が良さそうな気がします。(1) の方法はこれから先まだまだ苦労が多そうですが、(2) の方法ならすでにほぼ完成しているコードに少し手を加えるだけでできそうです。どうしますか？

[K_aito0122]

では(2)の方法を試したいと思います。

[退会済みユーザー]

(1) の方法とは別の回答欄に (2) の方法の概略を書いておきます。

[K_aito0122]

ありがとうございます。

[退会済みユーザー]

質問者さんが反応なしになってしまいましたが、この先どうするのでしょうか？　レスに対してフィードバックなしの無言はよろしくないですよ。考え中で時間がかかりそうならその旨書いてください。

ギブアップならそれでもかまいませんので、放置しておかないでギブアップ宣言してこのスレッドはクローズしてください。

Answer 1

質問に対する 2020/03/05 09:27 の私のコメントで「(1) の方法とは別の回答欄に (2) の方法の概略を書いておきます」と書きましたが、それを以下に書きます。

(2) の方法というのは ".NET Framework MVC5 で使っている JavaScript ライブラリ jquery.unobtrusive-ajax.js を入手して、その助けを借りて部分ビューを「同じページの余白に出力」する" です。

質問さんのコードはほぼ完成していて、View の［検索］ボタンをクリックすると form 要素、

<form asp-action="Index" asp-controller="Search" method="post">

・・・の通り form データが Search/Index に POST 送信され、[HttpPost] が付与されている アクションメソッド Index がそれを受けて部分ビューを返す。部分ビューの内容は期待通りになっている。

唯一期待と異なるのは、質問の View の コードの @Html.PartialAsync("_SearchResult") の部分に部分ビューの内容を表示したいのに、ブラウザの現在のウィンドウ全体が部分ビューに書き換えられてしまうということだと理解してレスします。理解が違っていたら、どこがどう違うのか連絡ください。

(1) まず、jquery.unobtrusive-ajax.js を入手して以下の画像のように wwwroot 下のフォルダに配置します。（もしくは CDN を使ってください）

注: jquery.unobtrusive-ajax.js は NuGet で入手できるのですが、Core の場合は NuGet からインストールするとスクリプトファイルが wwwroot に配置されません。LibMan を使えということのようですが jquery.unobtrusive-ajax.js は登録されてないようなので、自分は .NET Framework の既存の MVC5 プロジェクトからコピーしました。 NuGet から MVC5 にインストールする方法は以下の記事を見てください。

MVC5 で AjaxHelper が働かない
http://surferonwww.info/BlogEngine/post/2018/05/28/ajaxhelpers-do-not-work-on-mvc5-application-created-by-visual-studio-template.aspx

(2) 質問の View の コードの @Html.PartialAsync("_SearchResult") を <div id="result"></div> に書き換えます。

(3) 外部スクリプトファイル jQuery.js と上記 (1) の jquery.unobtrusive-ajax.js がダウンロードされるよう、View に script 要素を設定します。必ず jQuery.js が先に来るようにしてください。

_Layout.cshtml を使っていれば <script src="/lib/jquery/dist/jquery.min.js"></script> は設定されるようになっているので、View に以下のように　jquery.unobtrusive-ajax.js だけ追加されるように設定すれば良いはずです。

@section Scripts {
    <script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js"></script>
}

(4) 質問の View のコードの form 要素に以下の属性を追加します。意味は jquery.unobtrusive-ajax.js を使って ajax で要求を出し、返ってきた応答で id が result の要素（上記 (2) で設定）の中身書き換えるということです。

data-ajax="true" data-ajax-mode="replace" data-ajax-update="#result"

お試しください。

【追記】

下の 2020/03/09 10:57 の私のコメントで、Fiddler を使って要求・応答をキャプチャするとどのような情報が得られるか、回答欄に画像をアップしておきますと書きましたが、それを以下に書きます。

下の画像は Fiddler のもので、質問者さんのケースと同様に、jquery.unobtrusive-ajax.js の助けを借りて、部分ビューを呼び出すアクションメソッドにフォームデータを POST 送信し、返ってきた部分ビューの応答を同じページ内に表示するアプリの要求・応答をキャプチャしたものです。

検索条件を変えて［検索］ボタンをクリックするのを 3 回繰り返したもので、左のウィンドウの #2 が 1 回目、#3 が 2 回目、#4 が 3 回目で、右上のウィンドウには #3 の要求が、右下のウィンドウには #3 の応答が表示されています。

赤枠で下記んだ部分が POST 送信されたフォームデータです。青枠で囲った部分が部分ビューから帰ってきた html ソースで、これが私の回答で、

(2) 質問の View の コードの @Html.PartialAsync("_SearchResult") を <div id="result"></div> に書き換えます。

とした部分に表示されます。

質問者さんのアプリで何度か検索条件を変えて［検索］ボタンをクリックし、毎回テキストボックスやドロップダウンリストに設定した検索条件の通りにフォームデータとして送信されているか（赤枠の部分）、期待した通り応答は返ってきているか（青枠の部分）を調べれば考えるために役立つはずです。

というか、そういう情報なしでいくら考えても時間がかかるばかりですし、ひょっとしたら思い違いであらぬ方向に進んでしまうこともありそうです。

Comments

[K_aito0122]

検索項目の下に部分ビューとして出てきました。ありがとうございます。
しかし、部分ビューとして出すことができれば、検索条件を変更して再度検索ボタンを押せば部分ビューの結果が変わると思っていたのですが、それはまた別の処理が必要なのでしょうか。

[退会済みユーザー]

前にも言いましたけど、私にエスパー能力を期待しないでください。自分で調べて原因を探してください。

例えば、Fiddler などを使って要求・応答をキャプチャできるようにし、検索条件を変えてボタンをクリックするたび要求が出て応答が返ってきているか、返ってきた応答の中身がどうなっているか調べてみては？　変わらないのは同じ結果が返ってきているためでは？

そういうことが調べられるのは質問者さんだけです。そこは他人に頼らないで自助努力でお願いします。

[退会済みユーザー]

質問者さんが反応なしになってしまいましたが、この先どうするのでしょうか？　レスに対してフィードバックなしの無言はよろしくないですよ。考え中で時間がかかりそうならその旨書いてください。

ギブアップならそれでもかまいませんので、放置しておかないでギブアップ宣言してこのスレッドはクローズしてください。

[K_aito0122]

回答が遅くなり失礼しました。考えるのに時間がかかりそうです。

[退会済みユーザー]

上にも書きましたが、Fiddler などを使って要求・応答をキャプチャできるようにし、検索条件を変えてボタンをクリックするたび要求が出て応答が返ってきているか、返ってきた応答の中身がどうなっているか調べてみましょう。きっと考えるのに役に立つ情報が得られると思います。どのような情報が得られるか、回答欄に画像をアップしておきます。

[K_aito0122]

ありがとうございます。参考にしてみます。

[K_aito0122]

解決しました。ありがとうございました。

[退会済みユーザー]

何が問題だったのか、どのようにしたら解決したのかを書いていただけると幸いです。

[K_aito0122]

遅くなりましたが、[ValidateAntiForgeryToken]を付けていたことが原因でした。

[退会済みユーザー]

その検証のためのトークンは隠しフィールドとクッキーに含まれていて、ボタンクリックで部分ビュー用のアクションメソッドに送信されるようになっているので、問題ないはずです。それを外すのは CSRF に対して脆弱になるので、やめた方がよさそうです。原因を探して属性を付与したままにしておいても問題なくなるようにすることをお勧めします。

[K_aito0122]

再度[ValidateAntiForgeryToken]を付けて試しましたが、正常に動作しました。

Answer 2

質問のコメント欄に書いた (1) の方法、即ち、検索結果を JSON で返すアクションメソッドを作って、それを jQuery ajax で呼び出して、返ってきたデータを JavaScript で「同じページの余白に出力」する簡単なサンプルを以下に書きます。

使ったのは Microsoft が提供する Northwind サンプルデータベースの Customers テーブルで、以下のような構造になっています。この CompanyName をドロップダウンリストに表示し、ユーザーが選択してボタンをクリックすると jQuery ajax で該当するレコードを JSON 文字列として取得し、同じページの指定した場所に書き出すものです。

以下、サンプルコードです。

Model

Northwind サンプルデータベースをリバースエンジニアリングで自動生成させたもの。他にコンテキストクラスも生成されます（省略）。

using System;
using System.Collections.Generic;

namespace MvcCoreApp
{
    public partial class Customers
    {
        public Customers()
        {
            CustomerCustomerDemo = new HashSet<CustomerCustomerDemo>();
            Orders = new HashSet<Orders>();
        }

        public string CustomerId { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }

        public virtual ICollection<CustomerCustomerDemo> CustomerCustomerDemo { get; set; }
        public virtual ICollection<Orders> Orders { get; set; }
    }
}

Controller / Action Method

アクションメソッドの jQueryAjax はブラウザに表示する画面を作るものです。CustomerId と CustomerName のリストを ViewData を使って View に渡し、View ではそれをドロップダウンリストで表示します。

JsonDetails2 は JSON 文字列を返すアクションメソッドです。引数 id に CustomerId を与えて呼び出すと、その id に該当するレコードが JSON 文字列として返ってきます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace MvcCoreApp.Controllers
{
    public class AjaxController : Controller
    {
        private readonly NorthwindContext _context;

        public AjaxController(NorthwindContext context)
        {
            _context = context;
        }

        public IActionResult jQueryAjax()
        {
            var list = (from c in _context.Customers
                        orderby c.CustomerId ascending
                        select new
                        {
                            id = c.CustomerId,
                            name = c.CompanyName
                        }).Take(10);    // 全部取得すると 91 もあって長すぎるので Take(10) した
            ViewData["customers"] = list;
            return View();
        }

        public ActionResult JsonDetails2(string id)
        {
            // Core では Request.IsAjaxRequest() は使えない
            if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
            {
                var details = (from c in _context.Customers
                               where c.CustomerId == id
                               select c).FirstOrDefault();

                return Json(details);
            }

            return Content("AJAX を使った非同期呼び出ししかできません。");
        }
    }
}

View

Visual Studio のテンプレートを使って自動生成される _Layout.cshtml を使うことが前提です（使わないと必要な外部スクリプトファイルがダウンロードされませんので注意）。［詳細表示］ボタンをクリックするとドロップダウンリストで選択されている value (CustomerId) を取得し、それを jQuery ajax を使って上のコードの JsonDetails2 に送信します。成功すると CustomerId に該当するレコードの JSON 文字列が返ってきて　JavaScript オブジェクトに変換されて success に指定したコールバックの引数 data に渡されます。

@{
    ViewData["Title"] = "jQueryAjax";
}

<h1>jQueryAjax</h1>

@Html.DropDownList(
        "dropdownlist1",
        new SelectList(
            (System.Collections.IEnumerable)ViewData["customers"],
            "id",
            "name"
            )
    )

<input type="button" value="詳細表示" onclick="disp();" />

<div id="result"></div>

@section Scripts {
   <script type="text/javascript">
        //<![CDATA[
        
        // Core の場合はプロパティ名の最初の文字が小文字になるので注意
       function disp() {
           var selectedValue = $("#dropdownlist1  option:selected").val();

           $.ajax({
                type: "GET",
                url: "/Ajax/JsonDetails2/" + selectedValue,                
                success: function (data) {
                    $("#result").empty();
                    $("#result").append(
                        '<p>' + "<b>Customer 詳細</b>" + '<br />' +
                        'CompanyName: ' + data.companyName + '<br />' +
                        'ContactName: ' + data.contactName + '<br />' +
                        'ContactTitle: ' + data.contactTitle + '<br />' +
                        'Address : ' + data.address  +
                        '</p>'
                    );
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#result').text('textStatus: ' + textStatus + 
                        ', errorThrown: ' + errorThrown);
                }
           });            
       }

       //]]>
   </script>
}

結果は以下のようになります。赤枠で囲った部分が success に指定したコールバックが書き込んだものです。やり方を変えれば部分ビューも使えますのでチャレンジしてみてください。

Comments

[K_aito0122]

_Layout.cshtmlを使うことが前提とありますが、使うにあたって明示的に何かコードを記載しなければなりませんか？Views/Sharedの配下にあるだけでいいのでしょうか。

[退会済みユーザー]

> Views/Sharedの配下にあるだけでいいのでしょうか。

「配下にある」というのが何を意味しているのか分かりませんが・・・

アクションメソッドを右クリックして「ビューの追加」で View を自動生成させる際のデフォルトで「レイアウトページを使用する」にチェックが入っているので、その設定で View を生成すれば自動的に _Layout.cshtml を使うコードになるはずです。それ以上のことはする必要はありません。

[K_aito0122]

Viewの　url: "/Ajax/JsonDetails2/" + selectedValue, のselectedValueという部分はJsonDetail2の引数になるものですか。

[退会済みユーザー]

そうです。

Startup.cs でルーティングのパターンが pattern: "{controller=Home}/{action=Index}/{id?}"); と定義されているはずで、それが前提です。

[K_aito0122]

その引数にモデルを渡すということは可能でしょうか。
Javascriptの部分にViewで使っているmodelという変数を使いたいのですが。

[退会済みユーザー]

できません。　url: "/Ajax/JsonDetails2/" + selectedValue, は url になるということから考えればできないことは聞くまでもないと思うのですが。

そもそも何がしたいのですか？　何か見当違いのことを考えているような気がするのですが。

[K_aito0122]

２つのドロップダウンリストの値と3つのテキストボックスの値をsql文で使うためにそれらをコントローラに返したいです。

[退会済みユーザー]

クエリ文字列にして渡してはいかが？　もしくは POST データとして渡すとか。

[K_aito0122]

POSTデータで渡すと、return JSON(SQLの結果);としたときにJSONファイルの保存を聞かれるのですが、上記の教えていただいたActionメソッドとはやり方が変わるのですか？

[退会済みユーザー]

質問者さんが何をしてるか分かりませんので、そういうことを聞かれても分かりません。情報が限られているここのような掲示板で、エスパーでもない私のような回答者が、質問者さんが何が分からないのか何を聞きたいのかを感じて、手取り足取り教えるのは無理があります。

[x_x]

jQuery を使うのであれば JSON を返すよりも、HTML を返して .load() にしたほうがわかりやすいかもしれませんね。
https://api.jquery.com/load/

[退会済みユーザー]

そこは私の回答に「やり方を変えれば部分ビューも使えますのでチャレンジしてみてください。」と書いたように、JSON でなく部分ビューを返すアクションメソッドを作って、それを jQuery ajax で呼んで 、返ってきた応答 data を $("#result").append(data); で行けるはずです。ただ、質問者さんは、その前の段階で「JSONファイルの保存を聞かれる」とかの訳の分からない状況になっているようですので、そこをクリアしないと何ともならないようですが。

[K_aito0122]

クエリ文字列を渡すようにしようと思いますが、そのクエリ文字列にどちらのラジオボタンが押されたかも乗せたいのですが、view側でどちらのラジオボタンが押されたかは判断可能ですか？

[退会済みユーザー]

> そのクエリ文字列にどちらのラジオボタンが押されたかも乗せたいのですが、view側でどちらのラジオボタンが押されたかは判断可能ですか？

質問者さん、情報少なすぎです。私にエスパー能力を期待しないでください。ラジオボタンはどこに配置されていて、どのようにして押されたかの情報を取得して、どうやって「乗せる」のか、「view側」って何なのか、ここに書いてあること以外は知り得ない第三者が分かるように文書化してください。

[K_aito0122]

言葉足らずで失礼しました。
ラジオボタンはドロップダウンリストとテキストボックスと同じviewに存在しています。
ドロップダウンリストとテキストボックスの値は、
var selectedValue = $("#dropdownlist1 option:selected").val();
のように書いて取得しています。
取得した値は文字列連結を行い、
$.ajax({
　　　　type: "GET",
　　　　url: "/Ajax/JsonResult/" + 文字列連結した値,

として、JsonResultというアクションメソッドで値を受け取ろうとしています。
私はこの文字列連結した値に選択された方のラジオボタンの値も連結したいと考えています。
ラジオボタンは現在、
@Html.RadioButtonFor(model => model.OnTypeChanged, 0, new { @id = "AND" })AND
@Html.RadioButtonFor(model => model.OnTypeChanged, 1, new { @id = "OR" })OR
としています。

[退会済みユーザー]

依然としてどうしたいのか理解できていませんが、jQuery ajax による GET 要求で送信するデータをクエリ文字列に設定したいということなら、以下の記事が参考になりませんか？

jQuery.ajax の data の型
http://surferonwww.info/BlogEngine/post/2015/10/05/what-must-be-set-to-data-option-in-jquery-ajax.aspx