Develop Reference

Button inside modalpopup doesn't execute a line of code for outside component

Problems encountered:
Button inside UpdatePanel, which is inside ModalPopup, won't execute
.DataBind()
Button executes other codes but not .DataBind()
What I want to work:
When the button in the ModalPopup is clicked, .DataBind() is executed, Button is inside an UdatePanel and Gridview is outside the UpdatPanel
I have three updatepanels, all just to execute ModalPopupExtender separately based on some conditions. I also have a gridview, with a custom button to open the first popup, which is outside of the three updatepanels. Two updatepanels has a button for executing the .DataBind() for the gridview and at the same time hiding the other popups. After the buttonclick inside the popup (this is also inside an updatepanel), the previous popup closes which means that it executes the code .Hide() in codebehind, but the .DataBind() did not even though I put .DataBind() before .Hide()
I also tried to refresh the page using Response.Redirect and ServerTransfer instead of using .DataBind(), and the button stopped working.
I also tried to surround the gridview inside another updatepanel so I could just use .Update but when I execute the button for the popup, it refuses to close and the second popup appeared making it look like nested popups, the button for the second popup also stopped working.
The code works fine but the only thing that doesn't work is to refresh the gridview after the buttonclick inside the popup. If I click the button for the popup again (custom button inside the gridview), then that's when the gridview updates, and that is wrong.
I ran out of ideas how to work around this, any suggestions for this??
HTML
<asp:GridView ID="gridview" runat="server" CssClass="table table-hover" AutoGenerateColumns="False" DataKeyNames="OutgoingID" DataSourceID="SqlDataMaterials" HorizontalAlign="Center" OnRowCommand="gridview_RowCommand" Width="100%">
<Columns>
<asp:TemplateField HeaderText="#">
<ItemTemplate>
<asp:Button ID="myButton" runat="server" Text="View" CommandName="ClickMe" CommandArgument='<%# Eval("OutgoingID") %>' CausesValidation="False" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ClassificationName" HeaderText="ClassificationName" SortExpression="ClassificationName" />
<asp:BoundField DataField="MaterialName" HeaderText="MaterialName" SortExpression="MaterialName" />
<asp:BoundField DataField="Qty" HeaderText="Qty" SortExpression="Qty" />
<asp:BoundField DataField="Total" HeaderText="Total" SortExpression="Total" />
<asp:BoundField DataField="RequestDate" HeaderText="RequestDate" SortExpression="RequestDate" />
</Columns>
<EmptyDataTemplate>
<asp:Panel ID="Panel3" runat="server" CssClass="breadcrumb">
No Requests for this project.
</asp:Panel>
</EmptyDataTemplate>
</asp:GridView>
first popup
<asp:Panel ID="Panel2" runat="server" Height="400" Width="700" class="modalPopup">
<section class=" text-center" style="height: 149px; padding: 2px; vertical-align: middle; text-align: center;">
<section class="label-info">
<asp:Button ID="btn_Close" runat="server" Text="Close" Width="50px" Height="20px" CssClass="btn-danger pull-right" Font-Size="Smaller" />
<asp:Label ID="Label1" runat="server" Text="REQUEST INFORMATION" CssClass="label">
</asp:Label>
</section>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
(Some very long html here with buttons that execute the other popups)
</ContentTemplate>
</asp:UpdatePanel>
</section>
</asp:Panel>
<asp:HiddenField ID="HiddenField1" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="popup" PopupControlID="Panel2" DropShadow="True" BackgroundCssClass="modalBackground" TargetControlID="HiddenField1" OkControlID="btn_Close">
<Animations>
<OnShown><Fadein Duration="0.50" /></OnShown>
<OnHiding><Fadeout Duration=".05" /></OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
second popup
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HiddenField2" runat="server" />
<asp:Panel ID="panelSuccess" runat="server" Height="150" Width="300" class="modalPopup">
<section class="text-center">
<h5>Request successfully approved.</h5>
<br />
<asp:Button ID="btnSuccessOk" runat="server" Text="OK" CssClass="btn btn-sm btn-success" OnClick="btnSuccessOk_Click" />
</section>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalAlertSuccess" runat="server" BehaviorID="popup2" PopupControlID="panelSuccess" DropShadow="True" TargetControlID="HiddenField2" BackgroundCssClass="modalBackground" OkControlID="btnSuccessOk">
<Animations>
<OnShown><Fadein Duration="0.50" /></OnShown>
<OnHiding><Fadeout Duration=".05" /></OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSuccessOk" />
</Triggers>
</asp:UpdatePanel>
third popup
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HiddenField3" runat="server" />
<asp:Panel ID="panelCancel" runat="server" Height="150" Width="300" class="modalPopup">
<section class="text-center">
<h5>Request Cancelled.</h5>
<br />
<asp:Button ID="btnCancelRq" runat="server" Text="OK" CssClass="btn btn-sm btn-success" OnClick="btnCancelRq_Click" />
</section>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalAlertCancel" runat="server" BehaviorID="popup3" PopupControlID="panelCancel" DropShadow="True" TargetControlID="HiddenField3" BackgroundCssClass="modalBackground" OkControlID="btnCancelRq">
<Animations>
<OnShown><Fadein Duration="0.50" /></OnShown>
<OnHiding><Fadeout Duration=".05" /></OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
AND THE THE CODE BEHIND
this is from the first popup
protected void btn_approve_Click(object sender, EventArgs e)
{
try
{
if (hf_outgoingId.Value != null)
{
var abc = (from a in db.Outgoings
where a.OutgoingID == Convert.ToInt32(hf_outgoingId.Value)
select a).FirstOrDefault();
abc.Status = "APPROVED";
db.SubmitChanges();
gridview.DataBind();
ModalPopupExtender1.Hide();
ModalAlertSuccess.Show();
}
}
catch (Exception x)
{
}
}
and just in case the second/third popup
protected void btnSuccessOk_Click(object sender, EventArgs e)
{
gridview.DataBind();
}
protected void btnCancelRq_Click(object sender, EventArgs e)
{
gridview.DataBind();
}

