We Keep Coding

on using ajax, asp.net button control click event not working

I am using Ajax with asp.net C#. What I am trying to do is, on click of a link, a div should appear. A div contains file upload controls and a button named 'Upload Files'. When upload files button is clicked, it is checking if any of the file upload controls has files. If yes, it uploads files to some directory and updates a label to show how many files are uploaded 0 or more. Here is the screenshot to explain:
Here's the code snippet, I am using Ajax with asp.net C#
<div class="form-group row">
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<ContentTemplate>
<div class="col-xs-5">
<% if (Session["MemberID"]!= null)
{%>
<asp:LinkButton ID="insertMore" runat="server" OnClick="insertMoreclicked">(Insert More Attachments)</asp:LinkButton>
<%} %>
</div><br />
<div id="moreUploadsDiv" runat="server" visible="false">
<br />
<asp:FileUpload ID="moreUpload1" runat="server" />
<asp:FileUpload ID="moreUpload2" runat="server" />
<asp:FileUpload ID="moreUpload3" runat="server" />
<asp:FileUpload ID="moreUpload4" runat="server" />
<asp:Button ID="uploadMoreFilesBtn" runat="server" Text="Upload" OnClick ="uploadMoreClicked" CausesValidation="false" />
<br />
<asp:Label ID="uploadInfoLbl" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
Here's the code behind file event for button:
protected void uploadMoreClicked(object sender, EventArgs e)
{
int countFiles = 0;
if (moreUpload1.HasFile)
{
moreUpload1.PostedFile.SaveAs(Server.MapPath("/Upload/") + moreUpload1.FileName);
string fn2 = moreUpload1.FileName;
bool status2 = blReg.insertFiles(fn2, FileID);
countFiles++;
}
if (moreUpload2.HasFile)
{
moreUpload2.PostedFile.SaveAs(Server.MapPath("/Upload/") + moreUpload2.FileName);
string fn2 = moreUpload2.FileName;
bool status2 = blReg.insertFiles(fn2, FileID);
countFiles++;
}
if (moreUpload3.HasFile)
{
moreUpload3.PostedFile.SaveAs(Server.MapPath("/Upload/") + moreUpload3.FileName);
string fn2 = moreUpload3.FileName;
bool status2 = blReg.insertFiles(fn2, FileID);
countFiles++;
}
if (moreUpload4.HasFile)
{
moreUpload4.PostedFile.SaveAs(Server.MapPath("/Upload/") + moreUpload4.FileName);
string fn2 = moreUpload4.FileName;
bool status2 = blReg.insertFiles(fn2, FileID);
countFiles++;
}
uploadInfoLbl.Text = countFiles + " file(s) uploaded<br/>";
}
But button click event doesn't work. Please suggest me what i am doing wrong. Thanks in Advance!

Button in UpdatePanel triggers event, but the page doesn't update

Here's the markup:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="well well-large">
<form class="navbar-form pull-left">
<asp:FileUpload ID="test" runat="server" CssClass="input-small" />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="btn" OnClick="btnUpload_Click" />
</form>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpload" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Panel runat="server" ID="panAlert" Visible="false">
<div class="alert alert-success" id="divAlert" runat="server">
<button id="Button1" runat="server" type="button" class="close" data-dismiss="alert">×</button>
You shouldn't see this message!
</div>
<asp:Panel runat="server" ID="panMarquee" Visible="true">
<div id="Div1" runat="server" class="progress progress-success progress-striped">
<div id="ProgressBar" runat="server" class="bar" style="width: 100%"></div>
</div>
</asp:Panel>
</asp:Panel>
When the btnUpload button is clicked, the server code is supposed to determine if the FileUpload control has a file. If it does, it will change the visibility of the Panel control to true. It works fine outside of the UpdatePanel.
Here's the server code:
protected void btnUpload_Click(object sender, EventArgs e)
{
this.SetMessage(Message.Success);
try
{
if (this.test.HasFile)
{
string filename = Path.GetFileName(GetUB04Doc.FileName);
//test.SaveAs(Server.MapPath("~/") + filename);
this.SetMessage(Message.Success);
}
}
catch (Exception ex)
{
//TODO: Do something with th exception
this.SetMessage(Message.Fail);
}
finally
{
//this.GetUB04Doc.Dispose();
}
}
private enum Message { Success, Fail }
private void SetMessage(Message msg)
{
if (msg == Message.Success)
{
this.divAlert.InnerText = "Well done! The document appears to have uploaded successfully. Please wait...";
this.divAlert.Attributes.Add("class", "alert alert-success");
}
else
{
this.divAlert.InnerText = "Oh snap! Something broke. Please contact IT right away.";
this.divAlert.Attributes.Add("class", "alert alert-error");
}
this.panAlert.Visible = true;
}
I tried putting the Panel in the ContentTemplate section as well, but the results were the same.
Any ideas on what I'm doing wrong here?

