VB.NET - Need help to create: ImageButton Click event tiggers Calendar pop up

Asked By Kayla Foran on 14-Jul-10 02:00 PM

I am writing a web page, on this web page there is a txtStart and txtEnd. Next to them I have Calendar ImageButtons. I would like to code it so when the ImageButton is clicked a calendar popup appears and when they select a date on the popup it goes away and the date is populated into the txt. Format MM/DD/YYYY. Can anyone help me? I have been looking online for hours now and only find solutions for C# users or for a seperate page all together. I am writing my code in VB and I cannot make new pages. Here is my web page code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="PSInventoryRelease.aspx.vb" Inherits="DigeControlCenter.PSInventoryRelease" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="TC" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>Print Stream Inventory Release</title>
  <script language="javascript" type="text/javascript">
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:label id="lblError" runat="server"></asp:label>
  <asp:ScriptManager ID="ScriptManager1" runat="server"/>
  <TC:TabContainer runat="server" ID="Tabs" Width="1201px" ActiveTabIndex="1">
  <TC:TabPanel ID="Panel1" runat="server" HeaderText='Release Inventory'>
<ContentTemplate>
      <br />
      <br />
           
      <asp:Label ID="Label2" runat="server" Text="Customer Name"></asp:Label>
            <asp:DropDownList 
        ID="ddlCustomers" runat="server" Height="18px" 
        style="margin-left: 0px" Width="211px">
      </asp:DropDownList>
      <br />
      <br />
           
      <asp:Label ID="Label3" runat="server" Text="PSI #"></asp:Label>
                     
      <asp:TextBox ID="txtPSI" runat="server"></asp:TextBox>
      <br />
      <br />
           
      <asp:Label ID="Label4" runat="server" Text="Item #"></asp:Label>
                      
      <asp:TextBox ID="txtItem" runat="server"></asp:TextBox>
      <br />
      <br />
           
      <asp:Label ID="Label5" runat="server" Text="Qty"></asp:Label>
                        
      <asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
      <br />
      <br />
                   
      <asp:Button ID="btnRelease" runat="server" Text="Release" Width="97px" />
      <br />
      <br /> 
</ContentTemplate>
  
</TC:TabPanel>
    <TC:TabPanel ID="TabPanel1" runat="server" HeaderText="Create Pull Sheet">
      <ContentTemplate>
        <br />
        <br />
              <asp:Label ID="Label6" runat="server" Text="Start Date"></asp:Label>
                <asp:TextBox ID="txtStart" runat="server"></asp:TextBox>
        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/icons/calendr5.gif"/>
        <br />
         <br />
                
        <asp:Label ID="Label7" runat="server" Text="End Date"></asp:Label>
                 
        <asp:TextBox ID="txtEnd" runat="server"></asp:TextBox>
        <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="images/icons/calendr5.gif" style="width: 16px"/>
        <br />
        <br />
               
        <asp:Label ID="Label8" runat="server" Text="Item #"></asp:Label>
                     <asp:TextBox ID="txtItemNo" runat="server"></asp:TextBox>
        <br />
        <br />
               
        <asp:Label ID="Label9" runat="server" Text="Job #"></asp:Label>
                   <asp:TextBox ID="txtJobNo" runat="server"></asp:TextBox>
        <br />
        <br />
        <br />
                  <asp:Button ID="btnCreate" runat="server" Text="Recreate" Width="121px" />
        <br />
        <br />
        
</ContentTemplate>
      
  
</TC:TabPanel>
</TC:TabContainer>
</form>
</body>
</html>

And this is my Code Behind. I am hoping to write the popup calendar code in the ImageButton1_Click event


Imports System
Imports System.IO
Imports System.Reflection
Imports PSXSTL.Data
Imports PSXSTL.Data.DataAccess
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Configuration.ConfigurationManager
Imports PSXSTL.Logging
Imports System.Web.UI.WebControls
Imports InfoSoftGlobal
Imports AjaxControlToolkit
Imports System.Text
Imports System.Windows.Forms
Imports PSXSTL.Digecenter
Imports System.Web.UI.HtmlControls.HtmlGenericControl
  
  
Partial Public Class PSInventoryRelease
  Inherits System.Web.UI.Page
  Dim myConnection As SqlClient.SqlConnection
  Dim myCommand As SqlClient.SqlDataAdapter
  
#Region " Web Form Designer Generated Code "
  
  'This call is required by the Web Form Designer.
  <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
  
  End Sub
  
  Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
    'CODEGEN: This method call is required by the Web Form Designer
    'Do not modify it using the code editor.
    Me.Controls.RemoveAt(1)
    InitializeComponent()
  End Sub
  