You have to assign data source before databind to gridview to bind data
protected void btnSuccessOk_Click(object sender, EventArgs e)
{
gridview.DataSourceID = SqlDataMaterials;
gridview.DataBind();
}
protected void btnCancelRq_Click(object sender, EventArgs e)
{
gridview.DataSourceID = SqlDataMaterials;
gridview.DataBind();
}

I have a working code now, but it still didn't answer why the button won't fire in the last two popups, Instead of putting the trigger in the last two modalpopupextender, I put it in the main popup, which their button is still inside an update panel. I don't know what the deal is with the last two popups why it won't execute since all of them are inside an updatepanel.
But I think that the buttonclick worked is because my main popup has the updatepanel inside it's panel, while the other two is surrounded within an updatepanel.
<asp:Panel ID="Panel2" runat="server" Height="400" Width="700" class="modalPopup" Style="display: none;">
<section class=" text-center" style="height: 149px; padding: 2px; vertical-align: middle; text-align: center;">
<section class="label-info">
<asp:Button ID="btn_Close" runat="server" Text="Close" Width="50px" Height="20px" CssClass="btn-danger pull-right" Font-Size="Smaller" />
<asp:Label ID="Label1" runat="server" Text="REQUEST INFORMATION" CssClass="label">
</asp:Label>
</section>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
(some long html code with button 'btn_approve')
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btn_approve" />
</Triggers>
</asp:UpdatePanel>
Code behind
protected void btn_approve_Click(object sender, EventArgs e)
{
try
{
if (hf_outgoingId.Value != null)
{
var abc = (from a in db.Outgoings
where a.OutgoingID == Convert.ToInt32(hf_outgoingId.Value)
select a).FirstOrDefault();
abc.Status = "APPROVED";
db.SubmitChanges();
gridview.DataBind();
ModalPopupExtender1.Hide();
ModalAlertSuccess.Show();
}
}
catch (Exception x)
{
}
}
I can also show the second popup right after I click the button without making it look like nested popups.

