モーダルウィンドウでの操作結果の扱い方について

例えば、進捗管理システムで、案件担当者を複数選択する機能があったとします。
ボタン押下で担当者選択の画面がモーダルウィンドウで表示され、
複数人選択（チェックボックスなど）して確定ボタンを押すと、
モーダルが解除されて呼び出し元画面に選択した担当者名が表示されるとします。

選択した担当者の情報を保持する方法（選択した情報を表示する方法）として、
どのような方法がよく用いられるのかご教示いただけないでしょうか。

例：
1.モーダルウィンドウで担当者を選択。確定ボタン押下。
2.チェックを付けた担当者の社員番号と氏名をそれぞれカンマ区切りで文字列にする。
3.呼び出し元画面の隠しinput要素に社員番号を、ラベル要素に氏名を入れる。

yambejp

2021/08/30 06:42

c#とjsだとだいぶ環境が違いますが、実際にはどういう状況を想定していますか？

lilac

2021/08/30 06:55

モーダルウィンドウでsubmitし、controllerを通るのか、それともjavascriptのみで実装するのか、どのような手段が一般的なのかが分からず、あいまいな質問および回答となり申し訳ございません。ボタン押下→ウィンドウオープン→選択→ウィンドウクローズ→選択したものを表示の機能を実装するにあたり、どうすればよいのかが知りたいです。

退会済みユーザー

2021/08/30 06:55

何の話ですか？　C#, JavaScript のタグが付いているということは ASP.NET?　それにしても質問は意味不明。https://teratail.com/help/question-tips ← これを読んでもらって、そのガイドラインに沿って、ここに書いてあること以外は知り得ない第三者が分かるように書いてください。

Zuishin

2021/08/30 06:57

C# と JS だとだいぶ環境が違うというのはどういう意味かわかりますか？両者とも言語の名前です。実際にはどういう状況を想定しているかというのは何を尋ねられているかわかりますか？環境を尋ねられています。

lilac

2021/08/30 07:03

申し訳ございません。環境はASP.NET Coreになります。言語はC#です。

dodox86

2021/08/30 07:04

本当に、JavaScriptの話かC#の話か、更に言えばクライアントサイドかサーバーサイドの話かも分かりませんね。質問者さんのプロフィール欄のタグには「VB.NET」、「C#」がありますが。

退会済みユーザー

2021/08/30 07:40

ここは追記修正依頼欄なので、環境は質問を編集して追記してください。

退会済みユーザー

2021/08/30 08:02

> 環境はASP.NET Coreになります。言語はC#です。 ASP.NET のタグをつけて、質問欄を編集して開発環境（Visual Studio, Core のバージョンなど）を書いてください。質問者さんのやりたいことを実現するために、自分ではどこまで実装できて、どこで躓いていて、何が分かれば解決するかを、自分が書いたコードをアップして（簡単なサンプルで可）、説明してください。

BeatStar

2021/08/30 08:49

まず、ご自分の質問を『第三者的視点で』、フラットな状態で読んでみてください。回答者は質問者と同じ環境にある…わけではありません。提示された情報からしか読み取れません。 C# なのかJavaScriptなのかはっきりしましょう。もし上記で述べているようにC#なら、なぜJavaScriptタグがついているのでしょうか。「同じプログラミング言語なんだからいいだろ」と思うのでしたら、なぜSwiftとかJavaとかObjective-Cとかアセンブラとか全部の言語タグを付けないのでしょうか。その定義のせいで、誰も回答できません。

dodox86

2021/08/30 10:56

ASP.NET Coreでホスティングしているのなら、フロント部分を考えるとJavaScriptが完全に無関係とも言えないですね。質問者さんがどれくらいの意味でJavaScript、HTMLタグを付与されたかは分かりませんが。

退会済みユーザー

2021/08/31 22:16

質問者さん、無言ですが、回答したのでそれに対するフィードバックを書きましょう。役に立った/立たなかったぐらいはすぐ返せるはず。役に立たなかったなら、どこがダメだったかを書くと、より質問者さんが期待する答えに近いものが出てくるかも。とにかく無言で放置は NG です。

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

回答2件

質問者さんは既に去ってしまったようですが、ASP.NET Core でのモーダルの使い方に関して案を書いておきます。

Visual Studio 2019 のテンプレートを使って ASP.NET Core アプリを作ると Bootstrap 4 が利用できるようになります。

Boorstrap には JavaScript modal プラグインが含まれているので、それを利用するのが良さそうです。

Modal
https://getbootstrap.jp/docs/4.2/components/modal/

上の記事にある Live demo のコードを View にコピペして、［Launch demo modal］ボタンをクリックするだけでモーダルダイアログが表示されます。

そして、そのコードの中の div 要素

<div class="modal-body">
    ...
</div>

の中（上の ... の部分）に質問者さんが言う「担当者選択の画面」を書けば、

1.モーダルウィンドウで担当者を選択。確定ボタン押下。

まではできると思います。

2.チェックを付けた担当者の社員番号と氏名をそれぞれカンマ区切りで文字列にする。

チェックボックスを使うなら、「担当者の社員番号と氏名をそれぞれカンマ区切り」は、その文字列を作って value 属性に設定しておけば良さそうです。

例えば以下のようなコードで、

@model IEnumerable<MvcCore5App4.Entities.Employee>
@{
    ViewData["Title"] = "Index";
}

<h1>Bootstrap Modal</h1>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->

<form asp-action="Index">

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" 
     aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @foreach (var item in Model)
                {
                    <input type="checkbox" name="@(item.EmployeeId + item.LastName)" 
                           value="@(item.EmployeeId + "," + item.LastName)" />
                    @Html.DisplayFor(modelItem => item.FirstName)
                    <br />
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
    
    <input type="submit" value="Submit" />
</form>

以下のモーダルダイアログが表示されます。