ASP.NET MVCのHtml.DropDownListForの変更でajaxを用いて部分的にビューを表示したい

いつもお世話になっております。やりたいことはタイトルの通りです。
環境：
windows10
Visual Studio2017
.NET FLAMEWORK 4.5.1
MVC 5.0.0
C1 ASP.NET MVC 5 アプリケーションテンプレート

<!--views/home/index.cshtml-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h1 class="page-header">ページ</h1>
    <h2 class="sub-header">お知らせ一覧</h2>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>会社名</th>
                    <th>お知らせ</th>
                    <th>日付</th>
                </tr>
            </thead>
            <tbody>
                @Html.DropDownListFor(model => model.EnviromentName, Model.EnviromentList, "選択してください", new { @class = "form-control" })
               <!--ここに部分ビューを表示したい-->
            </tbody>
        </table>
    </div>
</div>

以上のようにmodel.EnviromentNameはDBの接続設定を取ってきていて。この@Html.DropDownListForは

<select class="form-control" id="EnviromentName" name="EnviromentName"><option value="">選択してください</option>
<option value="Test">Test</option>
<option value="Demo">Demo</option>
</select>

以上のようなマークアップを生成します。DropDownList からレンダリングされるhtmlのselect要素のchangeイベントにリスナをアタッチし且つajaxを用いてviews/shared以下にある_demo.cshtml、_test.cdhtmlをこのvalueの値によってajaxを用いて画面遷移せず部分ビューをレンダリングしたいのですがどのように実装していけばよいのでしょうか？

// js/ajax.js
$(function () {

    //セレクトボックスが切り替わったら発動
    $('select').change(function () {
        var val = $(this).val();
        if (val = 'demo') {
            $.ajax({
                url: '/shared/Demo',
                type: 'GET',
                dataType: 'html',

            })
        }
        else if (val = 'test') {
            $.ajax({
                url: '/shared/Demo',
                type: 'GET',
                dataType: 'html',

            })
        }

    })
});

正しいかは分かりませんが現状jsはこんな形で書いています。。。
長くなってしまいましたが実装のヒントでも教えて頂けるとありがたいです。
よろしくお願い致します。

退会済みユーザー

2018/10/09 09:32

.NET, MVC, Visual Studio のバージョン、プロジェクトを生成するのに使ったテンプレートは何かなど、開発環境が書けない事情があるのですか？　開発環境の違いによっては話が全く変わってくることがあるのは認識してますか？

退会済みユーザー

2018/10/09 10:05 編集

コメント読んでます？　MVC のバージョンとプロジェクトを生成するのに使ったテンプレートは何かも聞いたのですけど・・・　よく読んできちんと答えてくれないと・・・

widget11

2018/10/10 02:32

情報を追記したのですがいかがでしょうか。少ない情報の中、ご親切にご回答ありがとうございます。

退会済みユーザー

2018/10/10 02:37

MVC5 であれば ASP.NET MVC 4 のタグは外してください。ASP.NET MVC Framework というタグがあるはずですのでそちらの方が良いと思います。

退会済みユーザー

2018/10/10 02:41 編集

私の回答欄に書いた私の想像は合っているでしょうか？　違う場合は、どこがどう違うのかを回答欄のコメントとして書いていただくようお願いします。想像が合っている場合も、その旨書いていただければ、もう少し詳しい情報を提供できると思います。

退会済みユーザー

2018/10/10 08:15

ASP.NET MVC 4 のタグは外して ASP.NET MVC Framework というタグがあるはずですのでそちらを付けてください。

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

回答1件

ベストアンサー

コメントに対する返事がないのであまり深く考えていませんが・・・

部分ビューに表示するのは test, demo で全く内容が違うものではなくて、会社名、お知らせ、日付という定型のもので、そのソースが DB のテーブルにあって、DropDownList で選択すると、DB から選択結果を元にレコード（会社名、お知らせ、日付）を抽出して部分ビューに表示するという話ではないかと想像しています。

