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

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

ただいまの
回答率

90.53%

  • VB.NET

    916questions

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

  • ASP.NET

    525questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,111

toccipc

score 1

挨拶

皆さまはじめまして。トミー と申します。よろしくお願いします。

前提・実現したいこと

テキストボックス「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の経験があまりないです。)

よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

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 10:05

    SurferOnWww様
    早速の回答ありがとうございます。

    Validator コントロール も考えておりました。
    本来ならそれが適切なんでしょうけど。

    今回、質問を回答者にわかりやすくするために本当に知りたいことを変化球にして質問したいんですが、今後ASP.NETで開発する際で、今回の例ではテキストボックス1個でしたが、例えばテキストボックスが10個あって10個全て空白でないかつ入力書式が仕様に適っていて、その上で、「処理を本当に実行していいですか?」Yes or NO →NOなら処理終了 YESなら処理継続 というような設計を考えてはいますが、ASP.NETらしくないですかね?

    質問「どうしても jQuery UI の Dialog を使いたいということであれば」
    としてはどうしてもではないですが、できればJuery UI の Dialogを出したいというのが正直なところです。

    キャンセル

  • 2017/03/27 10:30 編集

    > 例えばテキストボックスが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

    上の記事の "実際に動かして試すことができるよう 実験室 にアップしました。興味のある方は試してみてください。" と書いた「実験室」のリンク先を見てください。

    キャンセル

  • 2017/03/27 14:17

    >質問文を見る限り標準の検証コントロールを使わない事情はなさそうに見えるのですが? もしあればそれを書いてください。
    すみません。見た目上の話だけで機能としては代替が聞くので拘り捨てます。

    http://surferonwww.info/BlogEngine/post/2013/08/01/showing-the-results-of-validations-at-client-side.aspx
    見ました。実験室も触ってみました。

    alert と RequiredFieldValidator など勉強します。

    ありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • VB.NET

    916questions

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

  • ASP.NET

    525questions

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