Related Posts Plugin for WordPress, Blogger...

About

Follow Us

Monday, 9 February 2015

Introduction:

In this article I am going to explain how to open new webpage in Pop up based on the DropDownList selection. Suppose you want to open new page on Pop Up whenever you select any item from the DropDownList control then here is the solution using JavaScript.


C#.NET Code 
In <HEAD> tag of your design page (.aspx) creates a JavaScript function to open pop up window as:

<head runat="server">
    <title>Popup window on Dropdown selection</title>
    <script language="javascript" type="text/javascript">
        function openpopup() {
            var a = document.getElementById('<%= ddlItems.ClientID %>').selectedIndex;          
            var b = document.getElementById('<%= ddlItems.ClientID %>').options[a].value;         
            if (b == "-1") {
                alert('Please Select item');
            }
            else {
                window.open("http://www.maziksolutions.com/", "List","scrollbars=yes,resizable=no,width=640,height=400");
            }
        }
</script>
</head> 
  • In the <BODY> Tag place a DropDownList Control as: 
<asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True"
            onselectedindexchanged="ddlItems_SelectedIndexChanged">
         <asp:ListItem Selected="True" Value="-1">--Select Item--</asp:ListItem>
            <asp:ListItem>Item 1</asp:ListItem>
            <asp:ListItem>Item 2</asp:ListItem>
            <asp:ListItem>Item 3</asp:ListItem>
            <asp:ListItem>Item 4</asp:ListItem>          
        </asp:DropDownList>


  • Now in the code behind file (.aspx.cs) write the code on  SelectedIndexChanged event of DropDownList as:
  protected void ddlItems_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (!ClientScript.IsStartupScriptRegistered("alert"))
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(),
                "alert", "openpopup();", true);
        }          
    } 

VB.NET Code
  • In <HEAD> tag of your design page (.aspx) create a JavaScript function to open pop up window as: 
<head id="Head1" runat="server">
    <title>PopUp on Dropdown selection</title>
    <script language="javascript" type="text/javascript">
        function openpopup() {
            var a = document.getElementById('<%= ddlItems.ClientID %>').selectedIndex; 
            var b = document.getElementById('<%= ddlItems.ClientID %>').options[a].value; 
            if (b == "-1") {
                alert('Please Select item');
            }
            else {
                window.open("http://www.maziksolutions.com/", "List","scrollbars=yes,resizable=no,width=640,height=400");
            }
        }
</script>
</head> 
  • In the <BODY> Tag place a DropDownList Control as:
 <asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True">
         <asp:ListItem Selected="True" Value="-1">--Select Item--</asp:ListItem>
            <asp:ListItem>Item 1</asp:ListItem>
            <asp:ListItem>Item 2</asp:ListItem>
            <asp:ListItem>Item 3</asp:ListItem>
            <asp:ListItem>Item 4</asp:ListItem>          
        </asp:DropDownList> 
  • Now in the code behind file (.aspx.vb) write the code on  SelectedIndexChanged event of DropDownList as:
Protected Sub ddlItems_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)Handles ddlItems.SelectedIndexChanged
        If Not ClientScript.IsStartupScriptRegistered("alert") Then
            Page.ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "openpopup();", True)
        End If
    End Sub


Note: In this article on click of any item form the drop down, maziksolutions.com website open up in Pop up but if you want to open any other website or page of your website then replace the “http://www.maziksolutions.com/ with your website URL or Page name e.g. “http://www.google.com” or “ yourPage.aspx” etc. 
Categories: ,

0 comments:

Post a Comment