であれば、Ajax ヘルパーの Ajax.BeginForm を利用することを検討してはいかがですか？

質問者さんの環境で Ajax ヘルパーが使えるかどうかはわかりませんが。（だから、MVC のバージョン、使用したテンプレートを書くように言ったのですけど）

【2018/10/10 17:14 追記】

上に書いた私の想像はほぼ合っているということですので、それに沿った追加情報としてサンプル等を以下に追記します。

まず、Ajax ヘルパーが動くように設定されているか確認してください。

VS2015 のテンプレート作った MVC5 のプロジェクトで Ajax ヘルパーが動くようにするには、以下の記事の通り必要な NuGet パッケージのインストールと設定が必要です。VS2017 は未確認ですが多分同じと思います。確認してください。

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

例として　Microsoft が無償で提供しているサンプルデータベース AdventureWorksLT から、Visual Studio のウィザードを使って Entity Data Model を作って、その中の Customer テーブルを利用します。

以下にサンプルコードをアップしておきます。以下のサンプルではボタンクリックで ajax 呼び出ししていますが、これを DropDownList の change イベントに変更するところは質問者さんの方で考えてください。

Controller / Action Method

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Mvc5App.Controllers
{
    public class AjaxController : Controller
    {
        // 部分ビュー用のアクションメソッド
        public ActionResult Details(int id)
        {
            // AdventureWorksLTEntities は Entity Data Model を生成した時に
            // 同時に生成されるコンテキストクラス。
            var db = new AdventureWorksLTEntities();

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

            return PartialView(details);
        }

        public ActionResult Index2()
        {
            var db = new AdventureWorksLTEntities();

            // Take(10) としたのは単に長さを制限するため
            var list = (from c in db.Customer
                        orderby c.CustomerID ascending
                        select new
                        {
                            id = c.CustomerID,
                            name = c.Title + " " + c.FirstName + " " + c.LastName
                        }).Take(10);
            ViewData["customers"] = list;
            return View();
        }
    }
}

ビュー Index2.cshtml

@{
    ViewBag.Title = "Index2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index2</h2>

@using (Ajax.BeginForm(
                "Details",
                new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.DropDownList(
        "id",    // これにより Details(int id) の id に自動的にモデルバインディングされる
        new SelectList(
            (System.Collections.IEnumerable)ViewData["customers"],
            "id",
            "name",
            "1"
            )
    )
    <input type="submit" value="詳細表示" />
}
<div id="result"></div>

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

部分ビュー Details.schtml

@model Mvc5App.Customer

<div>
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.NameStyle)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.NameStyle)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Title)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Title)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.FirstName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.MiddleName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.MiddleName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.LastName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.LastName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Suffix)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Suffix)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.CompanyName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.CompanyName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.SalesPerson)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.SalesPerson)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.EmailAddress)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.EmailAddress)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Phone)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Phone)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.PasswordHash)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.PasswordHash)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.PasswordSalt)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.PasswordSalt)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.rowguid)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.rowguid)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.ModifiedDate)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ModifiedDate)
        </dd>

    </dl>
</div>

実行結果は以下のようになります。赤枠で囲った部分が部分ビューです。

投稿2018/10/10 02:24

編集2018/10/10 08:14

退会済みユーザー

総合スコア0

widget11

2018/10/10 05:50

ご回答ありがとうございます。SurferOnWww様の仰るその通りで、部分ビューに表示するものは会社名、お知らせ、日付という定型のもので、DBからの選択結果をもとにレコードを抽出するもでございます。 Ajax.BeginFormに関して調べたのですが、いまいち個人的に分かりやすいリファレンスがなく。。。。やりたいことは https://blog.ch3cooh.jp/entry/20140707/1404731608 これに近いのかなと感じております。宜しくお願い致します。

退会済みユーザー

2018/10/10 08:05

上に書いた私の想像はほぼ合っているということですので、それに沿ったサンプルを追加情報として回答欄に追記しておきます。

widget11

2018/10/19 09:01

返信が遅れてしまいましたが無事に表示されました。ありがとうございます。

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