質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

VB.NET

Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

Q&A

解決済

1回答

7116閲覧

ASP.NET(VB)で特定の条件でダイアログ(JQueryUI)を出したい

toccipc

総合スコア15

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

VB.NET

Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

0グッド

0クリップ

投稿2017/03/26 23:55

編集2017/03/27 00:37

###挨拶
皆さまはじめまして。トミー と申します。よろしくお願いします。
###前提・実現したいこと
テキストボックス「txtdirectory」に値が入っていない状態で
ボタン「btnf1」をクリックした時、jQueryUIで作ったダイアログ表示で警告したい。
↓表示イメージ
イメージ説明
###他機能で正常動作していること
ボタン「btnf12」をクリックした時はjQueryUIで作ったダイアログが
正しく表示。
イメージ説明
###発生している問題
※WebList.aspx.vb の Private Sub btnf1_Click
にて
'↓■■■■■■■■■■■■コーディング疑問■■■■■■■■■■■■■■■
とか
'試したこと (動作してないのでコメントアウト)
とか
コーディングしたが動作せず

###該当のソースコード
※WebList.aspx

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/frmMainVB.Master" CodeBehind="WebList.aspx.vb" Inherits="NewDirectoryTreeWebVB.WebList" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script src='Scripts/jquery-1.10.2.js'></script> <script src='Scripts/jquery-ui-1.11.4.js'></script> <script type='text/javascript'> $(document).ready(function(){ $(function(){ $('#dialog').dialog({ autoOpen: false, width: 500, height: 200, buttons: [ { text: "はい", click: function() { window.open('about:blank','_self').close(); } }, { text: "いいえ", click: function() { $(this).dialog("close"); } } ] }); $('#dialog2').dialog({ autoOpen: false, width: 500, height: 200, buttons: [ { text: "確認しました", click: function () { $(this).dialog("close"); } } ] }); $('#btnf12').click(function( event ) { $('#dialog').dialog('open'); event.preventDefault(); }); // 隠しボタン $('#btnalarm').click(function (event) { $('#dialog2').dialog('open'); event.preventDefault(); }); // 試し検証 変更可 function abc() { $('#dialog2').dialog('open'); event.preventDefault(); }; }); }); </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentHead" runat="server"> <div id="dialog" title="確認" style="display:none;">本当に終了しますか?</div> <div id="dialog2" title="確認" style="display:none;">必須項目を入力してください。</div> <!-- 隠しボタン --><asp:Button ID="btnalarm" runat="server" Text="Button" Visible="false"/> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="ContentBody" runat="server"> <div id='headinputtop'> <table id='headtable'> <tr> <td class = 'tdtitle'> &nbsp;対象ディレクトリ </td> <td> <button id='btn001'>変更</button> </td> <td class='dummytd'>&nbsp; <asp:TextBox ID="txtdirectory" runat="server" cssclass="txtInfo"></asp:TextBox> </td> </tr> </table> </div> <div id='contents'> <table> <tr><td id = 'r001c001' class = 'center'>F1</td><td id = 'r001c002' class = 'center'>F7</td></tr> <tr><td id = 'r002c001'><asp:Button ID="btnf1" runat="server" Text="" clsclass="buttondesign" Width="506px" /></td><td id = 'r002c002'><button class='buttondesign' id='btnf7'>&nbsp;&nbsp;</button></td></tr> <tr><td id = 'r003c001' class = 'center'>F2</td><td id = 'r003c002' class = 'center'>F8</td></tr> <tr><td id = 'r004c001'><button class='buttondesign' id='btnf2'>&nbsp;&nbsp;</button></td><td id = 'r004c002'><button class='buttondesign' id='btnf8'>&nbsp;&nbsp;</button></td></tr> <tr><td id = 'r005c001' class = 'center'>F3</td><td id = 'r005c002' class = 'center'>F9</td></tr> <tr><td id = 'r006c001'><button class='buttondesign' id='btnf3'>&nbsp;&nbsp;</button></td><td id = 'r006c002'><button class='buttondesign' id='btnf9'>&nbsp;&nbsp;</button></td></tr> <tr><td id = 'r007c001' class = 'center'>F4</td><td id = 'r007c002' class = 'center'>F10</td></tr> <tr><td id = 'r008c001'><button class='buttondesign' id='btnf4'>&nbsp;&nbsp;</button></td><td id = 'r008c002'><button class='buttondesign' id='btnf10'>&nbsp;&nbsp;</button></td></tr> <tr><td id = 'r009c001' class = 'center'>F5</td><td id = 'r009c002' class = 'center'>F11</td></tr> <tr><td id = 'r010c001'><button class='buttondesign' id='btnf5'>&nbsp;&nbsp;</button></td><td id = 'r010c002'><button class='buttondesign' id='btnf11'>&nbsp;&nbsp;</button></td></tr> <tr><td id = 'r011c001' class = 'center'>F6</td><td id = 'r011c002' class = 'center'>F12</td></tr> <tr><td id = 'r012c001'><button class='buttondesign' id='btnf6'>&nbsp;&nbsp;</button></td> <td id = 'r012c002'><button class='buttondesign' id='btnf12'>閉じる</button></td></tr> </table> </div> </asp:Content>

