Ajaxを用いたデータベースと連動したList機能の実現

前提・実現したいこと

いつもお世話になっております。ASP.NET mvc5 掲示板を作っている初学者です。
現在、Ajax機能を用いてボタンをクリックした際にボタン名に合致するカテゴリーごとにソートする機能を実装していたところ、データではなくSQL文が表示されてしまう問題が発生したため質問を投稿しました。ボタンを表示した際にSQL文ではなくソートをかけたデータが表示される実装を実現したいです。

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

ALLと記されたボタンをクリックするとSQL文が表示されてしまします。これをSQL文ではなくデータを表示するようにしたいです。

該当のソースコード

View

c#
1    @using (Ajax.BeginForm("Topics", new AjaxOptions()
2    {
3        UpdateTargetId = "TopicList"
4    }))
5    {
6        <input type="submit" name="All" value="ALL" />
7        <input type="submit" name="Turf" value="芝" />
8    }
9    <div>
10        <span id="TopicList"></span>
11    </div>
12

Controller

c#
1        // GET: NewTopics
2        // ページを開いた際にまず全件表示する
3        public async Task<ActionResult> Index()
4        {
5
6            var Topics = db.Topics.Include(t => t.AspNetUsers).Include(t => t.Categories).Include(t => t.Regions);
7            return View(await Topics.ToListAsync());
8        }
9
10        public IQueryable Topics(string All, string Turf)
11        {
12            var topics = db.Topics.Include(t => t.AspNetUsers).Include(t => t.Categories).Include(t => t.Regions);
13            if (All != null)
14            {
15                // Allが押された場合の処理
16                topics = db.Topics.Include(t => t.AspNetUsers).Include(t => t.Categories).Include(t => t.Regions);
17            }
18
19            if (Turf != null)
20            {
21                // 芝が押された場合の処理
22                topics = db.Topics.Include(t => t.AspNetUsers).Include(t => t.Categories).Include(t => t.Regions).Where(t => t.CategoryId == 1);
23            }
24
25
26            return topics;
27        }

追記　試したこと

public IQueryable Topics(string All, string Turf){}ではQueryの実行がされないため、返り値にはSQL文が出るという旨の指摘をいただいたので試してみたのですが、List形式で実行しようと最後の２行として2種類を試みましたが、なぜどちらともにエラーが出るのかわからないです。お手数ですが、添削いただけるとありがたいです。

c#
1        public async Task<ActionResult> Topics(string All, string Turf)
2        {
3
4            var topics = db.Topics.Include(t => t.AspNetUsers).Include(t => t.Categories).Include(t => t.Regions);
5            if (All != null)
6            {
7                // Allが押された場合の処理
8                topics = db.Topics.Include(t => t.AspNetUsers).Include(t => t.Categories).Include(t => t.Regions);
9            }
10
11            if (Turf != null)
12            {
13                // 芝が押された場合の処理
14                topics = db.Topics.Include(t => t.AspNetUsers).Include(t => t.Categories).Include(t => t.Regions).Where(t => t.CategoryId == 1);
15            }
16            // ここから2行どちらともがエラーになります。
17            var result = await Topics.ToListAsync(); // ToArrayAsync()？
18            return topics.ToListAsync;
19        }

参考にしたサイト

Ajax.BeginFormの簡単な使い方
http://happyskiing.blog89.fc2.com/blog-entry-9.html

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

VS2017
Windows7
.Net Framework 4.6.1
MVC5

退会済みユーザー

2018/08/27 12:37

質問者さん、本を買って読んで体系的な勉強はしてますか？　それをやって基本的な知識を身に着けないと話が通じにくく、そこがそもそもの問題だと思っているのですが。　先のスレッドで私が言ったこと聞いて部分ビューを使ってますか？　あと、＠Ajax.ActionLink の方が目的に合ってそうですが、それは考えましたか？

pomu.pomupomu

2018/08/28 01:50

