I have a RadGrid that opens a PopUp window for updating records. In the edit popup I have a combobox where that has on selectedindex changed event. In that event I am trying to set HiddenFields that are on the page of the grid. Meaning that the hidden Fields are not in the same scope of the grid.
page.aspx
<div>
<RadGrid runat="server" ID="GlJournalEntryGrid" Height="300px" Width="1400px"
AutoGenerateColumns="False" OnNeedDataSource="GlJournalEntryGrid_NeedDataSource"
OnItemCommand="GlJournalEntryGrid_ItemCommand"
OnItemDataBound="GlJournalEntryGrid_ItemDataBound">
... Edit PopUp and controls....the comboBox that updates one of the other HF below...
</RadGrid>
</div>
<div id="HiddenFieldsForGlChartLU">
<asp:HiddenField runat="server" ID="jegAccountHF" />
<asp:HiddenField runat="server" ID="jegCompanyHF" />
<asp:HiddenField runat="server" ID="jegDivisionHF" />
<asp:HiddenField runat="server" ID="jegRegionHF" />
<asp:HiddenField runat="server" ID="jegDepartmentHF" />
</div>
code-Behind
protected void jegCompany_ComboBox_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
#region Set HiddenField for control so accessible by javascript
if (cbCompany.SelectedValue != null)
jegCompanyHF.Value = cbCompany.SelectedValue;
else
jegCompanyHF.Value = "";
#endregion Set HiddenField for control so accessible by javascript
...
}
You are triggering a server-side event on the SelectedIndexChanged event. This means your popup is posting the information about the item selected in the combobox to the server. You want the data to be presented in a hidden field in the parent browser window on the client.
In order to update that information on the client, you have two options:
Write some Javascript from the child window to send the data to the
parent window.
In your SelectedIndexChanged event write the data to session and then trigger a refresh of
the parent window to load the data from session
Related
To ask my question I have created an aspx file containing a Button and a DataList with an SqlDataSource:
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<asp:DataList ID="DataList1" runat="server" DataKeyField="a"
DataSourceID="SqlDataSource1" >
<ItemTemplate>
a:
<asp:Label ID="aLabel" runat="server" Text='<%# Eval("a") %>' />
<br />
b:
<asp:Label ID="bLabel" runat="server" Text='<%# Eval("b") %>' />
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:probaConnectionString %>"
SelectCommand="SELECT [a], [b] FROM [PROBA_TABLE]"></asp:SqlDataSource>
In my code behind I add TextBoxes to the Items of the DataList. I add to every Item a TextBox in the Page_Load, and another TextBox in the Button Click eventhandler as well.
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
foreach (DataListItem item in DataList1.Items)
{
item.Controls.Add(new TextBox());
}
}
}
protected void Button1_Click(object sender, EventArgs e)
{
foreach (DataListItem item in DataList1.Items)
{
item.Controls.Add(new TextBox());
}
}
}
}
This works fine except one thing. When I click the Button, the TextBoxes which were created in the Page_Load keep their Text value, but the TextBoxes which were created in the Button1_Click lose their Text values. My real problem is more complicated than this, but I think solving this would help me a lot.
Each control that should receive data from page ViewState should be instantiated in Init or Load event handlers, because ViewState is persisted to controls BEFORE Click, Change and the rest control events (those events are triggered when ViewState changes are detected, so ViewState must be read before Click event is fired).
So the process should look like:
OnInit (static controls get created)
Static control content is deserialized from ViewState
OnLoad (create dynamic controls, in your case textboxes that you created in last Postback)
Dynamic control content is deserialized from ViewState
Click, Change and other events are fired according to changes detected comparing POST data and ViewState data
Suggestions:
You can use hidden fields to save additional status information, and then in OnLoad you can read that info to recreate dynamically created controls.
Also, you should explicitly set ID property of your textboxes so that values can be properly persisted back, don't rely on ASP.Net.
the http by default is stateless that means after your request is processed the server keeps no data or info of the request
but the values in the form need to be persisted in special cases when there is an error
suppose you fill up a long form and then post it back to the server only to get an error message and all the filled up values are gone. wouldn't that be annoying
so what asp.net does behind the scenes that it keeps a string in the page hidden that has information about all the server controls and their ids
so when you post a form back the Page class is created and the values that are posted back and binded in the specific controls because the Page class is being created in every request the pageLoad event is run and controls created in the PageLoad are then present values corresponding to their ids are put into them unlike the controls that are being created on button click till the button_click event is run that viewstate has already been deseralized and values are filled into them
I have a gridview where I have button for each row. After clicking this button, the Modal PopUp Extender Panel is opened (with PanelName.Show()). The Panel contains a user control, which shows some labels, textboxes,etc. with an additional info binded form SqlDataSource. Until this point it works well. But, when I click another button, the panel is purely shown but the content is not refreshed (based on which button is clicked, some details info should be shown). Basically, the method SqlDataSource_Selecting is called only for the panel popup showing but not anymore.
How can I force panel to be refreshed (reloaded) after each PanelName.Show()??
Thanks in advance.
If I'm understanding your question correctly, I think the problem is that you just need to re-Bind your data bound controls after the user clicks the button to change the Selected item. You can use [ControlName].DataBind() to do that. Does that make sense?
It depends on whether the control(s) you want to refresh are DataBound() or not.
In other words, can you force the control to reload by using a DataBind() method call to force the control to reload itself, with either the same or new data?
Most GUI controls have the DataBind() method, but it's useless if the control is not actually using data to work!
This is why in your case your panel is not "refreshed" with new data because using a DataBind() on the panel does nothing. Using a databind() on the entire GridView is a different story and should work. Maybe place an UPDATEPANEL around the whole lot? If you do you have to be careful your normal edits and other Commands on the rows will continue to work.
However, What you can do is place the modalpopupextender inside your TemplateField, and using a "trick", you can keep your server post backs and still fire the popup panel.
ie
<asp:UpdatePanel ID="upADDMAIN" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnADD" runat="server" Text="NEW LOGIN" BackColor="Blue" Font-Bold="True" ForeColor="#FFFFCC" OnClick="btnADD_Click" />
<asp:Button ID="btnDUM" runat="server" style="display:none" />
<div style="height:20px">
</div>
<ajaxToolkit:ModalPopupExtender ID="mpeADD" runat="server"
targetcontrolid="btnDUM"
popupcontrolid="upADD"
backgroundcssclass="modelbackground">
</ajaxToolkit:ModalPopupExtender>
<asp:UpdatePanel ID="upAdd" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlADD" runat="server" Width="700px" HorizontalAlign="Center" CssClass="auto-style10" Height="200px">
..
..
<div id="puFTR" class="auto-style17" style="vertical-align: middle">
<asp:Button id="btnOK" runat="server" Text="OK" style="width: 80px" OnClick="btnOK_Click" />
<asp:Button id="btnCAN" runat="server" Text="CANCEL" style="width: 80px" OnClick="btnCAN_Click" CausesValidation="False" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
As you may see, the btnDUM control is a Dummy to get the MPE to work, but it's not actually used as it's hidden by the style="display:none" tag.
However, the btnADD does work because it calls a Click() method on the server side which does the refresh of data on your new row. You may have to use a little jScript to pass the ROWINDEX into the Click() method for it to work with a GridView.
Incidentally, the Click() method in my case "controls" the MPE manually...
protected void btnADD_Click(object sender, EventArgs e)
{
ClearADDform();
mpeADD.Show();
}
protected void ClearADDform()
{
txtLOGIN.Text = string.Empty;
cbISActive.Checked = true;
txtPWD.Text = string.Empty;
ddlAgent.SelectedIndex = -1;
}
In my case, the above code example is outside a GridView, so you'll need to adjust.
But the point is, you can still have Server Side calls using Ajax popups!
Good luck.
Wondering if someone here can help.
I have an AJAX tabcontainer which has a number of tabs and each tab contains a user control. When I add a new item from one of the tabs, it is not reflected in the user control in another tab unless a postback occurs. (e.g. the first tab has a listview where I add a new record and the second has a simple form which contains a drop-down which I expect to contain value added from first tab).
How can I make the tabcontainer to refresh its tabs from a usercontrol?
Any help will be most appreciated.
Thanks,
Ali
You could fire an event from your first user control so that the page can handle this event and tell the other usercontrol to databind
Here is a example
<act:TabContainer ID="TabContainer2" runat="server" CssClass="EmployeeProfile" ActiveTabIndex="0">
<act:TabPanel ID="TabPanel1" runat="server" HeaderText="Datos Generales">
<ContentTemplate>
<br />
<uc1:EmployeeGeneralDetails ID="EmployeeGeneralDetails2" runat="server" OnUpdated="EmployeeGeneralDetails2_OnUpdated" />
</ContentTemplate>
</act:TabPanel>
<act:TabPanel ID="TabPanel2" runat="server" HeaderText="Referenias Personales">
<ContentTemplate>
<uc3:EmployeeResumeView ID="EmployeeResumeView2" runat="server" />
</ContentTemplate>
</act:TabPanel>
</act:TabPanel>
protected void EmployeeGeneralDetails2_OnUpdated(object o, EventArgs e)
{
EmployeeResumeView2.DataBind();
}
I am having an issue when a page contains multiple ModalPopups each containing a ValidationSummary Control.
Here is the functionality I need:
A user clicks a button and a Modal Popup appears with dynamic content based on the button that was clicked. (This functionality is working. Buttons are wrapped in UpdatePanels and the partial page postback calls .Show() on the ModalPopup)
"Save" button in ModalPopup causes client side validation, then causes a full page postback so the entire ModalPopup disappears. (ModalPopup could disappear another way - the ModalPopup just needs to disappear after a successful save operation)
If errors occur in the codebehind during Save operation, messages are added to the ValidationSummary (contained within the ModalPopup) and the ModalPopup is displayed again.
When the ValidationSummary's are added to the PopupPanel's, the ModalPopups no longer display correctly after a full page postback caused by the "Save" button within the second PopupPanel. (the first panel continues to function correctly) Both PopupPanels are displayed, and neither is "Popped-Up", they are displayed in-line.
Any ideas on how to solve this?
EDIT: Functionality in each Popup is different - that is why there must be two different ModalPopups.
EDIT 2: Javascript error I was receiving:
function () {
Array.remove(Page_ValidationSummaries, document.getElementById(VALIDATION_SUMMARY_ID));
}
(function () {
var fn = function () {
AjaxControlToolkit.ModalPopupBehavior.invokeViaServer("MODAL_POPUP_ID", true);
Sys.Application.remove_load(fn);
};
Sys.Application.add_load(fn);
}) is not a function
Missing ";" in injected javascript. see answer below
Image of Error State (after "PostBack Popup2" button has been clicked)
ASPX markup
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<%--*********************************************************************
Popup1
*********************************************************************--%>
<asp:UpdatePanel ID="Popup1ShowButtonUpdatePanel" runat="server">
<ContentTemplate>
<%--This button will cause a partial page postback and pass a parameter to the Popup1ModalPopup in code behind
and call its .Show() method to make it visible--%>
<asp:Button ID="Popup1ShowButton" runat="server" Text="Show Popup1" OnClick="Popup1ShowButton_Click"
CommandArgument="1" />
</ContentTemplate>
</asp:UpdatePanel>
<%--Hidden Control is used as ModalPopup's TargetControlID .Usually this is the ID of control that causes the Popup,
but we want to control the modal popup from code behind --%>
<asp:HiddenField ID="Popup1ModalPopupTargetControl" runat="server" />
<ajax:ModalPopupExtender ID="Popup1ModalPopup" runat="server" TargetControlID="Popup1ModalPopupTargetControl"
PopupControlID="Popup1PopupControl" CancelControlID="Popup1CancelButton">
</ajax:ModalPopupExtender>
<asp:Panel ID="Popup1PopupControl" runat="server" CssClass="ModalPopup" Style="width: 600px;
background-color: #FFFFFF; border: solid 1px #000000;">
<%--This button causes validation and a full-page post back. Full page postback will causes the ModalPopup to be Hid.
If there are errors in code behind, the code behind will add a message to the ValidationSummary,
and make the ModalPopup visible again--%>
<asp:Button ID="Popup1PostBackButton" runat="server" Text="PostBack Popup1" OnClick="Popup1PostBackButton_Click" />
<asp:Button ID="Popup1CancelButton" runat="server" Text="Cancel Popup1" />
<asp:UpdatePanel ID="Popup1UpdatePanel" runat="server">
<ContentTemplate>
<%--*************ISSUE HERE***************
The two ValidationSummary's are causing an issue. When the second ModalPopup's PostBack button is clicked,
Both ModalPopup's become visible, but neither are "Popped-Up".
If ValidationSummary's are removed, both ModalPopups Function Correctly--%>
<asp:ValidationSummary ID="Popup1ValidationSummary" runat="server" />
<%--Will display dynamically passed paramter during partial page post-back--%>
Popup1 Parameter:<asp:Literal ID="Popup1Parameter" runat="server"></asp:Literal><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<br />
</asp:Panel>
<br />
<br />
<br />
<%--*********************************************************************
Popup2
*********************************************************************--%>
<asp:UpdatePanel ID="Popup2ShowButtonUpdatePanel" runat="server">
<ContentTemplate>
<%--This button will cause a partial page postback and pass a parameter to the Popup2ModalPopup in code behind
and call its .Show() method to make it visible--%>
<asp:Button ID="Popup2ShowButton" runat="server" Text="Show Popup2" OnClick="Popup2ShowButton_Click"
CommandArgument="2" />
</ContentTemplate>
</asp:UpdatePanel>
<%--Hidden Control is used as ModalPopup's TargetControlID .Usually this is the ID of control that causes the Popup,
but we want to control the modal popup from code behind --%>
<asp:HiddenField ID="Popup2ModalPopupTargetControl" runat="server" />
<ajax:ModalPopupExtender ID="Popup2ModalPopup" runat="server" TargetControlID="Popup2ModalPopupTargetControl"
PopupControlID="Popup2PopupControl" CancelControlID="Popup2CancelButton">
</ajax:ModalPopupExtender>
<asp:Panel ID="Popup2PopupControl" runat="server" CssClass="ModalPopup" Style="width: 600px;
background-color: #FFFFFF; border: solid 1px #000000;">
<%--This button causes validation and a full-page post back. Full page postback will causes the ModalPopup to be Hid.
If there are errors in code behind, the code behind will add a message to the ValidationSummary,
and make the ModalPopup visible again--%>
<asp:Button ID="Popup2PostBackButton" runat="server" Text="PostBack Popup2" OnClick="Popup2PostBackButton_Click" />
<asp:Button ID="Popup2CancelButton" runat="server" Text="Cancel Popup2" />
<asp:UpdatePanel ID="Popup2UpdatePanel" runat="server">
<ContentTemplate>
<%--*************ISSUE HERE***************
The two ValidationSummary's are causing an issue. When the second ModalPopup's PostBack button is clicked,
Both ModalPopup's become visible, but neither are "Popped-Up".
If ValidationSummary's are removed, both ModalPopups Function Correctly--%>
<asp:ValidationSummary ID="Popup2ValidationSummary" runat="server" />
<%--Will display dynamically passed paramter during partial page post-back--%>
Popup2 Parameter:<asp:Literal ID="Popup2Parameter" runat="server"></asp:Literal><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<br />
</asp:Panel>
Code Behind
protected void Popup1ShowButton_Click(object sender, EventArgs e)
{
Button btn = sender as Button;
//Dynamically pass parameter to ModalPopup during partial page postback
Popup1Parameter.Text = btn.CommandArgument;
Popup1ModalPopup.Show();
}
protected void Popup1PostBackButton_Click(object sender, EventArgs e)
{
//if there is an error, add a message to the validation summary and
//show the ModalPopup again
//TODO: add message to validation summary
//show ModalPopup after page refresh (request/response)
Popup1ModalPopup.Show();
}
protected void Popup2ShowButton_Click(object sender, EventArgs e)
{
Button btn = sender as Button;
//Dynamically pass parameter to ModalPopup during partial page postback
Popup2Parameter.Text = btn.CommandArgument;
Popup2ModalPopup.Show();
}
protected void Popup2PostBackButton_Click(object sender, EventArgs e)
{
//***********After This is when the issue appears**********************
//if there is an error, add a message to the validation summary and
//show the ModalPopup again
//TODO: add message to validation summary
//show ModalPopup after page refresh (request/response)
Popup2ModalPopup.Show();
}
This is an issue with using both ValidationSummary and ModalPopup.
see here: http://ajaxcontroltoolkit.codeplex.com/WorkItem/View.aspx?WorkItemId=12835
The problem is that there is a missing ";" between the two injected scripts.
Their solution is to create/use a custom server control that inherits from ValidationSummary, that injects a ";" into the page startup script to fix the bug:
[ToolboxData("")]
public class AjaxValidationSummary : ValidationSummary
{
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), this.ClientID, ";", true);
}
}
Put all the <asp:ValidationSummary controls at the end of the document.
Error will be resolved.
Did you seto a different "ValidationGroup" of each popup (ValidationSummary + validators) ?
it seems there is bug in modal pop extender with validation summary in panel. to avoid the scenario always put the validation summary modal popup extender and panel at the bottom of code.
add the respective code at bottom of page
<%--This button causes validation and a full-page post back. Full page postback will causes the ModalPopup to be Hid.
If there are errors in code behind, the code behind will add a message to the ValidationSummary,
and make the ModalPopup visible again--%>
<%--*************ISSUE HERE***************
The two ValidationSummary's are causing an issue. When the second ModalPopup's PostBack button is clicked,
Both ModalPopup's become visible, but neither are "Popped-Up".
If ValidationSummary's are removed, both ModalPopups Function Correctly--%>
<%--Will display dynamically passed paramter during partial page post-back--%>
Popup1 Parameter:
I have an UpdatePanel which has a Repeater repeating LinkButtons. When I click a LinkButton, the page does a partial postback, then I get a javascript error: "Object required". I tried debugging the javascript, but couldn't get a call stack. If I remove the UpdatePanel, the LinkButtons do a full postback, and they disappear from the page. How can I get this UpdatePanel to work?
<ajax:UpdatePanel ID="wrapperUpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Repeater ID="endpointRepeater" runat="server" OnItemDataBound="EndpointDataBound">
<HeaderTemplate>
<div class="sideTabs">
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:LinkButton ID="endpointLink" runat="server" OnClick="EndpointSelected" />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</ajax:UpdatePanel>
binding code:
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.SelectedEndpoint = Factory.Get<IEndpoint>(Enums.EndPoints.Marketing);
}
IEndpointCollection col = EndpointCollection.GetActivelySubscribingEndpointsForPart(this.Item);
if (this.Item.IsGdsnItem)
col.Add(Factory.Get<IEndpoint>(Enums.EndPoints.Gdsn));
if (col.Count > 0)
col.Insert(0, Factory.Get<IEndpoint>(Enums.EndPoints.Marketing));
this.endpointRepeater.DataSource = col;
this.endpointRepeater.DataBind();
if (this.endpointRepeater.Items.Count > 0)
{
LinkButton lb = this.endpointRepeater.Items[0].FindControl("endpointLink") as LinkButton;
this.EndpointSelected(lb, new EventArgs());
}
}
thanks,
mark
This may not be your main issue, but when including an object inside a Repeater that needs an event, you shouldn't be using that control's native events. Instead you should use the Repeater's OnCommand event.
If I were to guess, your problem is caused by the repeater not maintaining its DataBound state across PostBacks. The Linkbutton disappears from view because it is not bound to the page on every PostBack, so when the response is sent back to the client, it has nothing bound to it.
It sounds like the UpdatePanel is expecting the same (or similar) markup to be returned from the AJAX response as what is on the page already, so returning nothing for the repeater causes problems.
Try binding your repeater to the page/control in its OnInit() method. This should allow the ViewState for the repeater to be loaded on every PostBack.