#End Region
  
  Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    GetCustomers()
  
  End Sub
  
  Private Sub GetCustomers()
    'Populate CustomerName from tblCustomers into ddlCustomers
    myConnection = New SqlClient.SqlConnection(ConfigurationManager.AppSettings("dbConnectionString"))
    myCommand = New SqlClient.SqlDataAdapter("SELECT CustomerName from tblcustomers ORDER BY CustomerName ASC", myConnection)
  
    'Create and fill a DataSet 
    Dim ds As DataSet = New DataSet
    myCommand.Fill(ds)
  
    'Bind to dataset 
    ddlCustomers.DataSource = ds.Tables(0)
    ddlCustomers.DataTextField = "CustomerName"
    ddlCustomers.DataBind()
    ddlCustomers.Items.Insert(0, New ListItem("Please Select a Customer"))
  
  End Sub
  
  Protected Sub ddlCustomers_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ddlCustomers.SelectedIndexChanged
    'Populate PSI # in txtPSI based on Customer selected
    Dim PSINumber As String = ""
    If ddlCustomers.SelectedIndex > 0 Then
      PSINumber = OMCustomerPSI.GetPSI(ddlCustomers.SelectedItem.ToString)
      If PSINumber = "" Then
        MessageBox.Show("There is no PSI Number available. (Please create new PSI Number in Digecenter Manage Site.)")
      Else
        Me.txtPSI.Text = PSINumber
      End If
    End If
  End Sub
  
  Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
  
  End Sub
  
End Class

Please help asap! Thanks!

Ken Fitzpatrick replied to Kayla Foran on 14-Jul-10 05:36 PM

Kayla,


I can look at it for a little while. I recommend you download and install the ASP.Net Ajax Control Toolkit and use the Ajax Toolkit Calendar control. You can start here (there is also a download site here):

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Calendar/Calendar.aspx


Look at the following on that site as well:

http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-client-library-controls

http://www.asp.net/ajax/videos/how-do-i-configure-the-aspnet-ajax-calendar-control


Ken

Kayla Foran replied to Ken Fitzpatrick on 14-Jul-10 05:50 PM

Thanks I think those will help.


Thanks for all of your help,


Just one more question.


I need to Error check when the buttons are selected to make sure all the textboxes are filled out. I cannot remember the correct syntax for this and everytime I try to do it I keep getting errors. I know this is a simple step of code but for the life of me I can't remember it. What I had was:


Protected Sub btnRelease_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnRelease.Click
    'Check to make sure all fields have a value
    If ddlCustomers.ToString = "" Then
      MessageBox.Show("Please enter a Start Date")
    End If
  
    If txtPSI.ToString = "" Then
      MessageBox.Show("Please enter a End Date")
    End If
  
    If txtItem.ToString = "" Then
      MessageBox.Show("Please enter a Item Number")
    End If
  
    If txtQty.ToString = "" Then
      MessageBox.Show("Please enter a Job Number")
    End If
  
    'Reference PrintStreamInventory Web Service?
  
  End Sub

However, it is not working. Any suggestions?


Thanks for all of your help today, you are a life saver!


Kayla

Ken Fitzpatrick replied to Kayla Foran on 14-Jul-10 06:13 PM

Looking at how the AjaxToolkit works, it should be pretty easy to do what you want. You don't need to wire anything to the ImageButtonClick, it is done for you. Do the following:

1. Download the AjaxToolkit (lloks like you have it already)

2. If you don't have the Ajax Toolkit controls in your toolbox, you need to add them. to do this, just right click the toolbox and add another tab. Then right click the space in the new tab and click Choose Items. Browse for the AjaxControlToolkit.dll file and click OK. This will add all of the Ajax Toolkit Controls to the tool box.

3. In your code, delete the ScriptManager line you have and drag the ToolkitScriptManager control from the Ajax Toolkit controls in the toolbox. Should look like this:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

ToolkitScriptManager replaces the ScriptManager.

4. For the start date, drag a CalendarExtender control from the Ajax toolbox to your code. Should like this:

<asp:CalendarExtender ID="CalendarExtender1" runat="server">
</asp:CalendarExtender>

5. Add the following attribute to the <asp:Calendar> tag: PopupButtonID="ImageButton1"

6. Add the following attribute to the <asp:Calendar> tag: TargetControlID="txtStart"

7. For the end date, drag a CalendarExtender control from the Ajax toolbox to your code. Should like this:

<asp:CalendarExtender ID="CalendarExtender2" runat="server">
</asp:CalendarExtender>

5. Add the following attribute to the <asp:Calendar> tag: PopupButtonID="ImageButton2"

6. Add the following attribute to the <asp:Calendar> tag: TargetControlID="txtEnd"


As you can see, the PopupButtonID defines the id of the button control that will open the calendar. The TargetControlID is the id of the textbox control you want to receive the date. There are many other attributes including PopupPosition is you want to poistion your calendar elsewhere.


After that, you should be able read the contents of the textbox to get the value selected by the user.


Let me know how that works,


This is all the code I had to make it work (without any validation or anything)

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits=".WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
  
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  
    <asp:ImageButton ID="ImageButton1" runat="server" />
  
    <asp:CalendarExtender ID="CalendarExtender1" PopupButtonID="ImageButton1" TargetControlID="TextBox1" runat="server">
    </asp:CalendarExtender>
  </div>
  </form>
</body>
</html>

Ken

Ken Fitzpatrick replied to Kayla Foran on 14-Jul-10 06:19 PM

Kayla,


