i have tested your code Modal Popup is showing whenever i clicked on DropDownList. But you want like like you need to open the Modal popup when you select New option From the DropDownList.
You can also do it using JavaScript onchanged event of DropDownList.
HTML
<%@ Register TagPrefix="cc1" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function ddlStatesOnChange(ddl) {
if (ddl.value == "New") {
$find("mp1").show();
return false;
}
}
</script>
<style type="text/css">
.modalBackground
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.modalPopup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 300px;
height: 140px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlStates" onchange="return ddlStatesOnChange(this)" AutoPostBack="true"
runat="server">
</asp:DropDownList>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:LinkButton ID="btnFake" runat="server" Text=""></asp:LinkButton>
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnFake"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
Enter State Name
<asp:TextBox ID="txtState" runat="server" />
<br />
Select Country
<asp:DropDownList ID="ddlCountriesId" runat="server">
<asp:ListItem Text="India" Value="1" />
</asp:DropDownList>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Save" Text="Save" />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->
</div>
</form>
</body>
</html>
Namespace
using System.Data;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
Populate();
}
}
private void Populate()
{
DataTable dt = new DataTable();
if (ViewState["Table"] == null)
{
dt.Columns.AddRange(new DataColumn[2] {
new DataColumn("StateName", typeof(string)),
new DataColumn("CountryId",typeof(int)) });
dt.Rows.Add("Maharashtra", 1);
dt.Rows.Add("Karnataka", 1);
dt.Rows.Add("Tamil nadu", 1);
dt.Rows.Add("Kashmir", 1);
}
else
{
dt = (DataTable)ViewState["Table"];
}
this.ddlStates.DataSource = dt;
this.ddlStates.DataTextField = "StateName";
this.ddlStates.DataValueField = "StateName";
this.ddlStates.DataBind();
this.ddlStates.Items.Insert(0, new ListItem("Select state", "Select state"));
this.ddlStates.Items.Insert(1, new ListItem("New", "New"));
ViewState["Table"] = dt;
}
protected void Save(object sender, EventArgs e)
{
DataTable dt = (DataTable)ViewState["Table"];
dt.Rows.Add(this.txtState.Text.Trim(), ddlCountriesId.SelectedItem.Value);
Populate();
}