※WebList.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load ' ポストバック判定 If IsPostBack Then Exit Sub End If End Sub Private Sub btnalarm_Click() Handles btnalarm.Click End Sub Private Sub btnf1_Click(sender As Object, e As EventArgs) Handles btnf1.Click ’訂正 2017/03/27 9:36 If Trim$(txtdirectory.Text) = String.Empty Then '訂正 ここまで '描画開始前に実行 'Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "", "alert('ClientScriptBlock')", True) '描画後の実行 '↓■■■■■■■■■■■■コーディング疑問■■■■■■■■■■■■■■■ Page.ClientScript.RegisterStartupScript(Me.GetType, "", "abc", True) '試したこと (動作してないのでコメントアウト) 'Call btnalarm_Click() Exit Sub End If End Sub

※frmMainVB.Master

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="frmMainVB.master.vb" Inherits="NewDirectoryTreeWebVB.frmMainVB" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <%-- スクリプト --%> <script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/jquery-ui-1.10.2.min.js"></script> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </head> <!-- 右クリック禁止 --> <body oncontextmenu="return false;"> <div id="contents"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager> <div> <asp:ContentPlaceHolder ID="ContentHead" runat="server"> </asp:ContentPlaceHolder> </div> <div> <asp:ContentPlaceHolder ID="ContentBody" runat="server"> </asp:ContentPlaceHolder> </div> <div> <asp:ContentPlaceHolder ID="ContentFooter" runat="server"> </asp:ContentPlaceHolder> </div> </form> </div> </body>

###補足情報(言語/FW/ツール等のバージョンなど)
ASP.NET(VB.NET2015)

お願い

(1) 特定の条件(今回はテキストボックスが未入力)でダイアログを表示させるコーディング方法。
(2) 設計として適切であるか?
(クラサバVBプログラマー出身の為、ASP.NETの経験があまりないです。)

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

どうしても jQuery UI の Dialog にこだわるのでなければ・・・

ASP.NET Web Forms アプリでユーザー入力の検証を行う場合は、検証コントロールが多々用意されているのでそれを使うのが定番のやり方です。

必須入力チェックを行うには RequiredFieldValidator コントロールを使います。具体例は以下の記事を見てください。

第5回 業務アプリの必須処理「入力チェック」 (2/5)
http://www.atmarkit.co.jp/ait/articles/0712/11/news129_2.html

ダイアログではありませんが、ValidationSummary にエラーメッセージを表示するという機能もあります。記事の 4/5 ページを見てください。

CustomValidator 以外の検証コントロールは、デフォルトでクライアント側での検証用に JavaScript のコードを自動的に生成してくれます。これによりクライアント側で検証 NG の場合は無駄なポストバックがキャンセルされるようにもなります。

ユーザーが JavaScript を無効にしても、サーバー側で検証がかかり、エラーメッセージを表示してくれます。

というわけで、ASP.NET Web Forms アプリのユーザー入力の検証に検証コントロールを使わない手はないです。

・・・が、どうしても jQuery UI の Dialog を使いたいということであれば、その旨コメント欄で返信ください。

投稿2017/03/27 00:41

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toccipc

2017/03/27 01:05

SurferOnWww様 早速の回答ありがとうございます。 Validator コントロール も考えておりました。 本来ならそれが適切なんでしょうけど。 今回、質問を回答者にわかりやすくするために本当に知りたいことを変化球にして質問したいんですが、今後ASP.NETで開発する際で、今回の例ではテキストボックス1個でしたが、例えばテキストボックスが10個あって10個全て空白でないかつ入力書式が仕様に適っていて、その上で、「処理を本当に実行していいですか?」Yes or NO →NOなら処理終了 YESなら処理継続 というような設計を考えてはいますが、ASP.NETらしくないですかね? 質問「どうしても jQuery UI の Dialog を使いたいということであれば」 としてはどうしてもではないですが、できればJuery UI の Dialogを出したいというのが正直なところです。
退会済みユーザー

退会済みユーザー

2017/03/27 01:42 編集

> 例えばテキストボックスが10個あって10個全て空白でないかつ入力書式が仕様に適っていて テキストボックスが何個あろうと、ユーザー入力の検証を行うならそれら全部に ASP.NET Web Forms アプリ標準の検証コントロールを配置して使うのが自分的には当たり前なのですが? というか、それ以外に適切な方法はないと思います。 質問者さんが書かれたやり方が「(2) 設計として適切であるか?」という質問に対する答えは、私に言わせれば No です。何か特別な事情があれば話は別ですが、質問文を見る限り標準の検証コントロールを使わない事情はなさそうに見えるのですが? もしあればそれを書いてください。 > できればJuery UI の Dialogを出したいというのが正直なところです。 以下の記事は alert を使っていますが、これを jQuery UI の Dialog に替えることができると思います。 クライアント側での検証結果の表示 http://surferonwww.info/BlogEngine/post/2013/08/01/showing-the-results-of-validations-at-client-side.aspx 上の記事の "実際に動かして試すことができるよう 実験室 にアップしました。興味のある方は試してみてください。" と書いた「実験室」のリンク先を見てください。
toccipc

2017/03/27 05:17

>質問文を見る限り標準の検証コントロールを使わない事情はなさそうに見えるのですが? もしあればそれを書いてください。 すみません。見た目上の話だけで機能としては代替が聞くので拘り捨てます。 http://surferonwww.info/BlogEngine/post/2013/08/01/showing-the-results-of-validations-at-client-side.aspx 見ました。実験室も触ってみました。 alert と RequiredFieldValidator など勉強します。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問