Set value in Parent Page from Modal Popup Extender

I am testing the ModalPopupExtender in a simple web application. The user should input a value in the modalpopup and then this value would be shown in the parent page after closing the modal popup.
I used this code for the design:
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button runat="server" ID="BtnOpenPopup" Text="Open Popup" />
<asp:Label runat="server" ID="lbl" ></asp:Label>
<asp:Panel runat="server" ID="PnlTest">
<asp:TextBox runat="server" ID="txtInput"></asp:TextBox>
<asp:Button runat="server" ID="BtnSubmit" Text="Submit" OnClick="BtnSubmit_Click" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" TargetControlID="BtnOpenPopup" EnableViewState="true" OkControlID="BtnSubmit" PopupControlID="PnlTest" ></ajaxToolkit:ModalPopupExtender>
</div>
</form>
</body>
</html>
And this is my code behind:
protected void BtnSubmit_Click(object sender, EventArgs e)
{
lbl.Text = txtInput.Text;
}
This didn't work, I don't get any errors, but still the lbl isn't loaded with the user input.
Would appreciate if you can give me some insight on how this works.

Hello I guess that you have to add a script for the OnOkScript attribute, try this :
//......
//.......
<ajaxToolkit:ModalPopupExtender runat="server"
TargetControlID="BtnOpenPopup"
EnableViewState="true"
OkControlID="BtnSubmit"
PopupControlID="PnlTest"
OnOkScript="onModalOk();"> <!-- here is the tag you have to add to get it work -->
</ajaxToolkit:ModalPopupExtender>
</div>
</form>
<script>
function onModalOk()
{
document.getElementById("lbl").innerText = document.getElementById('txtInput').value;
}
</script>

TextBox OnTextChanged / PostBack not working

My problem is that I can't seem to get my textbox to fire the OnTextChanged event. I also checked and it doesn't seem like it is doing an autopostback despite the fact that it is set to true.
Basically, I am trying to validate the text in the textbox and either enable or disable a button based on the validation status.
Here's my code:
<asp:Panel ID="panelAccessControl" runat="server" Visible="false">
<asp:Panel ID="panelAddMileageRate" runat="server" BorderWidth="2" >
<h2>Add Mileage Rate</h2>
<asp:ScriptManager ID="scriptManagerMileageRate" runat="server" />
<asp:UpdatePanel ID="updatePanelAddMileageRate" runat="server">
<ContentTemplate>
<p>
Purpose:
<asp:DropDownList ID="ddlAddPurpose" runat="server"
AutoPostBack="true" Width="200px"></asp:DropDownList>
<br />
Country:
<asp:DropDownList ID="ddlAddCountry" runat="server"
AutoPostBack="true" Width="200px" >
</asp:DropDownList>
<br />
Effective Date:
<asp:Calendar ID="calAddEffectiveDate" runat="server">
</asp:Calendar>
<br />
Mileage Rate:
<asp:TextBox ID="txtAddMileageRate" runat="server"
AutoPostBack="true" Width="200px"
CausesValidation="true"
ontextchanged="txtAddMileageRate_TextChanged">
</asp:TextBox>
<asp:RegularExpressionValidator
ID="validatorAddMileageRate"
ControlToValidate="txtAddMileageRate" runat="server"
SetFocusOnError="true"
ErrorMessage="Only Numbers allowed"
ValidationExpression="^\d{1,20}(\.\d{0,4})?$">
</asp:RegularExpressionValidator>
</p>
</ContentTemplate>
</asp:UpdatePanel>
<p>
<asp:Button ID="buttonAddSecurityGroup" runat="server"
Text="Submit" onclick="buttonAddSecurityGroup_Click" />
</p>
</asp:Panel>
<asp:Label ID="lblStatus" runat="server" Text=""></asp:Label>
</asp:Panel>
The text box in question is txtAddMileageRate.

