Javascript

Topics

1. Adding AjaxContolToolKit Calendar Control

2. Mutually Exclusive Checkbox Control

3. JavaScript Confirm box

Details

1. Adding AjaxContolToolKit Calendar Control

First add this code to the aspx page:

 Register the assembly for ajaxtoolkit on top of the aspx page.

<%@ Page CodeFile="SoldVehicleInfo.aspx.vb" Inherits="SoldVehicleInfo" Title="Vehicle Update Information" CodeFileBaseClass="FFXBasePage" AutoEventWireup="false" Language="VB" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Add the script manager to the main content

<asp:Content ID="cntMainContent" ContentPlaceHolderID="cphMainContent" runat="Server">

     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Add the following code to the content page or the web form.

               <asp:TextBox id="txtSoldDate"

                                                tabIndex="10"

                                                runat="server"

                                                width="155px"></asp:TextBox>

                                <asp:RequiredFieldValidator ID="rfvExpiDate" 

                                   runat="server"                                   

                                   ControlToValidate="txtSoldDate"

                                   CssClass="alerttext"

                                   Text="*"

                                   ErrorMessage="Please enter Date Sold"></asp:RequiredFieldValidator>

                                <asp:CompareValidator id="compDateDataTypeValidator"

                                     ControlToValidate="txtSoldDate"

                                     Operator="DataTypeCheck"

                                     CssClass="text-alert"

                                     Type="Date"

                                     runat="server"

                                     ErrorMessage="You must enter a valid date">

                                </asp:CompareValidator>                         

                                <br /><asp:CompareValidator id="compDateValidator"

                                     ControlToValidate="txtSoldDate"

                                     Operator="LessThanEqual"

                                     CssClass="text-alert"

                                     Type="Date"

                                     runat="server"

                                    ErrorMessage="Date Sold cannot be a future date.">

                                     </asp:CompareValidator>

                               <asp:CalendarExtender ID="CalendarExtender1"

                                   runat="server"

                                   PopupButtonID="Image1"

                                   TargetControlID="txtSoldDate" />

Add this code in code behind at page load event

compDateValidator.ValueToCompare = DateTime.Now.ToShortDateString

2. Mutually Exclusive Checkbox Control

<asp:Content ID="cntMainContent" ContentPlaceHolderID="cphMainContent" runat="Server">
    <div>
        <script type="text/javascript">
            function MutExChkList(chk) {
                var chkList = chk.parentNode.parentNode.parentNode;
                var chks = chkList.getElementsByTagName("input");
                for (var i = 0; i < chks.length; i++) {
                    if (chks[i] != chk && chk.checked) {
                        chks[i].checked = false;
                    }
                }
            }
        </script>
        <div>
            <asp:CheckBoxList ID="CheckBoxList1" runat="server">
                <asp:ListItem Text="Orange" Value="1" onclick="MutExChkList(this);" />
                <asp:ListItem Text="Blue" Value="2" onclick="MutExChkList(this);" />
                <asp:ListItem Text="Red" Value="3" onclick="MutExChkList(this);" />
                <asp:ListItem Text="Olive" Value="4" onclick="MutExChkList(this);" />
                <asp:ListItem Text="Black" Value="5" onclick="MutExChkList(this);" />
            </asp:CheckBoxList>
        </div>
    </div>
</asp:Content>

3. Confirm box

    <script type="text/javascript">       
            
      function ConfirmBox() {
          if (confirm("Continue?")) {
              alert("Yes");
              window.location="Login.aspx"
          } else {
              alert("No");
          }
      }
    </script>

(aspx code)

  <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

(code behind)

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
        ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "ConfirmBox", "ConfirmBox();", True)
    End Sub