本は持ってるのですが、作りながら必要そうな部分を読んでその都度勉強するにしていました。https://www.amazon.co.jp/ASP-NET-MVC5実践プログラミング-山田-祥寛/dp/4798041793

退会済みユーザー

2018/08/28 01:55

その本は自分は持ってませんが、AlaxHelper を使った基本的な形は説明されているのでは？　自分は同じ著者が書いた MVC1 の本を持ってますが、ちゃんと部分ビューの使い方も書いてありました。よく読みましょう。

pomu.pomupomu

2018/08/28 01:57

部分ビューになる前にそもそも動くのかな・・・と思い動かなかくて投稿した次第でした。すみません。＠Ajax.ActionLink は考えていませんでした。すぐ調べます。

退会済みユーザー

2018/08/28 02:04

> 部分ビューになる前にそもそも動くのかな・・・と思い動かなかくて投稿した次第でした。 ←そういうのダメです。それは混乱を招くだけで情報として提供すべきものではありません。止めましょう。

pomu.pomupomu

2018/08/28 02:06

わかりました。次からやめるようにします。

退会済みユーザー

2018/08/28 02:14

Ajax.BeginForm を使うか Ajax.ActionLink を使うかの選択は「Ajax で部分ビュー」ということについては本質的なことではありません。ただ、ActionLink にした方が Bootstrap の Menu と組み合わせるなど、使いやすそうと言うだけです。

pomu.pomupomu

2018/08/28 05:44

手こずっててまだ完成していないので、改めての返信等、申し訳ありませんがしばらく時間をください。しかし、回答をいただいたことでどうやら部分ビューじゃなくてもいいのでは？と最初は思っていましたが、たしかに部分ビューの方がList表示をするなら都合が良さそうだ、というところにはたどり着きました。ありがとうございます。

退会済みユーザー

2018/08/28 06:28

> 部分ビューじゃなくてもいいのでは？と最初は思っていましたが ←　じゃあどうするつもりだったのですか？　ホントに部分ビューを使わないでやるということにしていたのであれば、そのことは最初の質問の一行目に書いておいてほしかったですね。たぶん多数の回答者・閲覧者が余計な時間と労力を使ったと思いますよ。

pomu.pomupomu

2018/08/28 08:49

「同一のビューの中でAjax機能組み込めるのでは？」という部分ビューに拘らなくてはならない理由がわからず、Ajaxについての勘違いをしていたので部分ビューでなくてもよいのではと思っていました。今となっては、「いや、部分ビューじゃないと都合よくいかない」というように考えています。

退会済みユーザー

2018/08/28 10:11 編集

私のアドバイス通りにしてくれとまでは言うつもりはないですが、何度か部分ビューを使うようアドバイスしているんですから、違うことを考えてそちらの方向に進むならそう言ってください。こちらはアドバイスに沿ってやっていると思っているので、違うと迷走するばかりです。

退会済みユーザー

2018/08/28 10:20

あと、XY 問題に陥ってないか、質問する際はよく考えてみることをお勧めします。 https://ja.meta.stackoverflow.com/questions/2701/xy-%E5%95%8F%E9%A1%8C-%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%A7%E3%81%99%E3%81%8B

pomu.pomupomu

2018/08/31 04:29

申し訳ありません。もし方向がずれる場合はちゃんと伝えます。また、xy問題についての記事を読んでまさに自分ではと思ったのでよく考えます。わざわざ記事までありがとうございます。

行動規範の内容に同意します

回答3件

ベストアンサー

部分ビュー (.cshtml) がないですよね？　多分それがすべての問題の基だと思います。迷走しそうな感じなので情報提供しておきます。

まず、AjaxHelper が動くようにしてください。テンプレートで作る MVC5 アプリはデフォルトでは AjaxHelper が動かないはずです。詳しい手順は以下の記事を見てください。

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