Set the EventName property for your txtAddMileageRate AsyncPostBackTrigger to TextChanged.
Add following codes inside your update panel and outside of ContentTemplate
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtAddMileageRate"
EventName="TextChanged" />
</Triggers>
Other sugguestion:
Have you tried looking at the AutoComplete (http://www.asp.net/ajax/ajaxcontroltoolkit/samples/autocomplete/autocomplete) control that is part of the AjaxControlToolKit? Its behaves the same way you want your solution to behave.

get object from listview after clicking a button

I'm trying to get the original object back from a listview, when I click on the button.
I thought it was in e.Item.DataItem but that always seems to be null.
<form runat="server">
<asp:ListView ID="ListList" runat="server">
<ItemTemplate>
<asp:TextBox ID="tbCompanyName" runat="server" Text='<%# Eval("CompanyName") %>'></asp:TextBox>
<asp:TextBox ID="tbEmailAdress" runat="server" Text='<%# Eval("EmailAddres") %>'></asp:TextBox>
<asp:DropDownList ID="ddlAccountManagers" AutoPostBack="True" runat="server" />
<asp:Button runat="server" Text="Create or Update Account" CommandArgument='<%# Container.DataItem.ToString() %>' />
<br />
</ItemTemplate>
</asp:ListView>
</form>
private void ListList_ItemCommand(object sender, ListViewCommandEventArgs e)
{
}

You need to keep the original datasource in session and get the real values while clicking a button.

populate a label from a listbox using panels/modal popup

I have created a listbox which is populated from a db. Using modal popup and panels, this listbox appears when the select user button is clicked. When a specific user is selected from this list and the add user button is clicked, I would like to populate the labels with the specific user name and userId. I cant seem to get the labels populated. It works when i dont use modal popup. Any ideas???
my code:
<asp:Label ID="UserId" runat="server"></asp:Label>
<asp:Label ID="UserName" runat="server" Font-Bold="true" ForeColor="#97b23c" Font-Size="14px"></asp:Label>
<br />
<asp:Button ID="SelectUserBtn" runat="server" Text="Select User" />
</asp:Panel>
</td>
<td>
<asp:Panel ID="Pnl" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h4>List Of Available Users</h4>
<asp:ListBox ID="SourceList" runat="server" DataSourceID="SqlDataSource1"
DataTextField="FullName" DataValueField="UserId" Height="160" Width="200"></asp:ListBox><br />
<asp:Button ID="OKBtn" runat="server" Text="Add User" OnClick="OkBtn_Click" />
<asp:Button ID="CancelBtn" runat="server" Text="Cancel" /><br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:dmsConStr %>"
SelectCommand="SELECT [UserId], [FullName] FROM [UserProfiles]">
</asp:SqlDataSource>
</asp:Panel>
<asp:ModalPopupExtender ID="MPEUserList" runat="server" TargetControlID="SelectUserBtn" PopupControlID="Pnl" OkControlID="OKBtn" BackgroundCssClass="ModalBackground" DropShadow="true" CancelControlID="CancelBtn">
</asp:ModalPopupExtender>
my code behind:
protected void OkBtn_Click(object sender, EventArgs e)
{
UserId.Text = SourceList.SelectedItem.Value;
UserName.Text = SourceList.SelectedItem.Text;
}

Actually the ModalPopupExtender is preventing the form from postback. Just don't include OkControlID property and it should work well.
<asp:ModalPopupExtender runat="server"
ID="MPEUserList"
TargetControlID="SelectUserBtn"
PopupControlID="Pnl"
BackgroundCssClass="ModalBackground"
DropShadow="true"
CancelControlID="CancelBtn">
</asp:ModalPopupExtender>