I have this AJAX button that I want to update some CSS. The problem is that the controls I want it to update are in a different file and can't be moved out of that file.
This is the panel whose CSS I want to update, which is located in the Site.master file:
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="Panel2" runat="server" updatemode="Always">
<ContentTemplate>
<div id="updateThis" runat="server"><p>Test text</p></div>
</ContentTemplate>
</asp:UpdatePanel>
This is the button, located in the Items.ascx file:
<asp:UpdateProgress runat="server" ID="PageUpdateProgress">
<ProgressTemplate>
<img class="ajax-loader" src="/Images/ajax-loader.gif" alt="Loading..." />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="Panel3" runat="server" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateButton" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Button runat="server" OnClick="UpdateButton"
OnClientClick="hideButton()" Text="Update"
class="update" ID="UpdateButton" name="UpdateButton"
type="submit" ></asp:Button>
</ContentTemplate>
</asp:UpdatePanel>
This is the Items.ascx.cs method that is UpdateButton
protected void UpdateButton(object sender, EventArgs e)
{
var masterPage = this.Page.Master;
var updatePanel = masterPage.FindControl("Panel2");
var div = (HtmlGenericControl)updatePanel.Controls[0].FindControl("updateThis");
div.Style.Add("color", "#ff0000");
}
When I click the button it doesn't end up working correctly. As of right now, with the AJAX UpdateProgress template, it shows the loading GIF and then the GIF disappears and the text never changes color.
EDIT
Hopefully this will give a better idea of where things might be going wrong:
THIS WORKS
protected void UpdateButton(object sender, EventArgs e)
{
var masterPage = this.Page.Master;
var updatePanel = masterPage.FindControl("Panel2");
var div = (HtmlGenericControl)updatePanel.FindControl("updateThis");
div.Style.Add("color", "#ff0000");
UpdateButton.Text = "Done!";
}
I had #updateThis in the FindControl() method. Don't be like me!
You should add the runat="server" attribute to the div control, to make it visible in code-behind:
<div id="updateThis" runat="server"><p>Test text</p></div>
You can also remove Controls[0] in the event handler (but it works if you keep it, according to my tests):
protected void UpdateButton(object sender, EventArgs e)
{
var masterPage = this.Page.Master;
var updatePanel = masterPage.FindControl("Panel2");
var div = (HtmlGenericControl)updatePanel.FindControl("updateThis");
div.Style.Add("color", "#ff0000");
}
Related
i wanted to use a timer in a program i'm working on, but it always stops after 1 tick !! can you give me any tips to make it repeat unstoppably (or until i want it to) please ??
this is my code:
int i = 20;
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "(20)";
}
protected void Timer1_Tick(object sender, EventArgs e)
{
i--;
Label1.Text = "(" + i + ")";
if (i == 0)
{
Session["Profession"] = "Visiteur";
Response.Redirect("Acceuil.aspx");
}
Edit: my HTML code :
<form id="form1" runat="server">
<div><center>
<span class="style1">message</span><br
class="style1" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick" >
</asp:Timer>
<asp:Timer ID="Timer2" runat="server" Interval="1000">
</asp:Timer>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click"
PostBackUrl="~/Acceuil.aspx">Retour</asp:LinkButton>
<br />
</center>
</div>
</form>
Edit2: what i want to do is the normal redirecting code, count to 20 and refreshing every second (to show to user how much secs left) and at the end it redirects to a new page, but it wasn't working, so i was wondering why ??
and i think i got my answer from #Andrei Rînea, and thank you everyone for your help : )
Edit3: Solved and here is the code :
static int i = 20;
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
Label1.Text = "20";
}
protected void Timer1_Tick(object sender, EventArgs e)
{
i--;
Label1.Text = i.ToString();
if (i == 0)
{
i = 20;
Session["Profession"] = "Visiteur";
Response.Redirect("Acceuil.aspx");
}
}
Thanks everyone again : )
Please use the following code :
static int i = 20;
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
Label1.Text = "(20)";
}
protected void Timer1_Tick(object sender, EventArgs e)
{
i--;
Label1.Text =i.ToString();
if (i == 0)
{
Session["Profession"] = "Visiteur";
Response.Redirect("Acceuil.aspx");
}
}
your HTML code should be like :
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
I'm going to assume here that you are wishing to have a process that ticks away on your server in the background.
I'm also going to assume you've tried to add this to your Webform.
If so, the issue you have encountered, is that your Webform object only exists for the short time that it is processing your request, after which it is disposed of - including your timer.
If I'm correct, you'd probably like to take a look at Quartz.Net:
http://www.mikesdotnetting.com/article/254/scheduled-tasks-in-asp-net-with-quartz-net
You are trying to run client side code on the server. You need to do this in JavaScript instead.
The C# code will be run just before rendering the page and not longer. You probably believe the code will run as long as the visitor is on the page which is not the case.
I drawn a highchart in asp.net. I was working properly but when I puts my SUBMIT button in updatepanel then highchart is not working.It is not redrawing.
Page is not reloaded so it is not redrawing.
aspx code-
<asp:UpdatePanel runat="server" ID="update1">
<ContentTemplate>
<asp:Button ID="button_borrowing_calculate" CssClass="SDButtonGrad" runat="server" Text="Calculate>>" Height="30px" Width="90px" OnClientClick="emptycheck();" OnClick="btn_bp_calculate_Click" /></ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" ID="updatep">
<ContentTemplate>
<div id="rp_graph1" style="height: auto; width: 100%;" runat="server">
<highchart:LineChart runat="server" Height="300px" Width="99%" ID="hcLine" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
aspx.cs code -
protected void btn_bp_calculate_Click(object sender, EventArgs e)
{
hcLine.Title.text = "Borrowing Capacity";
hcLine.YAxis.Add(new YAxisItem { title = new Title("Amount") });
hcLine.XAxis.Add(new XAxisItem
{
categories = new[] { "0","1", "2","3", "4","5", "6","7", "8","9", "10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30",
"31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50"
}
});
var series = new List<Serie>();
series.Add(new Serie { data = new object[] { 400, 435, 446, 479, 554, 634, 687, 750, 831 } });
//bind
hcLine.DataSource = series;
hcLine.DataBind();
}
Your aspx code is not very clear. But i ll write two suggestion and try one of them
If your button is outside the update Panel so try this way:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<div id="rp_graph1" style="height: auto; width: 100%;" runat="server">
<highchart:LineChart runat="server" Height="300px" Width="99%" ID="hcLine" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="button_borrowing_calculate" />
</Triggers>
</asp:UpdatePanel>
if your button is inside the update panel set the attribute childrenAsTrigger to true
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
Instead of using an AsyncPostBackTrigger use a PostBackTrigger.
Usually I register it in the Page_load method.
This is a short example where I've used the dotnet.HighCharts component.
<asp:UpdatePanel ID="updPanel" runat="server">
<ContentTemplate>
<asp:Button ID="btnRefresh" Text="Refresh" OnClick="btnRefresh_Click" runat="server" />
<div>
<asp:Literal ID="chrtMyChart" runat="server"></asp:Literal>
</div>
</ContentTemplate>
</asp:UpdatePanel>
For the call:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.GetCurrent(this).RegisterPostBackControl(btnRefresh);
Render_Chart("%");
}
Render_Chart is the method that generate the chart.
It is called also pressing the button btnRefresh
If you want a complete example try to give a look at this post.
There is no accepted answer so thought of writing the solution I went for so someone else can use it.
Source is http://www.balsamino.com/programming/39-highcharts-dotnet-and-updatepanel-a-complete-solution.html
Basically, in web forms with updatepanels, simply doing litxxx.text = mydontnethighchartsoutput() does not work.
All you have to do is from your dotnethighcharts function, return two things:
1. chart1.ChartContainerHtmlString().ToString
2. chart1.ChartScriptHtmlString().ToString
Put the output from 1. to a ScriptManager.RegisterStartupScript (with last parameter = FALSE saying you do not want a script block added as chart1.ChartContainerHtmlString().ToString will do it for you
Put the output from 2. to your literal like
LitMyLiteral.text = chart1.ChartScriptHtmlString().ToString
Hope that helps :)
At the moment I have no luck trying to get the three of them to work together and i have had only luck with the updatepanel and update progress nothing the confirm button so far.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnEnter" runat="server" Text="Update" Width="180" Style="margin-left:157px;"
OnClick="btnEnter_Click"
CssClass="button-success pure-button"/>
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
TargetControlID="btnEnter"
ConfirmText="Do you want to see submit?"
ConfirmOnFormSubmit="false">
</asp:ConfirmButtonExtender>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="overlay"></div>
<div class="modal">
<h2>Please Wait.....</h2>
<img alt="Loading..." src="/Images/loading.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
I have used the javascript function confirm before this and have taken it out
it was just a onclientclick on the button.
OnClientClick="return confirm('Are you sure you want to submit?');"
but I need to check validation of the page first before asking to submit but I am clueless about it.
here's the behind code atm for the button.
protected void btnEnter_Click(object sender, EventArgs e)
{
if(Page.IsValid )
{
}
}
You could do this even easier and more efficient using client side like this:
you just need to add onclientclick attribute in your <asp:Button ID="btnEnter" control and remove the <asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" from your code.
it would be look like this then :
<asp:Button ID="btnEnter" runat="server" Text="Update"
Width="180" Style="margin-left:157px;"
OnClick="btnEnter_Click"
CssClass="button-success pure-button"
OnClientClick="return confirm('Do you want to see submit?');"/>
and that's it!
So you DO NOT need asp:ConfirmButtonExtender anymore.
UPDATE 1
If you require to check the condition first on the code behind then you could use the code below:
protected void btnEnter_Click(object sender, EventArgs e)
{
if(Page.IsValid )
{
ScriptManager.RegisterStartupScrip(UpdatePanel1, this.GetType(),
"confirm", "return confirm('Are you sure you want to submit?');", true);
}
}
try to Validate your form using jquery then throw the confirmation dialog if the valiation succeeded .
function ValidateForm(){
//validation
if(succeeded){
return confirm('are you sure?');
}else{
return false
}
}
$(document).ready(function(){
$('#' + '<%= btnEnter.ClientID %>').click(function(){
return ValidateForm();
});
});
I have an ASPxPopupControl and an ASPxGridView.
Inside this PopupControl i have my own usercontrol which contains a form for editing person information.
Inside the GridView is a list with different persons.
When i select a different person in the gridview i want the content of the popupcontrol to update for the to the person information of the selected user so i can edit it.
My problem is; i can't get this to work, i have tried placing update panels with all sorts of triggers or forcing the updatepanel to update. But it still doesn't work.
PopupControl:
<dx:ASPxPopupControl ID="pcVolgnummerToevoegen" runat="server" AllowDragging="True" ClientInstanceName="popup_toevoegen" CloseAction="CloseButton" LoadingPanelText="Laden…" Height="700" Width="700" Modal="True" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter">
<ContentCollection>
<dx:PopupControlContentControl ID="pcVolgnummerToevoegenContent" runat="server">
<asp:UpdatePanel ID="upnlToevoegen" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc:GegevensControl ID="ucGegevensControl_Toevoegen" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="KlantVolgnummerGrid" />
</Triggers>
</asp:UpdatePanel>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
DataView Selection_Changed:
protected void KlantVolgnummerGrid_SelectionChanged(object sender, EventArgs e)
{
Session["Person_Id"] = KlantVolgnummerGrid.GetSelectedFieldValues("ID");
}
Page_Load of the usercontrol inside the popup
protected void Page_Load(object sender, EventArgs e)
{
Person varPerson = PersonControllerClient.GetPerson(Session["Person_Id"]);
....Code that fills the form
}
I have checked the SelectionChanged event of the GridView, it triggers. But the update panel doesn't update.
After i refresh the page the person i have selected is shown inside the popup.
Is there anyway i can update the popup for showing the right person without having to refresh the page everytime i select a different person?
Disable a ASPxGridView callback mode to force grid using UpdatePanel callbacks.
Just set the ASPxGridView.EnableCallBack http://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_EnableCallBackstopic property to “false”.
Remove the trigger and add ChildrenAsTriggers="false" on your updatepanel
<asp:UpdatePanel ID="upnlToevoegen" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<uc:GegevensControl ID="ucGegevensControl_Toevoegen" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
code-behind:
protected void KlantVolgnummerGrid_SelectionChanged(object sender, EventArgs e)
{
int id = KlantVolgnummerGrid.GetSelectedFieldValues("ID");
Person varPerson = PersonControllerClient.GetPerson(id);
....Code that fills the form
upnlToevoegen.Update();
}
I am firing an event from an ascx control in order to update some controls in the container to which the ascx control belongs.
The ascx control is displayed via a modal popup extender. When I click a button inside the ascx, I fire an event to which the container containing the ascx control is subscribes.
The event delegate is fired and the expected logic is run in the container's code behind, the problem is that any changes made to controls inside not the container aren't updated despite the event logic having been processed. The expected changes are not reflected on the page when the results of the postback is rendered.
Are there any pitfalls I should know of?
The markup for the container
<asp:Panel ID="panelTreeViewAttributesTitle" runat="server">
<asp:Label ID="someLabel" runat="server" Text="Hello Governor" />
<asp:LinkButton ID="LinkButtonEdit" runat="server" Text="(Edit)" />
<ajax:ModalPopupExtender BackgroundCssClass="modalBackground" Enabled="True"
ID="btnEdit_ModalPopupExtender" PopupControlID="modalPanel" runat="server"
TargetControlID="LinkButtonEdit" />
</asp:Panel>
<asp:Panel ID="modalPanel" runat="server" CssClass="modalPopUp" Style="display: none">
<xxx:customControl runat="server" ID="myCustomControl" />
</asp:Panel>
The code behind for the container
protected void Page_Load(object sender, EventArgs e)
{
myCustomControl.Updated += eventCaptured;
if (IsPostBack) return;
...
}
void eventCaptured(object sender, EventArgs e)
{
someLabel.Text = "Goodbye Governor";
}
The custom control
<script type="text/javascript">
function Update() {
var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
if (ajaxManager != null)
ajaxManager.ajaxRequest("");
}
</script>
<asp:Panel ID="panelEditPanel" runat="server">
<asp:Label ID="lblCMA" runat="server" Text="Call me Arnooold." />
</asp:Panel>
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClientClick="Update()" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
The custom control's code behind
public event EventHandler Updated;
protected void AjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
//Some DB backend logic
UpdateFinished();
}
private void UpdateFinished()
{
if (Updated == null) return;
Updated(this, null);
}
Maybe the button click is causing a partial post back instead of a normal, full-page post back. If this is the case, the entire life cycle would run on the server side (including your event handler) but only part of the HTML would be updated on the client side when the response comes back to the browser. "someLabel" could be outside the region that gets updated on the client side.