Like I mentioned in your other thread "Populate Data from tbl to txt depending on ddl selection", the MessageBox.Show will not do anything in a web page. In fact, I see you have Imports System.Window.Forms at the top of your code-behind. You need to remove that Import statement because you are not working on a Windows Forms application, but an Web Form project. Replace the MessageBox.Show lines with the following:

Page.ClientScript.RegisterStartupScript(Me.GetType, "ShowMessage", "alert('<your message here>');", True)

There are other ways to pop-up a message, but this is what I do.


Ken

Kirtan Patel replied to Kayla Foran on 15-Jul-10 12:52 AM

You need to use AjaxControlTool Kit ...to achieve this ....

 

after Adding Reference to AjaxControlToolKit ..

 

do as follow ..


just Click on the smart Tag of the ImageButton and then AddCalenderExtender to ImagebUtton ..and Set Calender Extender Properties according to your need..

 

that will pop up Calender when you click ImageButton ..

Kayla Foran replied to Ken Fitzpatrick on 15-Jul-10 11:21 AM

Thanks so much for all of your help! You have been a real life saver. Just got the major buttons left to program. Wish you could help me with it as well, but I wouldn't even know where to begin on explain them. So I'm on my own.


Thanks again,


Kayla

Calendar pop only shows up when text box is selected - Kayla Foran replied to Ken Fitzpatrick on 16-Jul-10 12:16 PM

The Calendar shows up when you click in the text box. And when it shows up it has no background. It is just letters and numbers, you click a number and that one appears in the textbox. I cannot use ToolkitScriptManager because the AjaxControlToolKit.ddl I have is old, I am afraid to download the newer version because this is for work and they told me to use that specific one. here is my code:


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="PSInventoryRelease.aspx.vb" Inherits="DigeControlCenter.PSInventoryRelease" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="TC" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <link href="C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AJAX Control Toolkit\AjaxControlToolkit\Calendar.css" rel="Stylesheet" type="text/css" />
  <title>Print Stream Inventory Release</title>
  <script language="javascript" type="text/javascript">
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server"/>
  <TC:TabContainer runat="server" ID="Tabs" Width="1920px"
    style="margin-bottom: 28px">
  <TC:TabPanel ID="Panel1" runat="server" HeaderText='Release Inventory'>
  <ContentTemplate>
  <table>
      <tr>
      <td>
      <asp:Label ID="lblCustomer" runat="server" Text="Customer Name"/>
      <br />
      <br />
      <asp:Label ID="lblPSI" runat="server" Text="PSI #"/>
      <br />
      <br />
      <asp:Label ID="lblItem" runat="server" Text="Item #"/>      
      <br />
      <br />
      <asp:Label ID="lblQty" runat="server" Text="Qty"/>
      </td>
      <td>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <asp:Button ID="btnRelease" runat="server" Text="Release" Width="97px" />
      </td>
      <td>
      <asp:DropDownList ID="ddlCustomers" runat="server" Height="18px" style="margin-left: 0px" Width="211px" AutoPostBack="True"/>
      <br />
      <br />
      <asp:TextBox ID="txtPSI" runat="server"/>
        
      <br />
      <br />
      <asp:TextBox ID="txtItem" runat="server" />
       
      <br />
      <br />
      <asp:TextBox ID="txtQty" runat="server"/>
       
      </table
</ContentTemplate>
  
  
</TC:TabPanel>
    <TC:TabPanel ID="TabPanel2" runat="server" HeaderText="Create Pull Sheet">
      <HeaderTemplate>
        Create Pull Sheet
      </HeaderTemplate>
  <ContentTemplate>
  <table>
      <tr>
      <td>
      <asp:Label ID="lblStart" runat="server" Text="Start Date" />
      <br />
      <br />
      <asp:Label ID="lblEnd" runat="server" Text="End Date"/>
      <br />
      <br />
      <asp:Label ID="lblItemNo" runat="server" Text="Item #"/>      
      <br />
      <br />
      <asp:Label ID="lblJobNo" runat="server" Text="Job #"/>
      </td>
      <td>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <asp:Button ID="BtnCreate" runat="server" Text="Recreate" Width="97px" />
      </td>
      <td>
      <asp:TextBox ID="txtStart" runat="server"/>
      <asp:ImageButton ID="ImageCal" runat="server" ImageUrl="images/icons/calendr5.gif"/>
      <br />
      <br />
      <asp:TextBox ID="txtEnd" runat="server" />
      <asp:ImageButton ID="ImageCal2" runat="server" ImageUrl="images/icons/calendr5.gif" style="width: 16px"/>
      <br />
      <br />
      <asp:TextBox ID="txtItemNo" runat="server" />
      <br />
      <br />
      <asp:TextBox ID="txtJobNo" runat="server" />
      </table>
      <TC:CalendarExtender ID="CalendarExtender1" TargetControlID="txtStart" popupButtonID="ImgCal" runat="server" Enabled="True"/>
      <TC:CalendarExtender ID="CalendarExtender2" TargetControlID="txtEnd" popupButtonID="ImgCal2" runat="server" Enabled="True"/>
</ContentTemplate>      
</TC:TabPanel>
</TC:TabContainer>
</form>
</body>
</html>