You should surround the area which you are modifying from an async postback in another UpdatePanel with UpdateMode is set to Conditional. Then update the other manually from codebehind:
<asp:UpdatePanel ID="panAlertUpdatePanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="panAlert" Visible="false">
<!-- ....
codebehind:
// ...
this.panAlert.Visible = true;
panAlertUpdatePanel.Update()
Side-note: As #Belogix has already commented, you should use an AsyncFileUpload control in an UpdatePanel since a regular FileUpload control it's not supported with an asynchronous postback.
MSDN:
Controls that Are Not Compatible with UpdatePanel Controls:
...
FileUpload and HtmlInputFile controls when they are used to upload files as part of an asynchronous postback.
...
To use a FileUpload or HtmlInputFile control inside an UpdatePanel
control, set the postback control that submits the file to be a
PostBackTrigger control for the panel. The FileUpload and
HtmlInputFile control can be used only in postback scenarios.

you need to put PostBackTrigger instead of AsyncPostBackTrigger like this. <asp:PostBackTrigger ControlID="btnUpload" />

TextChanged event does not fire when 2nd modification equals the original value

I have a _TextChanged event which works properly except in a specific circumstance which can be replicated as follows:
User modifies text (event fires correctly)
User modifies text again to match the original value (event doesn't fire)
I can get the _TextChanged event to work on my development box by turning on Viewstate for the update panel on the ascx page, but when I move it to the server I get an error that the viewstate failed if I switch user controls and then switch back to that page. The controls which go inside the update panel are build dynamically in code behind and are rebuilt with each postback -- this works for every other postback so I don't think the issue is with the controls.
Additionally, turning on viewstate makes the page run dreadfully slow anyway, so this would not be an ideal fix.
Finally, the _TextChanged event works for all changes except when reverting back to the original value.
Can anyone tell me why the event doesn't fire in that specific circumstance, and how to address the problem?
Text box creation in code behind:
TextBox annualHoursTextBox = new TextBox();
annualHoursTextBox.ID = string.Format("bundle{0}_annualHoursTextBox{1}", bundle.BundleNbr, parentItem.LaborItemNbr);
annualHoursTextBox.CssClass = "";
annualHoursTextBox.Columns = 4;
annualHoursTextBox.Text = childItem == null ? string.Empty : childItem.FTEHours.ToString("F0");
annualHoursTextBox.AutoPostBack = true;
annualHoursTextBox.TextChanged += new EventHandler(annualHoursTextBox_TextChanged);
AsyncPostBackTrigger AHtrigger = new AsyncPostBackTrigger();
AHtrigger.ControlID = annualHoursTextBox.UniqueID;
AHtrigger.EventName = "TextChanged";
upPricingSheet.Triggers.Add(AHtrigger);
//snip
//add some attributes for reference on the events
annualHoursTextBox.Attributes["othercontrol"] = tasksPerYearTextBox.UniqueID;
annualHoursTextBox.Attributes["nextcontrol"] = benefitsTextBox.UniqueID;
annualHoursTextBox.Attributes["targetTBcontrol"] = taskTimeTextBox.UniqueID;
annualHoursTextBox.Attributes["targetDDLcontrol"] = taskTimeUOMDropDown.UniqueID;
Event Handler:
protected void annualHoursTextBox_TextChanged(object sender, EventArgs e)
{
TextBox ah = sender as TextBox;
TextBox other = Page.FindControl(ah.Attributes["othercontrol"]) as TextBox;
if ((!String.IsNullOrEmpty(ah.Text)) && (!String.IsNullOrEmpty(other.Text)))
{
TextBox next = Page.FindControl(ah.Attributes["nextcontrol"]) as TextBox;
TextBox targetTB = Page.FindControl(ah.Attributes["targetTBcontrol"]) as TextBox;
DropDownList ddl = Page.FindControl(ah.Attributes["targetDDLcontrol"]) as DropDownList;
Double TasksPerSecond;
TasksPerSecond = CalculateTimePerTask(ah.Text, other.Text);
string TimeUnit;
double Time;
if (TasksPerSecond < 60)
{
TimeUnit = "Seconds";
Time = TasksPerSecond;
}
else if (TasksPerSecond < 3600)
{
TimeUnit = "Minutes";
Time = (TasksPerSecond / 60);
}
else
{
TimeUnit = "Hours";
Time = (TasksPerSecond / 60 / 60);
}
//Enter the time in the appropriate textbox
targetTB.Text = Time.ToString("F2");
//select the appropriate item from the ddl
ListItem i = ddl.Items.FindByText(TimeUnit);
if (i != null)
{
ddl.SelectedItem.Selected = false;
i.Selected = true;
}
}
}
ASPX Page:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Solution.aspx.cs" Inherits="Solution" %>
<%# Register Src="fragments/solutionRecommended.ascx" TagName="solutionRecommended"
TagPrefix="uc1" %>
<%# Register Src="fragments/solutionPricingSheet.ascx" TagName="solutionPricingSheet"
TagPrefix="uc2" %>
<%# Register Src="fragments/solutionSuggested.ascx" TagName="solutionSuggested" TagPrefix="uc3" %>
<%# Register Src="fragments/solutionSummary.ascx" TagName="solutionSummary" TagPrefix="uc4" %>
<%# Register Src="fragments/ucItemFilterSearch.ascx" TagName="ucItemFilterSearch"
TagPrefix="uc5" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
function addItemToBundle(postUrl, redirectUrl) {
$.post(postUrl);
window.location = redirectUrl;
// window.location = url;
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:HiddenField ID="hfStepNbr" runat="server" />
<asp:Panel ID="pnlStepMessage" runat="server" Visible="false" CssClass="padding10">
<h3 class="placeholder">
<asp:Label ID="lblMessage" runat="server" /></h3>
</asp:Panel>
<div class='elev8form' id="mainDiv" runat="server">
<h3 class='header'>
Solutions</h3>
<div id="tabs">
<div class='tab'>
<asp:LinkButton ID="lbSuggested" runat="server" Text="Select Items" data-step="1"
OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
</div>
<div class='tab'>
<asp:LinkButton ID="lbPricing" runat="server" Text="Pricing Worksheet" data-step="2"
OnClick="lbTab_Click" ></asp:LinkButton>
</div>
<div class='tab'>
<asp:LinkButton ID="lbRecommendedSolutions" runat="server" Text="Recommended Solutions"
data-step="3" OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
</div>
<div class='tab'>
<asp:LinkButton ID="lbSummary" runat="server" Text="Solutions Summary" data-step="4"
OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
</div>
</div>
<div id="solutions-body">
<asp:MultiView ID="mltSolution" runat="server">
<asp:View ID="viewSuggested" runat="server">
<uc3:solutionSuggested ID="solutionSuggested1" runat="server" RedirectUrl="~/portal/elev8/solution.aspx" />
</asp:View>
<asp:View ID="viewPricing" runat="server">
<uc2:solutionPricingSheet ID="solutionPricingSheet1" runat="server" />
</asp:View>
<asp:View ID="viewRecommended" runat="server">
<uc1:solutionRecommended ID="solutionRecommended1" runat="server" />
</asp:View>
<asp:View ID="viewSummary" runat="server">
<p style="font-size: 14px;">
Text here
</p>
<uc4:solutionSummary ID="solutionSummary1" runat="server" />
</asp:View>
</asp:MultiView>
</div>
</div>
<script type="text/javascript">
function pageLoad() {
$(function () {
var maxChannelHeight;
var items = $('.channel');
for (var counter = 0; counter < items.length; counter++) {
var channel = items[counter];
var channelHeight = $(channel).height();
maxChannelHeight = maxChannelHeight > channelHeight ? maxChannelHeight : channelHeight;
}
$('.channel').height(maxChannelHeight);
$("#priceing-sheet-save-button *").click(function () {
window.scrollTo(0, 0);
});
});
}
</script>
ASCX Page:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="solutionPricingSheet.ascx.cs"
Inherits="solutionPricingSheet" %>
<asp:UpdateProgress ID="upProgressRecSolution" runat='server' AssociatedUpdatePanelID="upPricingSheet">
<ProgressTemplate>
<div style="position: absolute; z-index: 2000; left: 45%; display: inline; width: 100px;"
class="elev8form">
<asp:Image ID="Image1" runat='server' ImageUrl="~/portal/img/ajax-loader-big.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div id="pricing-sheet-wrapper">
<p class='left'>
More text</p>
<asp:Panel ID="pnlSaveMessage" runat="server" Visible="false" CssClass="save-message">
<span>Item prices saved</span>
</asp:Panel>
<div class='export'>
<span class='bigbutton'>
<asp:LinkButton ID="btnExport" runat='server' Text="Export to Excel" OnClick="btnExport_Click" />
</span>
</div>
<asp:UpdatePanel ID="upPricingSheet" runat="server" UpdateMode="Conditional" ViewStateMode="Disabled">
<ContentTemplate>
<div id="pricing-sheet">
<asp:PlaceHolder ID="phContent" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="opportunityPlaceHolder" runat="server" />
<div class='save export'>
<div>
<div id="pageValidationError" class="validationMessage">
* Changes not saved. Review all entries for validation messages. Required fields marked with an asterisk.
</div>
</div>
<%--<asp:HiddenField ID="hf" runat="server" value="0" />--%>
<center>
<span id="priceing-sheet-save-button">
<asp:Button ID="btnSave" runat="server" Text="Save All Prices" SkinID="redbutton"
OnClick="btnSave_Click" CausesValidation="true" />
</span>
</center>
</div>
</div>
<script type="text/javascript">
function pageLoad() {
$("#tabs .tab a").click(function () {
$("#<%= btnSave.ClientID%>").click();
});
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.validationMessage').hide();
$('#<%= btnSave.ClientID %>').click(function () {
if (Page_IsValid == false) {
$('.validationMessage').show();
return false;
}
});
$('input[type=text]').blur(function () {
if (Page_IsValid == false) {
$('.validationMessage').show();
return false;
}
else {
$('.validationMessage').hide();
}
})
});

That is the intended behavior - the event is called OnTextChanged (different from original) not OnTextTyped (any text entered), for that you would have to handle this event (which triggers even if nothing at all is entered):
OnBlur="__doPostBack(this.id, '');"
UPDATE: its pretty simple actually, since you are using ajax, your textbox's .defaultValue is not changing between postbacks, only the .value is - so either use OnBlur as I told you, or on every postback change the .defaultValue to .value in javascript: http://www.w3schools.com/jsref/prop_text_defaultvalue.asp
or just place the textbox in the UpdatePanel, and it will take care of it self on its own...
UPDATE 2: First off, nowhere in your code is the textbox shown to be inside an `UpdatePanel', and secondly, you have 3 choices:
a) For OnBlur method to work, remove AutoPostBack property (it is the client side OnChange event), but keep the OnTextChanged event (it is server side).
b) For ViewState method to work, set ViewStateMode="Enabled" on the textbox, and make sure you are using ViewStateMode="Disabled" on its containers - and not EnableViewState="False".
c) javascript .defaultValue method...

Updating the master page when the control is within an update panel on the content page

I have an application which has a control within a update panel but needs to update a part of the master page aswel - i m not sure if this can be done?
The
<asp:ScriptManager ID="ScriptManager" runat="server" />
is within the master page
and the part of the master page i want to update is the following:
<div id="divPanelMyCover" class="divPanelMyCover" runat="server">
<div class="sectionYourProtection">
<div class="sectionPadding">
<h4>Title</h4>
</div>
<div class="innerPanelMyCover">
<br/>
<ul class="bulletList" type="square">
<li><span class="spBold">Monthly Payment: </span><asp:Label ID="lblMonthlyPayment" runat="server" Text=""></asp:Label </div>
</div>
</div>
code behind:
lblMonthlyPayment.Text = Convert.ToString(application.Premium);
The lblMonthlyPayment needs to change depending on what the user selects on a content page but as the control is within an update panel it is not working.
Content page:
<asp:UpdatePanel ID="upUpSell" runat="server">
<ContentTemplate>
<div id ="divSlider" runat="server" visible="false">
<br />
<h3>If you want, you can change the amount ... </h3>
<hr />
<div class="sliderContainer">
<telerik:RadSlider id ="rdSlider" AutoPostBack="true" runat="server" Orientation="Horizontal" Width="450"
Height="70" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="BottomRight"
ItemType="Tick" IsSelectionRangeEnabled="false" SelectionStart="10" SelectionEnd="30" Skin="Default" DragText="Select Premium" >
</telerik:RadSlider>
</div>
<asp:Label ID="lblValue" runat="server" Text="" Visible="false"></asp:Label>
</div>
c#
protected void Page_Load(object sender, EventArgs e)
{
//if (!Page.IsPostBack)
//Pre-populate the screen with data from ApplicationBO
ApplicationBO application = (ApplicationBO)Session["Application"];
if (!Page.IsPostBack)
{
if (Session["Application"] == null)
application = new ApplicationBO();
else
application = (ApplicationBO)Session["Application"];
lblclientName.Text = application.FirstName;
rdSlider.Value = Convert.ToDecimal(application.Premium);
lblMonthlyPayment.Text = Convert.ToString(application.Premium);
}
divSlider.Visible = true;
string upsellValue = Convert.ToString(application.Premium);
if (divSlider.Visible == true)
{
upsellValue = Convert.ToString(rdSlider.Value);
// Save the current page information
application.Premium = Convert.ToDecimal(upsellValue);
}
Thanks in advance...

Wrap the label with an UpdatePanel with UpdateMode="Always"

Using Ajax in 2 nested user controls

Here's the problem:
I have a control (A) that I register/load into another control (B). then I register control (B) into a normal .aspx page
I put a 'Script Manager' in this page and I use ajax 'Update Panel' in both controls but only the main components of the control (B) works (excluding the control (A) which I registered into control (B)) .. so basically the ajax part works for the component that's loaded into a page. if it's loaded into another control it won't work!
I wanted to make sure that it's not a silly mistake in my code so I copied the code of the control that's not working and added it to a normal page and it worked!
so what do you think the problem is or can I do about it !?
EDIT Some Code
Control (B) :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Itinerary.ascx.cs" Inherits="OTV.controls.Itinerary.ItineraryControl" %>
<p>
Add new itinerary:</p>
<p>
<br />
</p>
<div id="newItinerary_div" runat="server">
<p>
Title:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Description:
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
Visible:
<asp:CheckBox ID="CheckBox1" runat="server" />
<div id="itineraryDays_div" runat="server">
<h4>Itinerary days:</h4>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="DaysHolder" runat="server"></asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="addMoreDay_btn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="addMoreDay_btn" runat="server" Text="Add one more day"
onclick="addMoreDay_btn_Click" />
This button dynamically create itineraryDay controller to the div
</div>
</div>
</div>
Control (B) - Code Behind File:
public partial class ItineraryControl: System.Web.UI.UserControl
{
static int DaysCount = 1;
static List<Control> _daysList;
protected void addMoreDay_btn_Click(object sender, EventArgs e)
{
}
public static Control GetPostBackControl(Page thePage)
{
Control myControl = null;
string ctrlName = thePage.Request.Params.Get("__EVENTTARGET");
if (((ctrlName != null) & (ctrlName != string.Empty)))
{
myControl = thePage.FindControl(ctrlName);
}
else
{
foreach (string Item in thePage.Request.Form)
{
Control c = thePage.FindControl(Item);
if (((c) is System.Web.UI.WebControls.Button))
{
myControl = c;
}
}
}
return myControl;
}
protected void Page_Init(object sender, EventArgs e)
{
Control myControl = GetPostBackControl(this.Page);
if ((myControl != null))
{
if ((myControl.ClientID.ToString() == "addMoreDay_btn"))
{
DaysCount = DaysCount + 1;
}
}
_daysList = new List<Control>();
for (int i = 1; i <= DaysCount; i++)
{
Control OneMoreDay = LoadControl("~/controls/Itinerary/ItineraryDayAdd.ascx");
OneMoreDay.ID = "dayNo" + i;
(OneMoreDay.FindControl("DayNum_TxtBx") as TextBox).Text = i.ToString();
DaysHolder.Controls.Add(OneMoreDay);
_daysList.Add(OneMoreDay);
}
}
}
}
Control (A) :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ItineraryDayAdd.ascx.cs" Inherits="OnlineTravelAgency1.controls.Itinerary.ItineraryDayAdd" %>
<p>
Day#:
<asp:TextBox ID="DayNum_TxtBx" runat="server"></asp:TextBox>
</p>
<p>
Title:
<asp:TextBox ID="Title_TxtBx" runat="server"></asp:TextBox>
</p>
<p>
Day:
<asp:DropDownList ID="Days_DrpDwnLst" runat="server">
<asp:ListItem Value="0">Saturday</asp:ListItem>
<asp:ListItem Value="1">Sunday</asp:ListItem>
<asp:ListItem Value="2">Monday</asp:ListItem>
<asp:ListItem Value="3">Tuesday</asp:ListItem>
<asp:ListItem Value="4">Wednesday</asp:ListItem>
<asp:ListItem Value="5">Thursday</asp:ListItem>
<asp:ListItem Value="6">Friday</asp:ListItem>
</asp:DropDownList>
</p>
<p>
Description:
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
</p>
...This is my whole code! I'm really stuck and I didn't want to overwhelm you with my code but I can't help you enough to understand my problem