そして部分ビューを使ってください。上の記事の画像は Ajax.ActionLink を使って以下の AdventureWorksLT の Customers テーブルから顧客の名前を取得してビュー Index.cshtml にアクションリンク一覧を作成し、それをクリックすると Ajax を利用して指定された顧客の詳細情報を取得して部分ビュー (Details.cshtml) に表示するというものです。

上の記事の画像を表示したサンプルコードもアップしておきます。これを見れば私が部分ビューがないのではと指摘した意味が分かるのではないかと思います。

コントローラー/アクションメソッド

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AdventureWorksLT;
using Mvc5App.Models;

namespace Mvc5App.Controllers
{
    public class CustomerController : Controller
    {
        public ActionResult Index()
        {
            var db = new AdventureWorksLTEntities();

            // Take(10) としたのは単に全レコード取得すると長くなり
            // すぎるという理由
            var list = (from c in db.Customer
                        orderby c.CustomerID ascending
                        select c).Take(10);

            return View(list);
        }

        public ActionResult Details(int id)
        {
            var db = new AdventureWorksLTEntities();

            var details = (from c in db.Customer
                           where c.CustomerID == id
                           select c).FirstOrDefault();

            return PartialView(details);
        }
    }
}

ビュー Index.cshtml

@model IEnumerable<AdventureWorksLT.Customer>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<table>
    <tr>
        <td>
            <ul>
                @foreach (var item in Model)
                {
                    <li>
                        @Ajax.ActionLink(
                            item.Title + " " + item.FirstName + " " + item.LastName,
                            "Details",
                            new { id = item.CustomerID },
                            new AjaxOptions() { UpdateTargetId = "results" })
                    </li>
                }
            </ul>
        </td>
        <td>
            <div id="results"></div>
        </td>
    </tr>
</table>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

部分ビュー Details.cshtml

@model AdventureWorksLT.Customer

<fieldset>
    <legend>Customer Details</legend>
    @Html.DisplayNameFor(model => model.Title): @Html.DisplayFor(model => model.Title)
    <br />
    @Html.DisplayNameFor(model => model.FirstName): @Html.DisplayFor(model => model.FirstName)
    <br />
    @Html.DisplayNameFor(model => model.MiddleName): @Html.DisplayFor(model => model.MiddleName)
    <br />
    @Html.DisplayNameFor(model => model.LastName): @Html.DisplayFor(model => model.LastName)
    <br />
    @Html.DisplayNameFor(model => model.CompanyName): @Html.DisplayFor(model => model.CompanyName)
    <br />
    @Html.DisplayNameFor(model => model.SalesPerson): @Html.DisplayFor(model => model.SalesPerson)
    <br />
    @Html.DisplayNameFor(model => model.EmailAddress): @Html.DisplayFor(model => model.EmailAddress)
    <br />
    @Html.DisplayNameFor(model => model.Phone): @Html.DisplayFor(model => model.Phone)
</fieldset>

投稿2018/08/28 01:53

退会済みユーザー

総合スコア0

pomu.pomupomu

2018/08/28 09:09

回答を真似して参考にして、タブをクリックするとカテゴリ別に表示する機能を実装するところまでたどり着くことができました。ありがとうございました。

行動規範の内容に同意します

cs
1var result = await Topics.ToListAsync(); // ToArrayAsync()？
2return topics.ToListAsync;

↓

cs
1var result = await topics.ToArrayAsync();
2return result;

とか。

投稿2018/08/28 00:26

hidori

総合スコア402

退会済みユーザー

2018/08/28 01:16

上の回答は public async Task<ActionResult> Topics(string All, string Turf) の戻り値のことを言っているのですよね？　だとすると、それでは依然としてエラーかと。問題は上の回答への私のコメントで書いたように部分ビュー (.cshtml) が無いことだと思われます。

pomu.pomupomu

2018/08/28 01:59

回答ありがとうございます。開発環境が自宅にないので少し返信が遅れますが、できるだけ早く試してみます。

行動規範の内容に同意します

IQueryableのままではまだクエリを実行していない(SQLが露出する)ので、実行してください。

投稿2018/08/27 08:44