I am using Visual Studio 2010 and for database I am using Entity Framework 4.
In my page , I have 3 tabs and in Second tab I used Grid view for displaying the Details of Employee . In that Grid View there are 2 image button one for Delete another for Edit. I want to open a popup box whenever I will click Edit Image Button.
The problems are
1. Popup box is appear for a second only.
2. Able to retrieve the row index of the Grid view. But no value is pass into other text box, it showing null value i.e. name0.Text= ""
In my .aspx page I have the following
For Image Button
<asp:ImageButton ID="edit" runat="server" CommandArgument='<%# Bind("EmpID")%>' CommandName="edituser" ImageUrl="image/images.jpg" ToolTip="Edit User Details" OnClick="EditUser_Clicked"> </asp:ImageButton>
For ModalPopupExtender
<asp:ToolkitScriptManager ID="Toolkitmgr" runat="server"></asp:ToolkitScriptManager>
<asp:HiddenField ID="EmpID" runat="server"
onvaluechanged="EmpID_ValueChanged"/>
<asp:ModalPopupExtender ID="mpedit" DropShadow="true" BackgroundCssClass="modalBackground"
PopupControlID="pnedit" CancelControlID="btnCancel"
runat="server" TargetControlID="EmpID"></asp:ModalPopupExtender>
<asp:Panel runat="server" ID="pnedit" CssClass="modalPopup" Style="display: block;width:525px">
***Some Code***
</asp:Panel>
In the server side code for the EditUser_Clicked event I have the following:
protected void EditUser_Clicked(object sender, EventArgs e)
{
ImageButton btndetails = sender as ImageButton;
GridViewRow row = (GridViewRow)btndetails.NamingContainer;
lblId.Text = GridView1.DataKeys[row.RowIndex].Value.ToString();
name0.Text = row.Cells[1].Text;
desig0.Text = row.Cells[2].Text;
dob0.Text = row.Cells[3].Text;
email0.Text = row.Cells[4].Text;
country0.Text = row.Cells[5].Text;
city0.Text = row.Cells[6].Text;
add0.Text = row.Cells[7].Text;
hq0.Text = row.Cells[8].Text;
rbtnListGender0.Text = row.Cells[9].Text;
mobno0.Text = row.Cells[10].Text;
this.mpedit.Show();
}
The code runs without error but modal popup is not visible. Please help me to find my mistake.
There 3 ways You can use Modal Popup using Update Panel.Try any one of this.
Modal Popup with UpdatePanel inside PopupPanel
<div style="background-color: White">
<asp:Button runat="server" ID="button4" Text="Launch Modal Popup1" />
<asp:Panel runat="server" ID="modalPanel3" Style="display: none">
<asp:UpdatePanel runat="server" ID="updatePanel3">
<ContentTemplate>
<asp:Label runat="server" ID="label4" Text="Label in UpdatePanel"></asp:Label>
<asp:Button runat="server" ID="Button5" Text="Click to Cause postback" OnClick="Button5_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button runat="server" ID="Button6" Text="OK" />
<asp:LinkButton runat="server" ID="LinkButton1" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="modalPopupExtender3" TargetControlID="button4"
PopupControlID="modalPanel3" OkControlID="Button6" CancelControlID="LinkButton1"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</div>
2.Update Panel that contains a ModalPopup and its associated PopupPanel inside it
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Button runat="server" ID="button2" Text="Launch Modal Popup2" />
<asp:Panel runat="server" ID="modalPanel2" BackColor="AliceBlue" Style="display: none">
<asp:Label runat="server" ID="label5" Text="Label in UpdatePanel"></asp:Label>
<asp:Button runat="server" ID="postbackBtn" Text="Click to Cause postback" OnClick="postbackBtn_Click" /><br />
<asp:Button runat="server" ID="cancelBtn2" Text="OK" />
<asp:LinkButton runat="server" ID="okBtn2" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="modalPopupExtender2" TargetControlID="button2"
PopupControlID="modalPanel2" OkControlID="okBtn2" CancelControlID="cancelBtn2"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
3.Update Panel that contains a ModalPopup; its PopupPanel has an UpdatePanel inside it
<asp:UpdatePanel runat="server" ID="outerUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="outerPanelTrigger" />
</Triggers>
<ContentTemplate>
<asp:Button runat="server" ID="outerPanelTrigger" Text="OuterPanelTrigger" /><br />
<br />
<asp:Button runat="server" ID="button1" Text="Launch Modal Popup3" />
<asp:Panel runat="server" ID="modalPanel1" BackColor="Pink" Style="display: none">
<asp:UpdatePanel runat="server" ID="updatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="label1" Text="Label in UpdatePanel"></asp:Label>
<asp:Button runat="server" ID="updateLabel" OnClick="updateLabel_Click" Text="Click to Cause postback" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button runat="server" ID="okBtn" Text="OK" />
<asp:LinkButton runat="server" ID="cancelBtn" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="modalPopupExtender1" TargetControlID="button1"
PopupControlID="modalPanel1" OkControlID="okBtn" CancelControlID="cancelBtn"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
Are you using the latest version of AjaxControlToolkit?
In v16.1 the following bugs were fixed:
Item 27971 - Modal Popup incorrect z-index in tab container and
update panel
Item 28021 - Multiple ModalPopupExtenders z-index
issue
Related
Currently in my visual WebPart Contains update panel , but it not working, it post back the whole page
my code
My .aspx code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<div class="leftSection">
<asp:DropDownList ID="ddlYear" runat="server" AutoPostBack="True">
<asp:ListItem Text="2015" Value="2015"></asp:ListItem>
<asp:ListItem Text="2016" Value="2016"></asp:ListItem>
</asp:DropDownList>
<div class="frmDate"><p>From</p>
<SharePoint:DateTimeControl ID="from" runat="server" DateOnly="True" AutoPostBack="true" MaxDate="8900-12-31" MinDate="2015-07-31" OnDateChanged="from_DateChanged" Calendar="1" IsRequiredField="true" ErrorMessage="Please Select From Date"/>
</div>
<div class="lastDate">
<p>
To
</p>
<SharePoint:DateTimeControl ID="to" runat="server" DateOnly="True" OnDateChanged="to_DateChanged" AutoPostBack="true" OnValueChangeClientScript="holidayDates()" IsRequiredField="true" ErrorMessage="Plaese Select To Date" />
</div>
</div>
<div class="rightSection">
<div id="testdiv" runat="server">
</div>
<asp:Label CssClass="hdn-lbl lblFromDate" ID="lblFromDate" runat="server" Text="Label"></asp:Label>
<asp:Label CssClass="hdn-lbl lblToDate" ID="lblToDate" runat="server" Text="Label"></asp:Label>
<asp:Label CssClass="hdn-lbl lblTotalHrs" ID="lblTotalHrs" runat="server" Text="Label"></asp:Label>
<asp:Button ID="save" runat="server" Text="SUBMIT" OnClientClick="return cal()" OnClick="save_Click" />
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="save" />
</Triggers>
</asp:UpdatePanel>
**after click on Submit Button it Post back total page **
Your save button is in your UpdatePanel by default you should use the ChildrenAsTriggers property of your UpdatePanel (set to true by default) and not AsyncPostBackTrigger.
Edit:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
//...
</ContentTemplate>
</asp:UpdatePanel>
No external triggers just children as triggers, and default value as ChildrenAsTriggers is True equivalent to :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
Here is my aspx:
<asp:Panel ID="pnl_updateClinicVisit" runat="server" CssClass="modalPopupClinicVisitEntry2" DefaultButton="bt_editClinicVisit_submit" Style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button AutoPostBack="false" UseSubmitBehavior="false" ID="AddMedicationChange" ClientIdMode="Static" runat="server" Text="Add Med Change" OnClick="AddMedicationChange_Click" />
<asp:Panel ID="AddNewMedicationPanel" runat="server">
<asp:TextBox ID="NewDrugName" OnTextChanged="NewDrugName_TextChanged" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="NewDrugNameAutoCompleteExtender"
runat="server"
TargetControlID="NewDrugName"
MinimumPrefixLength="1"
EnableCaching="false"
CompletionSetCount="1"
CompletionInterval="500"
ServiceMethod="GetDrugs">
</asp:AutoCompleteExtender>
<asp:DropDownList OnSelectedIndexChanged="NewDrugChange_SelectedIndexChanged" ID="NewDrugChange" runat="server">
<asp:ListItem>Drug +</asp:ListItem>
<asp:ListItem>Drug -</asp:ListItem>
<asp:ListItem>Dose ↑</asp:ListItem>
<asp:ListItem>Dose ↓</asp:ListItem>
</asp:DropDownList>
<asp:Button AutoPostBack="false" UseSubmitBehavior="false" ID="SubmitMedChange" runat="server" Text="Add to Visit" OnClick="SubmitMedicationChange_Click" />
</asp:Panel>
<asp:ModalPopupExtender ID="updateClinicModalPopupExtender" runat="server" TargetControlID="bt_editClinicVisit_dummy"
PopupControlID="pnl_updateClinicVisit" CancelControlID="bt_editClinicVisit_cancel"
DropShadow="true" BackgroundCssClass="modalBackground" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
For some reason my page is reloading when I click the "AddnewMdication" and "SubmitMedChange" buttons. When I have the AutoPostBack=false UseSubmitBehavior=false, the events fire and then the page reloads. If I don't have these attributes then the page reloads before the events even fire. How do I get AJAX functionality within this modal?
Try setting your Buttons as an AsyncPostBackTrigger. You can do this by adding in the Triggers section and declaring the UpdatePanel as a conditional update.
For example
<asp:UpdatePanel ID="UpdatePanel1" runat="server"
UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AddMedicationChange" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="SubmitMedChange" EventName="Click" />
</Triggers>
<ContentTemplate>
<%-- Your code here --%>
</ContentTemplate>
</asp:UpdatePanel>
What this should do is to explicitly declare that those two buttons as being Async.
If this doesn't work, will you please post the relevant code to your two button OnClick events? AddMedicationChange_Click and SubmitMedicationChange_Click
If you try to interact with controls outside of the UpdatePanel in your code-behind during an asyncpostback, odd things can start to happen.
Maybe I am not understanding how this works completely but what I have is a gridview custom template with an imagebutton and a modalpopup. Below my page I have my popup panel which is hidden. When I click my image button the panel displays then I click the "btnModalCancelAll" and it starts to step through my method which sets a page variable from 0 to 1 but then the problem comes in it does not continue to the original gridview image click event not sure why. Below is my template field and the popup panel.
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png" OnClick="ImageButtonCancelResv_Click" />
<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="ImageButtonCancelResv" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender>
<br />
<asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>
</ItemTemplate>
<asp:Panel ID="pnlModalPanel" CssClass="modalBackground" runat="server" Style="display:none">
<asp:UpdatePanel runat="server" ID="updatePanelPopUp">
<ContentTemplate>
<div id="modalWrap">
<asp:Label ID="lblAreyousure" runat="server" Text="Are you sure you want to do that?"></asp:Label>
<div id="divhr1" class="horizontalRule" runat="server"></div>
<div id="divCancelSummaryAll">
<asp:Label ID="lblEntireFamily" runat="server" Text="Cancel all family reservations from this event date."></asp:Label><br />
<asp:Label ID="lblSummaryDeleteAll" runat="server" Text=""></asp:Label><br />
<asp:Button ID="btnModalDeleteAll" runat="server" CssClass="modalButton" Text="Cancel all Family" OnClick="btnModalDeleteAll_Click" />
</div>
<div id="divCancelSummaryOne">
<asp:Label ID="Label2" runat="server" Text="Cancel selected child reservation from this event date."></asp:Label><br />
<asp:Label ID="lblSummaryDeleteOne" runat="server" Text=""></asp:Label><br />
<asp:Button ID="btnModalDeleteOne" runat="server" CssClass="modalButton" Text="Cancel this Child" OnClick="btnModalDeleteOne_Click" />
</div>
<br />
<asp:Button ID="btnModalCancel" runat="server" Text="Cancel" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
I suggest you create another button and use it as the TargetControlID for the modal popup.
you can hide this button by setting its display to 'none'. This will only be a dummy button so that your code compiles.
Now when you click the button "ImageButtonCancelResv" it will run your code which is in the method OnClick="ImageButtonCancelResv_Click"
and at the end of this method you can add a command to show the popup:
mpe.Show();
Example Code:
protected void ImageButtonCancelResv_Click(object sender, EventArgs e)
{
//Do something here when button is clicked
mpe.Show();
}
And then
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png" OnClick="ImageButtonCancelResv_Click" />
<div style="display: none">
<asp:Button ID="btnModalStatusHidden" runat="server" />
</div>
<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnModalStatusHidden" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender>
<br />
<asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>
</ItemTemplate>
I have a ModalPopupExtender with an UpdatePanel inside. The UpdatePanel has a Repeater with a list of LinkButtons.
<asp:Button ID="btnShow" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnShow" PopupControlID="pnl" CancelControlID="btnCancel" />
<asp:Panel ID="pnl" runat="server">
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rep" runat="server" onitemcommand="rep_ItemCommand">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:Label ID="lblAssignedTo" runat="server" Text='<%# Eval("AssignedTo") %>' />
<asp:LinkButton ID="lnkUnassign" runat="server" CommandName="Unassign" CommandArgument='<%# Eval("Id") %>' />
<ajaxToolkit:ConfirmButtonExtender ID="cbeUnassign" runat="server" TargetControlID="lnkUnassign" ConfirmText="Are you sure you want to unassign this item?" />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
protected void rep_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Unassign")
{
//do something
up.Update();
}
}
When I click on a LinkButton, the UpdatePanel should update. It does this but it closes the ModalPopupExtender also.
Is there any way to update the UpdatePanel without hiding the ModalPopupExtender? I can just call ModalPopupExtender.Show(), but the page flickers.
Thanks.
Okay, just found out that there's something wrong with LinkButtons inside Repeaters. Used a Button control instead.
I've got an updatePanel and a button which triggered in it.
However, the button causes full postback instead of partial one.
Here's my Code:
<asp:Button ID="cEvent" runat="server" Text="צור יום" Width="80px"
Height="40px" Font-Size="Medium" onclick="cEvent_Click" CausesValidation="false"/>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel id = "updatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cEvent" EventName="Click"/>
</Triggers>
<ContentTemplate>
<div id="yesEve" runat="server" visible="false" style="width:95%; float:right; margin-left:5%; padding-top:20px; margin-bottom:20px;">
<table id="mytable" cellspacing="0" runat="server">
</table>
</div>
<div id="errorMsg" runat="server" visible="false" style="width:100%; text-align:center; float:right;">
<asp:label visible="true" ID="msg1" Font-Size="Medium" runat="server" Font-Bold="true" Text = "היום נמחק בהצלחה"></asp:label>
</div>
<div id="noEve" style="width:100%; padding-top:20px; float:right; text-align:center; margin-bottom:20px;" runat="server" visible="false">
<asp:label visible="true" ID="stamLabel" Font-Size="Medium" runat="server" Font-Bold="true" Text = "לא קיימים ימים פתוחים"></asp:label>
</div>
<asp:LinkButton ID ="remove" runat="server"></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
I really need some help with that... i'm searching for hours all over the web to find an answer.
Thanks, Matan
In the code behind, you can try adding this line:
ScriptManager.GetCurrent(Page).RegisterPostBackControl(Button1);
There is nothing wrong with your code, you have a conflict somewhere with code(ClientIDs) you haven't show us or a JavaScript error breaking the page.
Here's a template for how to do this from a microsoft tutorial page:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
<asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
More information here:
microsoft tutorial