Display Pop Up Message Box and Grayout page background

Question

User-1817338328 posted

Hi there, when I click on Save button and if my text box is empty, I want to display an error pop up message box and grey out the page background. How can I achieve this in ASP.net page in VB, I have tried most of the code in quote in my code behind. The only one working is Msgbox but Msgbox pop ups in ISS doesn't really work sometimes, please help. 

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="../IC_MasterPage.Master" CodeBehind="frmFm01det.aspx.vb" Inherits="BRO.frmFm01det" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="content">
        <div class="col-md-8">
          <!-- Horizontal Form -->
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">Group Maintenance</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <div class="form-horizontal" runat="server">
              <div class="box-body">
                <div class="form-group">
                  <label for="lblGrpCode" class="col-sm-2 control-label">Group Code: </label>
                  <div class="col-sm-5">
                    <asp:TextBox runat="server" CssClass="form-control" ID="txtGrpCode" ></asp:TextBox>
                  </div>
                </div>
                <div class="form-group">
                  <label for="lblDesc" class="col-sm-2 control-label">Description: </label>
                  <div class="col-sm-9">
                    <asp:TextBox runat="server" CssClass="form-control" ID="txtDesc" ></asp:TextBox>
                  </div>
                </div>
              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                  <asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-default" Width="100px"/>
              </div>
              <!-- /.box-footer -->
            </div>
          </div>
          <!-- /.box -->
          <!-- general form elements disabled -->
        </div>
    </div>
</asp:Content>

Code behind

Imports System.Data
Imports System.Data.Odbc

Public Class frmFm01det
    Inherits System.Web.UI.Page
    Dim dtReader As OdbcDataReader
    Dim sSQL As String

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ModDB.OpenCon()
        If Not IsPostBack Then
            txtGrpCode.Text = Request.QueryString("CODE")
            sSQL = "SELECT * from BROGRP where GPCODE = '" & txtGrpCode.Text & "'"
            dtReader = ModDB.GetReader(sSQL)
            If dtReader.HasRows Then
                txtDesc.Text = pRT(dtReader!GPDESC)
            Else
                txtGrpCode.Text = ""
                txtDesc.Text = ""
            End If
        End If
    End Sub

    Protected Sub btnSave_Click(sender As Object, e As EventArgs) Handles btnSave.Click
        If txtGrpCode.Text = "" Then
            'ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Group Code cannot be empty');", True)
            MsgBox("Group Code cannot be Empty", MsgBoxStyle.Information, "Group Maintenance")
            'AlertWindow("Group Code cannot be empty")
            ' Page.ClientScript.RegisterStartupScript(this.GetType(), "Scripts", "<script>alert('Group Code cannot be empty');</script>")
            ' Response.Write("<script language=""javascript"">alert('Group Code cannot be emopty');</script>")

            'Dim message As String = "Group Code cannot be empty"
            'Dim sb As New System.Text.StringBuilder()
            'sb.Append("<script type = 'text/javascript'>")
            'sb.Append("window.onload=function(){")
            'sb.Append("alert('")
            'sb.Append(message)
            'sb.Append("')};")
            'sb.Append("</script>")
            'ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", sb.ToString())

            'Dim message As String = "Group Code Cannot be Empty"
            'Dim sb As New System.Text.StringBuilder()
            'sb.Append("alert('")
            'sb.Append(message)
            'sb.Append("');")
            'ClientScript.RegisterOnSubmitStatement(Me.GetType(), "alert", sb.ToString())

            'ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "jscript", "<script> alert('Group Code cannot be empty.'); </script>", False)
            Response.Redirect("frmFm01det.aspx")
        End If

        If Request.QueryString("CODE") = "" Then
            sSQL = "INSERT into BROGRP (GPCODE, GPDESC, User_ID, DateTime)"
            sSQL = sSQL & " VALUES("
            sSQL = sSQL & "'" & UCase(txtGrpCode.Text.Trim()) & "',"
            sSQL = sSQL & "'" & pRTIN(txtDesc.Text.Trim()) & "',"
            sSQL = sSQL & "'" & Session("Login") & "',"
            sSQL = sSQL & "'" & ModDate.pGetDateTime2() & "')"
            ModDB.Run(sSQL)
        Else
            sSQL = "UPDATE BROGRP set GPDESC ='" & pRTIN(txtDesc.Text.Trim()) & "', "
            sSQL = sSQL & " USER_ID='" & Session("Login") & "',"
            sSQL = sSQL & " DATETIME='" & ModDate.pGetDateTime2() & "'"
            sSQL = sSQL & " WHERE GPCODE = '" & txtGrpCode.Text & "'"
            ModDB.Run(sSQL)
        End If
    End Sub

End Class

Answer 1

User-1716253493 posted

Try this

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" Display="None" ErrorMessage="Please enter text"></asp:RequiredFieldValidator>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True" ShowSummary="False" />
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>

Answer 2

User-1838255255 posted

Hi hansheung,

According to your description, you could use jQuery to check all the textboxes value, then show the message in the dialog:

Sample Code:

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        function check() {
            $('input[type=text]').each(function () {
                var a = $(this).val();
                if (a.length == 0) {
                    $("#dialog").dialog();
                }
            });
            return false;
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return check()" />
            <div id="dialog" title="Basic dialog" style="display:none">
                <p>Exist TextBox value is null!</p>
            </div>
        </div>
    </form>
</body>

Best Regards,

Eric Du