I have two panels Panel1 and panel2 when page loads, both panels are hidden. And I have a dropdown list, when I selct dropdown values the panel shoud be visible. Now its not visible as per my dropdown selection. My page load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Panel1.Visible = false;
Panel2.Visible = false;
}
}
Dropdown click function
protected void ddmode_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddmode.SelectedItem.Value == "4")
{
Panel1.Visible = true;
Panel2.Visible = false;
}
}
But now when I select dropdown with value 4 panel1 is not visible. My UI part
<tr>
<td align="left" class="style2">
Mode</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate >
<div class="input-prepend" title="Select Machine ID" data-rel="tooltip">
<asp:DropDownList ID="ddmode" runat="server" AutoPostBack="True"
onselectedindexchanged="ddmode_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="ddmode" ForeColor="Red">*
</asp:RequiredFieldValidator>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<asp:Panel ID="Panel1" runat="server">
<tr>
<td align="left" class="style2">
<asp:Label ID="lblfromdate" runat="server" Text="From Date"></asp:Label>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txtfromdate" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender2" TargetControlID ="txtfromdate"
Format="dd/MM/yyyy" runat="server">
</ajaxToolkit:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server"
ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtfromdate" ForeColor="Red">*</asp:RequiredFieldValidator>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:Label ID="lbltodate" runat="server" Text="To Date"></asp:Label>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel11" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txttodate" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender3" TargetControlID ="txttodate"
Format="dd/MM/yyyy" runat="server">
</ajaxToolkit:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server"
ErrorMessage="RequiredFieldValidator"
ControlToValidate="txttodate" ForeColor="Red">*</asp:RequiredFieldValidator>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<tr>
<td align="left" class="style2">
<asp:UpdatePanel ID="UpdatePanel14" runat="server">
<ContentTemplate>
<asp:Label ID="lbldept" runat="server" Text="From Department" ></asp:Label>
</ContentTemplate></asp:UpdatePanel>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel12" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txtfromdept" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:UpdatePanel ID="UpdatePanel15" runat="server"><ContentTemplate>
<asp:Label ID="lbltodept" runat="server" Text="To Deprtment" ></asp:Label>
</ContentTemplate></asp:UpdatePanel>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel13" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txttodept" ClientIDMode="Static" runat="server"
TextMode="SingleLine"></asp:TextBox>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
</asp:Panel>
In this case, it looks like your dropdownlist is doing a partial postback within updatepanel4 but Panel1 is not in an updatepanel so it can't be updated in a partial postback. Either remove all the updatePanels or place Panel1 in an update panel.
You need to place your panel inside the update panel for it to work. Controls outside update panel cannot work for events of controls inside the update panel.
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate >
<div class="input-prepend" title="Select Machine ID" data-rel="tooltip">
<asp:DropDownList ID="ddmode" runat="server" AutoPostBack="True"
onselectedindexchanged="ddmode_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="ddmode" ForeColor="Red">*
</asp:RequiredFieldValidator>
<asp:Panel ID="Panel1" runat="server">
....
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Related
I have the following three dropdownlist and a button which gives a result based on the selected criterias:
<asp:DropDownList ID="slcLocation" runat="server" ClientIDMode="Static">
</asp:DropDownList>
<br />
<br /><br />
<asp:DropDownList ID="slcSpecialty" runat="server" ClientIDMode="Static">
</asp:DropDownList>
<br /><br />
<asp:DropDownList ID="slcGender" runat="server" ClientIDMode="Static">
<asp:ListItem Text="Any Gender" Value="" Selected="True" />
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
<asp:Button ID="btnGoAll" Text="Search All" OnClick="btnGoAll_Click" runat="server" ClientIDMode="Static" />
The first two dropdownlist populates using code-behind function.
How can I allow the user to select all three options and hit the search button to display the result without refreshing the page?
I tried something like this:
<div style="width: 390px; margin: 0 auto;">
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DropDownList AutoPostBack="True" ID="slcLocation" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br /><br />
<asp:DropDownList AutoPostBack="True" ID="slcSpecialty" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br /><br />
<asp:DropDownList AutoPostBack="True" ID="slcGender" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
<asp:ListItem Text="Any Gender" Value="" Selected="True" />
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="slcLocation" />
</Triggers>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="slcSpecialty" />
</Triggers>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="slcGender" />
</Triggers>
</asp:UpdatePanel>
</div>
<br /><br />
<div style="width: 390px; margin: 0 auto;">
<asp:HyperLink class="loginButton" style="padding: 10px; float: right;" runat="server" ID="aSearchSubmit" ClientIDMode="Static" OnClick="btnGoAll_Click" Text="Search" />
</div>
I update my Repeater with the data retrieved from the search:
<div style="width: 100%;">
<asp:Repeater runat="server" ID="rptContent">
<HeaderTemplate>
<table border="0" ID="tblInfo" style="background: #43A79A; width: 100%;" ClientIDMode="Static">
<tr>
<td>Physician Name</td>
<td>Image</td>
<td>Gender</td>
<td>Office1</td>
<td>Office2</td>
<td>Office3</td>
<td>Office4</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Physician Name").ToString() %></td>
<td><img src="www.site.com/<%# Eval("Image").ToString() %>" /></td>
<td><%# Eval("Gender").ToString() %></td>
<td><%# Eval("Office1").ToString() %></td>
<td><%# Eval("Office2").ToString() %></td>
<td><%# Eval("Office3").ToString() %></td>
<td><%# Eval("Office4").ToString() %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
When I click on the button, nothing happens.
How can I resolve the issue?
I think what do you want is this.
You need set how updatePanel´s trigger the button.
The part of page what do you want update need to be inside the updatepanel.
The javascript will catch DropDownList changes, and after all three DropDownList were changed the postback will be raised like if you was clicked in button
aspx
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
var slcLocationSelect = false;
var slcSpecialtySelect = false;
var slcGenderSelect = false;
$(document).ready(function () {
$("#<%=slcLocation.ClientID %>").change(function () { changeDropDown(this) });
$("#<%=slcSpecialty.ClientID %>").change(function () { changeDropDown(this) });
$("#<%=slcGender.ClientID %>").change(function () { changeDropDown(this) });
});
function changeDropDown(sender) {
if ($(event.target).attr('id') == $("#<%=slcLocation.ClientID %>").attr('id')) {
slcLocationSelect = true;
}
if ($(event.target).attr('id') == $("#<%=slcSpecialty.ClientID %>").attr('id')) {
slcSpecialtySelect = true;
}
if ($(event.target).attr('id') == $("#<%=slcGender.ClientID %>").attr('id')) {
slcGenderSelect = true;
}
if (slcLocationSelect && slcSpecialtySelect && slcGenderSelect) {
slcLocationSelect = false;
slcSpecialtySelect = false;
slcGenderSelect = false;
__doPostBack("<%=LinkButton1.ClientID %>", "");
}
}
</script>
<div style="width: 390px; margin: 0 auto;">
<asp:DropDownList ID="slcLocation" runat="server" ClientIDMode="Static" Style="width: 365px;"
class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br />
<br />
<asp:DropDownList ID="slcSpecialty" runat="server" ClientIDMode="Static" Style="width: 365px;"
class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br />
<br />
<asp:DropDownList ID="slcGender" runat="server" ClientIDMode="Static" Style="width: 365px;"
class="default" AppendDataBoundItems="true">
<asp:ListItem Text="Any Gender" Value="" Selected="True" />
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
<br />
<br />
<div style="width: 390px; margin: 0 auto;">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Find</asp:LinkButton>
</div>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<div style="width: 100%;">
<asp:Repeater runat="server" ID="rptContent">
<HeaderTemplate>
<table border="0" id="tblInfo" style="background: #43A79A; width: 100%;" clientidmode="Static">
<tr>
<td>
Physician Name
</td>
<td>
Image
</td>
<td>
Gender
</td>
<td>
Office1
</td>
<td>
Office2
</td>
<td>
Office3
</td>
<td>
Office4
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("Physician Name").ToString() %>
</td>
<td>
<img src="www.site.com/<%# Eval("Image").ToString() %>" />
</td>
<td>
<%# Eval("Gender").ToString() %>
</td>
<td>
<%# Eval("Office1").ToString() %>
</td>
<td>
<%# Eval("Office2").ToString() %>
</td>
<td>
<%# Eval("Office3").ToString() %>
</td>
<td>
<%# Eval("Office4").ToString() %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton1" />
</Triggers>
</asp:UpdatePanel>
</div>
cs
protected void LinkButton1_Click(object sender, EventArgs e)
{
Label1.Text = slcGender.SelectedItem.ToString();
}
in my project
i have
<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click" />
enter code here
Admin - *If Neccesery
<asp:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Panel1" TargetControlID="btnAdd"
BackgroundCssClass="modalBackground" runat="server">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" align="center" CssClass="modalPopup" runat="server">
<div class="body-reg-left">
<div class="body-top-reg">
<div class="he-reg">
<b>Admin </b>- *If Neccesery</div>
</div>
<table>
<tr>
<td>
<asp:Label ID="lblCategoryID" runat="server" Text="" CssClass="lbF"></asp:Label>
</td>
<td>
<asp:Label ID="lblstt" runat="server" Text=""></asp:Label>
</td>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Brand Name" CssClass="lbF"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtbrdName" runat="server"></asp:TextBox>
</td>
</tr>
</tr>
<tr>
<td>
<asp:Button ID="BtnBrdName" runat="server" Text="Add" Width="70px" OnClick="Button1_Click" />
<asp:Button ID="btncancel" runat="server" Text="Cancel" OnClick="btncancel_Click" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
if i click the btnAdd the value inside category textbox should go to database and popup the window .... but in my project the btnADD button's click event is not firing and modalpopup is working.... please give me a solution..
I've had the same problem, for some reason when you set a button as the TargetControlID of the modal popup it disables the Click event.
The way I overcame this issue was by placing an invisible/dummy Label control on the page and setting the TargetControlID property of the modal to this Label.Then in your btnAdd Click event get all the necessary values from the db and simply call the ModalPopupExtender1.Show() to display the modal:
ASPX:
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="AddClick" />
<asp:Label ID="dummyLabel" runat="server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Panel1" TargetControlID="dummyLabel"
BackgroundCssClass="modalBackground" runat="server">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" align="center" CssClass="modalPopup" runat="server">
<div class="body-reg-left">
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Brand Name" CssClass="lbF"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtbrdName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="BtnBrdName" runat="server" Text="Add" Width="70px" OnClick="Add" />
<asp:Button ID="btncancel" runat="server" Text="Cancel" OnClick="Cancel" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</div> </div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</form>
Code behind:
protected void Add(object sender, EventArgs e)
{
//Add logic
}
protected void Cancel(object sender, EventArgs e)
{
//Cancel logic
}
protected void AddClick(object sender, EventArgs e)
{
txtbrdName.Text = "Some category"; //Populate the value as required
ModalPopupExtender1.Show();
}
I encountered a problem where i add two ajax modal popup in a single page. This two modal popup each do different things. one is is create and one is for update. When two modal popup, my update button cannot be click ans execute the update codes. And when i remove my create modal popup, my updates work? Can anyone tell me how do i make two popup exist in the same page?
<!--Modal Popup: Create Topic-->
<cc1:modalpopupextender ID="ModalPopupExtender1" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlCreatePopup"
CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</cc1:modalpopupextender>
<asp:Panel ID="pnlCreatePopup" runat="server" CssClass="createModalPopup">
<!--Modal Popup: Update Topic-->
<asp:Button ID="bnUpdateShow" runat="server" style="display:none;" />
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="bnUpdateShow" PopupControlID="pnlpopup" CancelControlID="btnUpdateCancel" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" CssClass="topicModalPopup">
I solved this hiding the ajax pop up inside a panel configured as visible=false. I fire the popUp in codeBehind. here is some code:
<asp:LinkButton runat="server" ID="lbCredits1" Font-Underline="true"
CausesValidation="false" OnClick="btMpeCredits_Click">Credits</asp:LinkButton>
|
<asp:LinkButton runat="server" ID="lbPrivacy2" Font-Underline="true"
CausesValidation="false" OnClick="btMpePrivacy_Click">Privacy</asp:LinkButton>
<%--AjaxPopUpExtenderArea--%>
<asp:Panel ID="pnlAjaxArea" runat="server" Visible="false">
<%--PrivacyMPE--%>
<%--I have to hide the link button referenced in the AjaxPopUpExtender. I will use a different button to show the pop up--%>
<div style="display:none;">
<asp:LinkButton runat="server" ID="lbPrivacy" Text="PRIVACY"/>
</div>
<asp:ModalPopupExtender ID="MpePrivacy" runat="server" TargetControlID="lbPrivacy"
PopupControlID="PnlPrivacy" BackgroundCssClass="modalBackground" >
</asp:ModalPopupExtender>
<asp:Panel runat="server" ID="PnlPrivacy" Height="500px" Width="600px" BorderStyle="Solid"
BorderColor="#1E549E" BorderWidth="3px" BackColor="#FFFFFF" ScrollBars="Auto">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<UcPrivacy:Privacy runat="server" ID="Privacy" />
</td>
</tr>
<tr>
<td align="center">
<asp:ImageButton ImageUrl="~/App_Themes/GfRegistrationPage/images/chiudi-btn.gif" runat="server" OnClick="btMpeClose"
CausesValidation="False" />
<br />
<br />
</td>
</tr>
</table>
</asp:Panel>
<%--CreditsMPE--%>
<div style="display:none;">
<asp:LinkButton runat="server" ID="lbCredits" Text="credits"/>
</div>
<asp:ModalPopupExtender ID="MpeCredits" runat="server" TargetControlID="lbCredits"
PopupControlID="PnlCredits" BackgroundCssClass="modalBackground" >
</asp:ModalPopupExtender>
<asp:Panel runat="server" ID="PnlCredits" Height="500px" Width="600px" BorderStyle="Solid"
BorderColor="#1E549E" BorderWidth="3px" BackColor="#FFFFFF" ScrollBars="Auto">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<UcCredits:Credits runat="server" ID="Credits" />
</td>
</tr>
<tr>
<td align="center">
<asp:ImageButton ImageUrl="~/App_Themes/GfRegistrationPage/images/chiudi-btn.gif" runat="server" OnClick="btMpeClose"
CausesValidation="False" />
<br />
<br />
</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
and here some code behind:
#region ModalPopUpS Privacy credits
protected void btMpePrivacy_Click(object sender, EventArgs e)
{
pnlAjaxArea.Visible = true;
AjaxControlToolkit.ModalPopupExtender modalPop = ((AjaxControlToolkit.ModalPopupExtender)(this.Master.FindControl("ContentPlaceHolder1").FindControl("MpePrivacy")));
modalPop.Show();
}
protected void btMpeCredits_Click(object sender, EventArgs e)
{
pnlAjaxArea.Visible = true;
AjaxControlToolkit.ModalPopupExtender modalPop = ((AjaxControlToolkit.ModalPopupExtender)(this.Master.FindControl("ContentPlaceHolder1").FindControl("MpeCredits")));
modalPop.Show();
}
protected void btMpeClose(object sender, EventArgs e)
{
pnlAjaxArea.Visible = false;
}
#endregion
I have Ajax TabPanel with Tab "Employee List" "Add Employee" "Edit Employee"
On Employee List Tab i use gridview to display list of employee along with link Button to view details of employee on same tab and "Del" button to delete employee. It worked fine but when i added Controls to Second tab "Add Employee" along with validation controls. After this gridview in Tab one is not working as it trigger validation on second Tab.
How can i stop this validation which is triggered by controls on Tab 1
Below is the code
<asp:TabContainer ID="TabContainer1" runat="server" Height="320px" Width="100%"
ActiveTabIndex="0" >
<asp:TabPanel ID="atpEmployeeList" runat="server" >
<HeaderTemplate>Employee List</HeaderTemplate>
<ContentTemplate>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="style1" align="left" valign="top">
<b>Employee List</b>
<asp:GridView ID="gvEmployeeList" runat="server" AutoGenerateColumns="False"
DataKeyNames="eCode" BackColor="White" BorderColor="#336666"
BorderStyle="None" BorderWidth="2px" CellPadding="4"
GridLines="Horizontal" onrowcommand="gvEmployeeList_RowCommand"
onrowdatabound="gvEmployeeList_RowDataBound" >
<Columns>
<asp:BoundField DataField="eSno" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortExpression="eSno" />
<asp:BoundField DataField="eFirstName" HeaderText="First Name"
SortExpression="eFirstName" />
<asp:BoundField DataField="eLastName" HeaderText="Last Name"
SortExpression="eLastName" />
<asp:BoundField DataField="eDepartment" HeaderText="Department"
SortExpression="eDepartment" />
<asp:BoundField DataField="eSalary" HeaderText="Salary"
SortExpression="eSalary" />
<asp:TemplateField HeaderText="Details">
<ItemTemplate>
<asp:LinkButton ID="lnkBtnEmpDetails" CommandArgument='<%# Eval("eSno") %>' CommandName="ViewDetails" runat="server">
View</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="lnkBtnEmpDelete" CommandArgument='<%# Eval("eSno") %>' CommandName="Delete" runat="server">
Del</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#333333" />
<HeaderStyle BackColor="#336699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#336699" ForeColor="White" HorizontalAlign="Right" />
<RowStyle BackColor="White" ForeColor="#333333" />
<SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F7F7F7" />
<SortedAscendingHeaderStyle BackColor="#487575" />
<SortedDescendingCellStyle BackColor="#E5E5E5" />
<SortedDescendingHeaderStyle BackColor="#275353" />
</asp:GridView>
</td>
<td width="250px" align="left" valign="top">
<b>Employee Details</b>
<br />
<table width="280px" align="left" cellpadding="3" cellspacing="0" >
<tr>
<td class="style8" bgcolor="#336699">
Code</td>
<td>
<asp:Label ID="lblEmpCode" runat="server" ></asp:Label>
</td>
</tr>
<tr>
<td class="style8" bgcolor="#336699">
Fisrt Name</td>
<td>
<asp:Label ID="lblFirstName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style5" bgcolor="#336699">
Last Name</td>
<td class="style6">
<asp:Label ID="lblLastName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style8" bgcolor="#336699">
Designation</td>
<td>
<asp:Label ID="lblDesignation" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style8" bgcolor="#336699">
Department</td>
<td>
<asp:Label ID="lblDepartment" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style8" bgcolor="#336699">
Salary</td>
<td>
<asp:Label ID="lblSalary" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style8" bgcolor="#336699">
Join Date</td>
<td>
<asp:Label ID="lblJoinDate" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style8" bgcolor="#336699">
Phone</td>
<td>
<asp:Label ID="lblPhone" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style8" bgcolor="#336699">
Address</td>
<td>
<asp:Label ID="lblAddress" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style8" bgcolor="#336699">
City</td>
<td>
<asp:Label ID="lblCity" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style4">
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="atpAddEmployee" runat="server" >
<HeaderTemplate>Add Employee</HeaderTemplate>
<ContentTemplate>
<div><b>Enter Details of New Employee</b></div>
<table border="0px"><tr>
<td width="400px">
<div class="spacer"></div>
<div class="row">
<asp:Label ID="lblAEmpCode" CssClass="txtLabel" runat="server" Text="Code :"></asp:Label>
<asp:TextBox ID="txtACode" runat="server" CssClass="txt4Digit"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvCode" runat="server" ErrorMessage="*"
ControlToValidate="txtACode"></asp:RequiredFieldValidator>
</div>
<div class="row">
<asp:Label ID="lblAFN" CssClass="txtLabel" runat="server" Text="First Name :"></asp:Label>
<asp:TextBox ID="txtAFN" runat="server" CssClass="txtbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
ControlToValidate="txtAFN"></asp:RequiredFieldValidator>
</div>
<div class="row">
<asp:Label ID="lblALN" CssClass="txtLabel" runat="server" Text="Last Name :"></asp:Label>
<asp:TextBox ID="txtALN" runat="server" CssClass="txtbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*"
ControlToValidate="txtALN"></asp:RequiredFieldValidator>
</div>
<div class="row">
<asp:Label ID="lblADesignation" CssClass="txtLabel" runat="server" Text="Designation :"></asp:Label>
<asp:TextBox ID="txtADesignation" runat="server" CssClass="txtbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="*"
ControlToValidate="txtADesignation"></asp:RequiredFieldValidator>
</div>
<div class="row">
<asp:Label ID="lblADepartment" CssClass="txtLabel" runat="server" Text="Department :"></asp:Label>
<asp:TextBox ID="txtADepartment" runat="server" CssClass="txtbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="*"
ControlToValidate="txtADepartment"></asp:RequiredFieldValidator>
</div>
<div class="row">
<asp:Label ID="lblASalary" CssClass="txtLabel" runat="server" Text="Salary :"></asp:Label>
<asp:TextBox ID="txtASalary" runat="server" CssClass="txtbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="*"
ControlToValidate="txtASalary"></asp:RequiredFieldValidator>
</div>
<div class="row">
<asp:Label ID="lblAJoinDate" CssClass="txtLabel" runat="server" Text="Join Date :"></asp:Label>
<asp:TextBox ID="txtAJoinDate" runat="server" CssClass="txtbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ErrorMessage="*"
ControlToValidate="txtAJoinDate"></asp:RequiredFieldValidator>
</div>
</td>
<td width="400px">
<div class="spacer"></div>
<div class="row">
<asp:Label ID="lblAAddress" CssClass="txtLabel" runat="server" Text="Address :"></asp:Label>
<asp:TextBox ID="txtAAddress" runat="server" CssClass="txtbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="*"
ControlToValidate="txtAAddress"></asp:RequiredFieldValidator>
</div>
<div class="row">
<asp:Label ID="lblACity" CssClass="txtLabel" runat="server" Text="City :"></asp:Label>
<asp:TextBox ID="txtACity" runat="server" CssClass="txtbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ErrorMessage="*"
ControlToValidate="txtACity"></asp:RequiredFieldValidator>
</div>
<div class="row">
<asp:Label ID="lblACountry" CssClass="txtLabel" runat="server" Text="Country :"></asp:Label>
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddCountry" runat="server" CssClass="ddGeneral" DataTextField="Country"
DataValueField="CountryId" OnSelectedIndexChanged="ddCountry_SelectedIndexChanged"
AutoPostBack="true" AppendDataBoundItems="true" >
<asp:ListItem Value="0">Select Country</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="row">
<asp:Label ID="lblAState" CssClass="txtLabel" runat="server" Text="State :"></asp:Label>
<asp:UpdatePanel ID="updatePnlState" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddState" runat="server" CssClass="ddGeneral" DataTextField="Region" DataValueField="RegionId" AppendDataBoundItems="true">
<asp:ListItem Value="0">Select State</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="updProgLoading" runat="server" >
<ProgressTemplate>
<img src="images/ajax-loader-small.gif" align="left" alt="Loading..." vspace="0" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<div class="row">
<asp:Label ID="lblALL" CssClass="txtLabel" runat="server" Text="Landline :"></asp:Label>
<asp:TextBox ID="txtALL" runat="server" CssClass="txtbox"></asp:TextBox>
</div>
<div class="row">
<asp:Label ID="lblAMobile" CssClass="txtLabel" runat="server" Text="Mobile :"></asp:Label>
<asp:TextBox ID="txtAMobile" runat="server" CssClass="txtbox"></asp:TextBox>
</div>
<div class="row">
<asp:Label ID="lblAEmail" CssClass="txtLabel" runat="server" Text="Email :"></asp:Label>
<asp:TextBox ID="txtAEmail" runat="server" CssClass="txtbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" ErrorMessage="*"
ControlToValidate="txtAEmail"></asp:RequiredFieldValidator>
</div>
</td>
</tr>
<tr><td colspan="2" align="center" height="40px">
<asp:Button ID="btnAddEmployee" runat="server" Text="Add Employee"
CssClass="btn" onclick="btnAddEmployee_Click" /> <input id="Reset1" type="reset" class="btn" value="Reset" />
</td></tr>
</table>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="atpEditEmployee" runat="server" >
<HeaderTemplate>Edit Employee</HeaderTemplate>
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<input id="Button2" type="button" value="Next" onclick="MoveTab(1)" />
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
You should look at utilising the ValidationGroup attribute for validators. For example for all the validators in the atpAddEmployee tab you would set the attribute like so ValidationGroup="atpAddEmployee" or any other name that you think appropriate.
I've taken one of the validators from the atpAddEmployee tab and added the attribute as described above.
<asp:RequiredFieldValidator ID="rfvCode" runat="server" ErrorMessage="*" ControlToValidate="txtACode" ValidationGroup="atpAddEmployee"></asp:RequiredFieldValidator>
For that particular tab you would also need to add the ValidationGroup attribute to the button that should trigger the validation, see below.
<asp:Button ID="btnAddEmployee" runat="server" Text="Add Employee" CssClass="btn" onclick="btnAddEmployee_Click" ValidationGroup="atpAddEmployee" />
Some further reading, MSDN and W3Schools.
i use modal popup extender to show my details in another separate window it is a panel contains some controls the problem is ::
when i click on my button which contains::
the Show() method the parent page just frozen and no popup appears at all on the other side i have a grid view when i click on the last button on it the popup appears where the other buttons on the grid view make the same behavior of my first button , i donot know what is the problem my panel visibility = true and no setting in my behind code..i view the source and i find the panel with its contents then why the popup window doesnot appear..i search alot but i donot find a solution to my problem ..
my aspx::
<asp:Panel id="master_editMode" runat="server" >
<div id="masterDiv" style="width:98%" dir="rtl">
<div id="masterControls" align="center">
<table border="0" width="98%">
<tr>
<td align="center" dir="rtl">
<asp:ObjectDataSource ID="ObjDS_AllTasks" runat="server"
SelectMethod="Get_All_Tasks" TypeName="DocumentFlowModuleDTO.TaskDTO">
</asp:ObjectDataSource>
<asp:HiddenField ID="hd_Task_Code" runat="server" />
<table>
<tr>
<td>
<asp:Label ID="Label11" runat="server" Text="Search for Task" Visible="False"></asp:Label>
</td>
<td align="right">
<asp:TextBox ID="txt_Search" runat="server" AutoPostBack="True"
ontextchanged="txt_Search_TextChanged" Width="200px" Visible="False"></asp:TextBox>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
<asp:GridView ID="grd_AllTasks" runat="server" AllowPaging="True"
AutoGenerateColumns="False" CssClass="Alternating" DataKeyNames="task_code"
DataSourceID="ObjDS_AllTasks"
onpageindexchanging="grd_AllTasks_PageIndexChanging"
onrowdatabound="grd_AllTasks_RowDataBound" style="margin-right: 0px">
<RowStyle VerticalAlign="Top" />
HeaderText="ÍÐÝ">
<ItemTemplate>
<asp:ImageButton ID="btn_Delete_Task" runat="server"
CommandArgument="<%# Bind('task_code') %>" Height="33px"
ImageUrl="~/Images/delete.png" oncommand="btn_Delete_Task_Command"
Width="67px" />
<cc1:ConfirmButtonExtender ID="btn_Delete_Task_ConfirmButtonExtender"
runat="server" ConfirmText="åá ÊÑíÏ ÍÐÝ æËíÞÉ ÇáÇÚÊãÇÏ ¿" Enabled="True"
TargetControlID="btn_Delete_Task">
</cc1:ConfirmButtonExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle HorizontalAlign="Right" />
</asp:GridView>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" dir="rtl">
<asp:Label ID="lbl_TaskName" runat="server" Font-Bold="True" Font-Size="13pt"></asp:Label>
</td>
</tr>
<tr>
<td align="center" dir="rtl" style="height: 196px">
<table>
<tr>
<td align="left">
<asp:Label ID="lbl_No_States" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
</td>
<td align="right">
<asp:ImageButton ID="btn_AddStatesToTask" runat="server"
ImageUrl="Images/add.png" onclick="btn_AddStatesToTask_Click" Visible="False" />
<asp:Button ID="Dummy_btn2" runat="server" Text="Button" Style="display:none;" />
<cc1:ModalPopupExtender ID="btn_AddStatesToTask_ModalPopupExtender"
runat="server"
TargetControlID="Dummy_btn2"
BackgroundCssClass="modalBackground"
PopupControlID="pnl_Add_States"
DropShadow="True">
</cc1:ModalPopupExtender>
</td>
</tr>
</table>
<asp:HiddenField ID="hd_StateSerial" runat="server" />
<asp:HiddenField ID="hd_StateRowIndex" runat="server" />
<asp:GridView ID="grd_States" runat="server" AllowPaging="True" DataKeyNames="state_serial"
onpageindexchanging="grd_States_PageIndexChanging" Visible="False"
CssClass="Alternating" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="state_name" HeaderText="ÇáãÑÍáÉ"
ShowHeader="False" />
<asp:BoundField DataField="state_order" HeaderText="ÊÑÊíÈ ÇáãÑÍáÉ"
ShowHeader="False" />
<asp:TemplateField HeaderText="Power" ShowHeader="False">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="chb_StatePower" runat="server"
Checked='<%# Convert.ToBoolean(Eval("power_flag")) %>' Enabled="False" />
</ItemTemplate>
<ItemStyle Width="40px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="New" ShowHeader="False">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" />
<asp:Button ID="Dummy_btn4" runat="server" Text="Button" Style="display:none;" />
<cc1:ModalPopupExtender ID="btn_TaskState_Edit_ModalPopupExtender" runat="server"
TargetControlID="Dummy_btn4"
BackgroundCssClass="modalBackground"
PopupControlID="pnl_Add_States"
DropShadow="True">
</cc1:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ÍÐÝ" ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="btn_TaskState_Delete" runat="server"
CommandArgument="<%# Bind('state_serial') %>" Height="26px"
ImageUrl="~/Images/delete.png" oncommand="btn_TaskState_Delete_Command"
Width="47px" />
<cc1:ConfirmButtonExtender ID="btn_TaskState_Delete_ConfirmButtonExtender"
runat="server" ConfirmText="åá ÊÑíÏ ÍÐÝ ÇáãÑÍáÉ ¿" Enabled="True"
TargetControlID="btn_TaskState_Delete">
</cc1:ConfirmButtonExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:ObjectDataSource ID="ObjectDataSource_States" runat="server"
SelectMethod="Select_TaskStates" TypeName="DocumentFlowModule.DTO.TaskStateDTO">
<SelectParameters>
<asp:Parameter Name="task_code" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnl_Add_Task" runat="server" CssClass="modalPopup"><%-- Style="display:none;"--%>
<div id="div3" style="width: 95%">
<div id="div4" align="center">
<table>
<tr>
<td>
<asp:UpdatePanel ID="UpPnl1" runat="server">
<ContentTemplate>
<table dir="rtl" style="text-align: right">
<tr bgcolor="#f1ece2">
<th align="right" height="35" valign="middle" colspan="3">
<asp:Label ID="lbl_New_Task" runat="server" Font-Bold="False" Font-Size="14pt"
Text="ÅÖÇÝÉ æËíÞÉ ÇÚÊãÇÏ" Visible="False"></asp:Label>
<asp:Label ID="lbl_Edit_Task" runat="server" Font-Bold="False" Font-Size="14pt"
Text="ÊÚÏíá æËíÞÉ ÇÚÊãÇÏ" Visible="False"></asp:Label>
</th>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label1" runat="server" Text="Task Name"></asp:Label>
</td>
<td style="width: 140px">
<asp:TextBox ID="txt_TaskName" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txt_TaskName" ErrorMessage="*" ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label10" runat="server" Text="DataBase Name"></asp:Label>
</td>
<td style="width: 140px">
<asp:DropDownList ID="ddl_DataBases" runat="server" AutoPostBack="True"
ondatabound="ddl_DataBases_DataBound"
onselectedindexchanged="ddl_DataBases_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="ddl_DataBases" ErrorMessage="*" InitialValue="--Select--"
ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label2" runat="server" Text="Table Name"></asp:Label>
</td>
<td style="width: 140px">
<asp:DropDownList ID="ddl_Tables" runat="server" AutoPostBack="True"
ondatabound="ddl_Tables_DataBound"
onselectedindexchanged="ddl_Tables_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="ddl_Tables" ErrorMessage="*" InitialValue="--Select--"
ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label17" runat="server" Text="Table Key"></asp:Label>
</td>
<td style="width: 140px">
<asp:Label ID="lbl_Key" runat="server"></asp:Label>
<asp:CheckBoxList ID="cbl_Columns" runat="server">
</asp:CheckBoxList>
</td>
<td>
<asp:Label ID="lbl_Select_Key" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label18" runat="server" Text="Current Record State"></asp:Label>
</td>
<td style="width: 140px">
<asp:DropDownList ID="ddl_Columns" runat="server" AutoPostBack="True"
ondatabound="ddl_Columns_DataBound">
</asp:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="ddl_Columns" ErrorMessage="*" InitialValue="--Select--"
ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label5" runat="server" Text="Form View "></asp:Label>
</td>
<td style="width: 140px">
<asp:TextBox ID="txt_F_View" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server"
ControlToValidate="txt_F_View" ErrorMessage="*" InitialValue="--Select--"
ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label6" runat="server" Text="Form New"></asp:Label>
</td>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td dir="rtl" align="center">
<asp:ImageButton ID="btn_OK" runat="server" ImageUrl="~/Images/add.png"
onclick="btn_OK_Click" ValidationGroup="G1" Visible="False" />
<asp:ImageButton ID="btn_Edit" runat="server" ImageUrl="~/Images/edit.png"
onclick="btn_Edit_Click" ValidationGroup="G1" Visible="False" />
<asp:ImageButton ID="btn_Cancel_Task" runat="server" CausesValidation="False"
Height="36px" ImageUrl="~/Images/cancel.png" onclick="btn_Cancel_Task_Click" />
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
the btn_add _task does not make my popup appear just freeze the parent page
my .cs
protected void btn_Add_Task_Click(object sender, EventArgs e)
{
//AjaxControlToolkit.ModalPopupExtender modal1 = (AjaxControlToolkit.ModalPopupExtender) table1.FindControl("btn_Add_Task_ModalPopupExtender");
//modal1.Show();
grd_States.Visible = false;
lbl_No_States.Text = "";
btn_AddStatesToTask.Visible = false;
lbl_TaskName.Text = "";
//master_editMode.Visible = true;
//pnl_Add_Task.Visible = true;
btn_OK.Visible = true;
btn_Edit.Visible = false;
lbl_New_Task.Visible = true;
lbl_Edit_Task.Visible = false;
txt_TaskName.Text = "";
ddl_DataBases.ClearSelection();
ddl_Tables.Items.Clear();
ddl_Columns.Items.Clear();
cbl_Columns.Items.Clear();
txt_F_New.Text = "";
txt_F_View.Text = "";
txt_Params.Text = "";
txt_SP_Name.Text = "";
btn_Add_Task_ModalPopupExtender.Show();
}
thanks in advance
EDITED::
<table align="center" dir="rtl">
<tr>
<td >
<asp:Button ID="Dummy_btn" runat="server" Text="Button" Style="display:none;" />
<asp:Button ID="btn_Add_Task" runat="server" Text="ÅÖÇÝÉ æËíÞÉ ÇÚÊãÇÏ ÌÏíÏÉ"
onclick="btn_Add_Task_Click" Font-Bold="True" Font-Size="12pt"
ForeColor="#0066FF" />
<cc1:ModalPopupExtender ID="btn_Add_Task_ModalPopupExtender" runat="server"
TargetControlID="Dummy_btn"
PopupControlID="pnl_Add_Task"
BackgroundCssClass="modalBackground"
DropShadow="True" >
</cc1:ModalPopupExtender>
</td>
</tr>
</table>`
If you want your modal popup to be displayed when the user clicks on the btn_Add_Task button, you should set that button as the TargetControlID of the extender:
<cc1:ModalPopupExtender ID="btn_Add_Task_ModalPopupExtender" runat="server"
TargetControlID="btn_Add_Task" PopupControlID="pnl_Add_Task"
BackgroundCssClass="modalBackground" DropShadow="True" />
In your current code, the modal popup is triggered by a button named Dummy_btn, which I can't find in your markup, but which probably isn't what you want.
We had many issues with ajax popup. you might want to try the approach we have been using for past one month or so with out any issues. This approach creates a popup with out need of ajax / jquery / javascript /css/ update panel .
here:
A modal popup with out using ajax, update panel, jquery or javascript- surprisingly this seems to work