TextboxにTextが格納されたことを検知してControllerの処理を実行したい

●環境
IDE：VisualStudio 14.0.23107.0
テンプレート：MVC
言語：VB.NET
Javascript
jQuery

※不足情報があればご指摘ください。

●現状
・index.vbhtml（メイン）
ボタン（サブ画面表示用）
ボタン（検索用）
テキストボックス
テーブル

・_Dialog.vbhtml（サブ）
テーブル

①メイン画面のボタン（サブ画面表示用）をクリックするとサブ画面がモーダルダイアログとして表示されます。
（ダイアログについてはjQueryにて実現しております。）
サブ画面上のテーブルから<tr></tr>要素をクリックするとメイン画面のテキストボックスに
クリックした要素内の値が格納されます。

※以下、テキストボックスへの格納処理部分です。（サブ画面用JS）

javascript
1$(".dialog-table-row").on("click", function () {
2        // 行をクリック
3        $('.txtbox').value($(this).children('td')[0].innerText);
4        $('#dialog').dialog("close");
5    }

②その後、メイン画面のボタン（検索用）をクリックすると
テキストボックスに格納された値をController.vbに引き渡し
条件検索をした結果をModelに格納します。

※以下、モデルへの格納部分です。（VB）

VB
1Function Index(model As main) As ActionResult
2        Using db As New SqlConnection(Common.ConnectionString)
3            model.Rows.AddRange(db.Query(Of main.Row)(Sql.searchSQL(),
4                                                       New With {
5                                                       .XXX = model.XXX
6                                                       }))
7        End Using
8        Return View(model)
9End Function

③最後にメイン画面のテーブル上にModelの情報を表示しております。

html
1<tbody>
2    @For i = 0 To Model.Rows.Count - 1
3        @<tr class="main-table">
4             <td>@Html.DisplayFor(Function(m) m.Rows(i).XXX)</td>
5                 ・
6                 ・
7                 ・
8        </tr>
9    Next
10</tbody>
11

●実現したい事
メイン画面のボタン（検索用）を押すことなく
メイン画面上のテキストボックスに値が入った事をきっかけに
②以降の処理を実施する事は可能でしょうか？

●前提
サブ画面用のJSやVBについては他画面でも使用するため
修正は難しいです。
メイン画面用のJS側にて何とかできないか考えております。

●試したこと
メイン画面用のJSにてテキストボックスにchangeイベントを追加してみましたが反応しませんでした・・・。

開発経験・Teratailでの質問ともに初心者の為
分かりにくい箇所が御座いましたらご指摘いただけると幸いです。

よろしくお願いいたします。

退会済みユーザー

2022/04/19 09:16

ASP.NET のタグもつけていただくようお願いします。私事ですみませんが、MVC のタグのスレッドは普段見てないので見逃すと思いますので。

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

回答1件

ベストアンサー

①メイン画面のボタン（サブ画面表示用）をクリックすると・・・
サブ画面上のテーブルから<tr></tr>要素をクリックするとメイン画面のテキストボックスにクリックした要素内の値が格納されます。

　↓↓↓

②その後、メイン画面のボタン（検索用）をクリックするとテキストボックスに格納された値をController.vbに引き渡し条件検索をした結果をModelに格納します。

上の ② のボタンは input type="submit" 要素で、クリックするとフォームデータをサーバーの Controller に POST するのですよね？　

やりたいことは ① の「<tr></tr>要素をクリック」で、そのクリックイベントのリスナー（即ち $(".dialog-table-row").on("click", function () { ... } の function）でテキストボックスに値を設定した後、自動的に ② の「メイン画面のボタン」をクリックしたいということで良いのですか？

であれば、$(".dialog-table-row").on("click", function () { ... } の ... に続けて ② のボタンをクリックする JavaScript のコードを追加してはいかがでしょう？

投稿2022/04/19 09:35

退会済みユーザー

総合スコア0