Lecture - AJAX - TextBoxWatermarkExtender - ModelPopup


 

TextBox Watermark Extender - Modal Popup AJAX Controls

 

 

 

Prerequisites

 

Case Study - Trauma Flow Database

 

Lecture - AJAX - Getting Started

 

Summary

 

I show how to use the TextBoxWatermarkExtender to put a watermark in text boxes. I also show a simple use of the AJAX ModalPopupExtender to display help information.

 

Topics Covered in this Video;

 

-Tabbed Dialogs
-Ajax Controls
-Textboxes and WaterMarks
-Watermark Extenders
-TargetControlID
-Modal Popups

 

Video 

 

 

http://youtu.be/rPw8sEPtCNY

 

http://online1.daytonastate.edu/player2.php?id=880610aa9f9de9ea7c545169c716f477 

 

Reference Materials

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ucMechanismOfInjury.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucMechanismOfInjury.ascx.cs" Inherits="TraumaFlow.UserControls.ucMechanismOfInjury" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<table><tr>
    <td>
        <asp:CheckBoxList ID="cblMain" runat="server" 
            onselectedindexchanged="cblMain_SelectedIndexChanged" AutoPostBack="True">
        <asp:ListItem>AUTO</asp:ListItem>
        <asp:ListItem>MC</asp:ListItem>
        <asp:ListItem>FALL</asp:ListItem>
        <asp:ListItem >GSW</asp:ListItem>
        <asp:ListItem>STAB</asp:ListItem>
        <asp:ListItem>BICYCLE</asp:ListItem>
        <asp:ListItem>CRUSH</asp:ListItem>
        <asp:ListItem>BURN</asp:ListItem>
        <asp:ListItem>OTHER</asp:ListItem>
        </asp:CheckBoxList>
        </td>
        <td >            
            <asp:CheckBoxList ID="cblAuto" runat="server" Visible="false">
            <asp:ListItem>Driver</asp:ListItem>
            <asp:ListItem>Passenger</asp:ListItem>
            <asp:ListItem>Pedestrian</asp:ListItem>            
            </asp:CheckBoxList>
            
            <asp:RadioButtonList ID="rblHelmet" runat="server" Visible="false">
            <asp:ListItem>No Helmet</asp:ListItem>
            <asp:ListItem>1/2</asp:ListItem>
            <asp:ListItem>3/4</asp:ListItem>
            <asp:ListItem>Full</asp:ListItem>
            </asp:RadioButtonList>
            <asp:CheckBox ID="cbSeatbelt" runat="server" Visible="false" Text="Seatbelt?" /><br />
            <asp:CheckBox ID="cbAirbag" runat="server" Visible="false" Text= "Airbag?" /><br />
        <asp:TextBox ID="tbSpeed" runat="server" Visible="false"></asp:TextBox>
           <cc1:TextBoxWatermarkExtender ID="tbweSpeed" runat="server" WatermarkText="Speed" TargetControlID="tbSpeed">
           </cc1:TextBoxWatermarkExtender><br />          
        <asp:TextBox ID="tbFall" runat="server" Visible="false"></asp:TextBox>
            <cc1:TextBoxWatermarkExtender ID="tbweFallInfo" runat="server" WatermarkText="Fall Information" TargetControlID="tbFall">
            </cc1:TextBoxWatermarkExtender><br />
        <asp:TextBox ID="tbCaliber" runat="server" Visible="false"></asp:TextBox>
            <cc1:TextBoxWatermarkExtender ID="tbweCaliber" runat="server" WatermarkText="Caliber" TargetControlID="tbCaliber">
            </cc1:TextBoxWatermarkExtender><br />
        <asp:TextBox ID="tbOther" runat="server" Visible="false"></asp:TextBox>
            <cc1:TextBoxWatermarkExtender ID="tbweOther" runat="server" WatermarkText="Other Injury" TargetControlID="tbOther">
            </cc1:TextBoxWatermarkExtender>
        </td>
        </tr>
        </table><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" 
    onclick="btnSubmit_Click" />
<asp:Button ID="btnHelp" runat="server" Text="Help" />
<cc1:ModalPopupExtender ID="mpeHelp"  runat="server" TargetControlID="btnHelp"
    CancelControlID="btnCancel" OkControlID="btnOkay" 
    PopupControlID="Panel1" BackgroundCssClass="helpBackground" X="400" Y="100">
</cc1:ModalPopupExtender>
<asp:panel id="Panel1" style="display: none" runat="server">    
                <div class="PopupHeader" id="PopupHeader">Header</div>
                <div class="PopupBody">
                    <p>This is a simple modal dialog - You can insert text here</p>
                </div>
                <div class="Controls">
                    <input id="btnOkay" type="button" value="Done" />
                    <input id="btnCancel" type="button" value="Cancel" />
                </div>        
</asp:panel>
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ucMechanismOfInjury.ascx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TraumaFlow.UserControls
{
    public partial class ucMechanismOfInjury : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void cblMain_SelectedIndexChanged(object sender, EventArgs e)
        {
            // 0 - AUTO   1 - MC   2 - FALL   3 - GSW
            // 4 - STAB   5 - BICYCLE 6 - CRUSH   7 - BURN   8 - OTHER
            if (cblMain.Items[0].Selected) // Auto
            {
                cblAuto.Visible = true;
                tbSpeed.Visible = true;
                cbSeatbelt.Visible = true;
                cbAirbag.Visible = true;
            }
            else
            {
                cblAuto.Visible = false;
                tbSpeed.Visible = false;
                cbSeatbelt.Visible = false;
                cbAirbag.Visible = false;
            }
            if (cblMain.Items[1].Selected) // Motorcycle
            {
                rblHelmet.Visible = true;
                tbSpeed.Visible = true;
            }
            else
            {
                rblHelmet.Visible = false;
                tbSpeed.Visible = cblMain.Items[0].Selected;
            }
            if (cblMain.Items[2].Selected) // Fall
                tbFall.Visible = true;
            else
                tbFall.Visible = false;
            if (cblMain.Items[3].Selected)
                tbCaliber.Visible = true;
            else
                tbCaliber.Visible = false;
            if (cblMain.Items[8].Selected) // Other
                tbOther.Visible = true;
            else
                tbOther.Visible = false;
           
            string s = String.Empty;
            for (int j = 0; j < cblMain.Items.Count; j++)
            {
                if (cblMain.Items[j].Selected) s += cblMain.Items[j].Value + ";";
            }
        }
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
        }
    }
} 

 

Additional Information

 

Textbox Watermark Extender

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx 

 

Modal Popup Dialog

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx 

 

http://www.codeproject.com/Articles/34996/ASP-NET-AJAX-Control-Toolkit-ModalPopupExtender-Co 

 

 

COP 4834 Lectures Page