Reputation: 53
I'm trying to do a simple page that does some calculations and displays it nicely on a page. I want the calculations to be hidden so I've decided to do all of the math in the code-behind on the server. But I don't need the whole page to re-fresh when I click the "Calculate" button. So I'm trying to use the UpdatePanel to just change the table content (Header and footer should stay the same).
BUT whenever I click the "Calculate"/"Reset" buttons the whole page flashes as if it's doing a full postback.
I first tried having 2 UpdatePanels around the 2 tables that actually have values to be updated (each with their AsyncPostBackTriggers) and the Buttons outside of any UpdatePanel, but that had the same result of the whole page being posted. So I thought I would simplify it to this current page of being in a single UpdatePanel.
I've also tried copying the code from the microsoft example into my page (with the code below still on the page, AND with only my header and footer) and their UpdatePanel also causes the whole page to do a postback (https://msdn.microsoft.com/en-us/library/bb399001.aspx). I've checked my web.config and it is setup to use AJAX.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pricing.aspx.cs" Inherits="Sales.Pricing" EnableEventValidation="false" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="uc1" TagName="ServicesHeader" Src="/ClientServices/userControls/ServicesHeader.ascx" %>
<%@ Register TagPrefix="uc2" TagName="ServicesFooter" Src="/ClientServices/userControls/ServicesFooter.ascx" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%--<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>--%>
<!DOCTYPE HTML>
<html>
<head id="HEAD1" runat="server">
<link id="linkStyles" href="/ClientServices/Style.css" type="text/css" rel="stylesheet" />
<title>Pricing</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" />
<meta content="C#" name="CODE_LANGUAGE" />
<meta content="JavaScript" name="vs_defaultClientScript" />
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema" />
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onunload="javascript: closeWindow()">
<uc1:ServicesHeader ID="ServicesHeader1" runat="server"></uc1:ServicesHeader>
<form id="form2" runat="server">
<asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="resetButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="calculateButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr class="tablePageHeading">
<td class="tablePageHeading" colspan="3">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr class="tablePageHeading">
<td class="cellPageHeading">
<b> Pricing</b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<th></th>
<th></th>
<th style="background-color:Black; color:White; font-weight: bold; font-size: 10pt; font-family: arial; height: 25px;">Typical Bundles</th>
</tr>
<tr>
<td>
<table class="pre tablePricingInput" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td>Contract Term:</td>
<td><asp:TextBox id="contractTerm" title="Contract Term" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
value="3" size="3" runat="server"/></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr>
<td>Bundled Hours/Mo:</td>
<td><asp:TextBox id="bundledHoursPerMonth" title="Bundled Hours/Mo" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
value="8" size="3" runat="server"/></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr>
<td>App Dev Bundled Hours:</td>
<td><asp:TextBox id="appDevBundledHours" title="App Dev Bundled Hours" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
value="0" size="3" runat="server"/></td>
</tr>
<tr>
<td>Annual Tuning Cycles:</td>
<td><asp:TextBox id="annualTuningCycles" title="Annual Tuning Cycles" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
value="0" size="3" runat="server"/></td>
</tr>
</table>
</td>
<td>
<table class="pre tablePricing" cellspacing="0" cellpadding="0" width="100%" border="0" runat="server">
<col style="width:33%" span="3" />
<tr class ="tableTitle2">
<th>Other Nomenclature</th>
<th>Nomenclature</th>
<th>Ala Cart (Annual)</th>
</tr>
<tr class="evenRow">
<td>Incident Management</td>
<td>24/7 Hotline</td>
<td><%=hlBase.ToString("C2")%></td>
</tr>
<tr>
<td>Patch Management</td>
<td>Prevenative</td>
<td><%=prevenativeBase.ToString("C2")%></td>
</tr>
<tr class="evenRow">
<td>Monitoring</td>
<td>Alerting</td>
<td><%=monitoringBase.ToString("C2")%></td>
</tr>
<tr>
<td>First Call (Other)</td>
<td>First Call (Other)</td>
<td>Included</td>
</tr>
<tr class="evenRow">
<td>MACs</td>
<td>MACs</td>
<td><%=macValue.ToString("C2")%></td>
</tr>
<tr>
<td>Optimization Support</td>
<td>Forward Planning</td>
<td><%=planningBase.ToString("C2")%></td>
</tr>
<tr class="evenRow">
<td>Assigned TAM</td>
<td>Assigned TAM</td>
<td><%=tamBase.ToString("C2")%></td>
</tr>
<tr>
<td>New App Dev</td>
<td>Peak Demand Staffing</td>
<td><%if (appDevValue == 0){%>$ -<%}else{%><%=appDevValue.ToString("C2")%><%}%></td>
</tr>
<tr class="evenRow">
<td>Tuning Cycles</td>
<td>Tuning Cycles</td>
<td><%if (tuningValue == 0) {%>$ -<%} else {%><%=tuningValue.ToString("C2")%><%}%></td>
</tr>
</table>
</td>
<td>
<table class="pre tableBundles" cellspacing="0" cellpadding="0" width="100%" border="0">
<col style="width:20%; border: 1px solid black;" span="5" />
<tr class ="tableTitle2">
<th>App Support</th>
<th>Bridge (operational)</th>
<th>Bridge (MAC)</th>
<th>TT</th>
<th>ASR</th>
</tr>
<tr class="evenRow">
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td></td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
<tr class="evenRow">
<td></td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr class="evenRow">
<td></td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
<tr class="evenRow">
<td></td>
<td></td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
<tr class="evenRow">
<td></td>
<td></td>
<td></td>
<td></td>
<td>X</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="resetButton" onClick="Reset" runat="server" Text="Reset" CssClass="input-button"/>
<asp:Button ID="calculateButton" onClick="Calculate" runat="server" Text="Calculate" CssClass="input-button"/>
</td>
<td>
<table class="pre tablePricing" cellspacing="0" cellpadding="0" width="100%" border="0">
<col style="width:33%; border: 1px solid black;" span="3" />
<tr>
<td>Low Complexity</td>
<td>Low Complexity</td>
<td></td>
</tr>
<tr class="evenRow">
<td align="right" style="font-size:10px; color:Gray;">Other Markup Low</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Medium Complexity</td>
<td>Medium Complexity</td>
<td></td>
</tr>
<tr class="evenRow" style="font-size:10px; color:Gray;">
<td align="right">Other Markup Medium</td>
<td></td>
<td></td>
</tr>
<tr>
<td>High Complexity</td>
<td>High Complexity</td>
<td></td>
</tr>
<tr class="evenRow" style="font-size:10px; color:Gray;">
<td align="right">Other Markup High</td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td>
<table class="pre tableBundles" cellspacing="0" cellpadding="0" width="100%" border="0" runat="server">
<col style="width:20%; border: 1px solid black;" span="5" />
<tr>
<td><%=appLowComplexityValue.ToString("C2")%></td>
<td><%=bridgeLowComplexityValue.ToString("C2")%></td>
<td><%=macLowComplexityValue.ToString("C2")%></td>
<td><%=ttLowComplexityValue.ToString("C2")%></td>
<td><%=asrLowComplexityValue.ToString("C2")%></td>
</tr>
<tr class="evenRow" style="font-size:10px; color:Gray;">
<td><%=appLowOtherMarkupValue.ToString("C2")%></td>
<td><%=bridgeLowOtherMarkupValue.ToString("C2")%></td>
<td><%=macLowOtherMarkupValue.ToString("C2")%></td>
<td><%=ttLowOtherMarkupValue.ToString("C2")%></td>
<td><%=asrLowOtherMarkupValue.ToString("C2")%></td>
</tr>
<tr style="font-weight:bolder;">
<td><%=appMediumComplexityValue.ToString("C2")%></td>
<td><%=bridgeMediumComplexityValue.ToString("C2")%></td>
<td><%=macMediumComplexityValue.ToString("C2")%></td>
<td><%=ttMediumComplexityValue.ToString("C2")%></td>
<td><%=asrMediumComplexityValue.ToString("C2")%></td>
</tr>
<tr class="evenRow" style="font-size:10px; color:Gray;">
<td><%=appMediumOtherMarkupValue.ToString("C2")%></td>
<td><%=bridgeMediumOtherMarkupValue.ToString("C2")%></td>
<td><%=macMediumOtherMarkupValue.ToString("C2")%></td>
<td><%=ttMediumOtherMarkupValue.ToString("C2")%></td>
<td><%=asrMediumOtherMarkupValue.ToString("C2")%></td>
</tr>
<tr>
<td><%=appHighComplexityValue.ToString("C2")%></td>
<td><%=bridgeHighComplexityValue.ToString("C2")%></td>
<td><%=macHighComplexityValue.ToString("C2")%></td>
<td><%=ttHighComplexityValue.ToString("C2")%></td>
<td><%=asrHighComplexityValue.ToString("C2")%></td>
</tr>
<tr class="evenRow" style="font-size:10px; color:Gray;">
<td><%=appHighOtherMakrupValue.ToString("C2")%></td>
<td><%=bridgeHighOtherMakrupValue.ToString("C2")%></td>
<td><%=macHighOtherMakrupValue.ToString("C2")%></td>
<td><%=ttHighOtherMakrupValue.ToString("C2")%></td>
<td><%=asrHighOtherMakrupValue.ToString("C2")%></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<uc2:ServicesFooter ID="ServicesFooter1" runat="server"></uc2:ServicesFooter>
</body>
</html>
Codebehind
protected void Calculate(object sender, EventArgs e)
{
if(!Int32.TryParse(contractTerm.Text, out contractTermInt))
{
//Error
}
if (!Int32.TryParse(bundledHoursPerMonth.Text, out bundledHoursPerMonthInt))
{
//Error
}
if (!Int32.TryParse(appDevBundledHours.Text, out appDevBundledHoursInt))
{
//Error
}
if (!Int32.TryParse(annualTuningCycles.Text, out annualTuningCyclesInt))
{
//Error
}
UpdateValues();
}
protected void Reset(object sender, EventArgs e)
{
contractTermInt = 3;
bundledHoursPerMonthInt = 8;
appDevBundledHoursInt = 0;
annualTuningCyclesInt = 0;
contractTerm.Text = "3";
bundledHoursPerMonth.Text = "8";
appDevBundledHours.Text = "0";
annualTuningCycles.Text = "0";
UpdateValues();
}
UpdateValues() just calculates the ______Value variables to be displayed on the web page.
Here is my attempt to simplify the page to the Microsoft example (it still flashes the whole page as if it's a full postback):
<%@ Page Language="C#" CodeFile="Pricing.aspx.cs" Inherits="Sales.Pricing" %>
<%@ Register TagPrefix="uc1" TagName="ServicesHeader" Src="/ClientServices/userControls/ServicesHeader.ascx" %>
<%@ Register TagPrefix="uc2" TagName="ServicesFooter" Src="/ClientServices/userControls/ServicesFooter.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head />
<body>
<uc1:ServicesHeader ID="ServicesHeader1" runat="server"></uc1:ServicesHeader>
<form id="form2" runat="server">
<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" /></div>
</form>
<uc2:ServicesFooter ID="ServicesFooter1" runat="server"></uc2:ServicesFooter>
</body>
</html>
Codebehind
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Refreshed at " + DateTime.Now.ToString();
}
Upvotes: 0
Views: 5274
Reputation: 101
Use this
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="resetButton" />
<asp:AsyncPostBackTrigger ControlID="calculateButton" />
</Triggers>
in place of
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="resetButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="calculateButton" EventName="Click" />
</Triggers>
Upvotes: 1