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!

File uploading in update panel still refreshing

I search over internet to use upload file in update panel.
I want to avoid page refreshing when i click on file upload.
So i put my codes in update panel with a trigger
but still refreshing ...
Codes :
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:PostBackTrigger ControlID="imageUploadAction" />
</Triggers>
<ContentTemplate>
<div class="fileUpload btn btn-primary btn-block btn-lg">
<span>آپلود</span>
<asp:FileUpload CssClass="inputfile" runat="server" ID="imageUpload" />
</div>
<br />
<div class="alert alert-info" runat="server" id="imageAlert"></div>
<div style="border-bottom: 1px solid #ddd;"></div>
<br />
<asp:Button runat="server" ID="imageUploadAction" CssClass="btn btn-block btn-lg btn-success" Text="ارسال" OnClick="imageUploadAction_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Behind Code :
protected void imageUploadAction_Click(object sender, EventArgs e)
{
Debug.WriteLine("Uploading" + " " + imageUpload.HasFile);
Boolean fileOK = false;
String path = Server.MapPath("~/Assets/image/posts/");
if (imageUpload.HasFile)
{
String fileExtension = System.IO.Path.GetExtension(imageUpload.FileName).ToLower();
String[] allowedExtensions = { ".jpg", ".png" };
for (int i = 0; i < allowedExtensions.Length; i++)
if (fileExtension == allowedExtensions[i])
fileOK = true;
}
if (fileOK)
{
try
{
int last = getLastImage() + 1;
string link = path + last + ".jpg";
imageUpload.PostedFile.SaveAs(link);
db.insertPhoto(link);
imageAlert.InnerText = "فایل آپلود شده است ، کد عکس : " + last;
}
catch (Exception ex)
{
ExceptionUtility.LogExceptionNotFailure(ex);
Debug.WriteLine(ex.ToString());
imageAlert.InnerText = "فایل نمیتواند آپلود شود.";
}
}
else
{
imageAlert.InnerText = "فایل مجاز نیست";
}
}

You're setting up the imageUploadAction button to be a PostBackTrigger (thus not async) which causes a full reload of the page.
Note that there is no way to use a regular uploader using an UpdatePanel. If you really want asynchronous file upload, you'll have to implement quite a bit of code both on the client and the server side.
Take a look at FlowJs here
https://github.com/flowjs/flow.js
with a demo here
http://flowjs.github.io/ng-flow/
Hope that helps

Get HTML Image URL from Slideshow in asp.net

I'm using bootstrap carousel slideshow, and it's dynamically created from code behind. I want to add a button (Delete) to delete the current displayed image in the slide show.
The problem is that when I want to access the Html Image Source (Src) from the SlideShow, it will not accessed(It's empty).
My code looks like this:
Default.aspx
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<triggers>
<asp:PostBackTrigger ControlID="btnDeleteImage" />
</triggers>
<ContentTemplate>
<div class="text-right">
<asp:Button ID="btnDeleteImage" runat="server" Text="X" OnClick="btnDeleteImage_Click"/>
</div>
-
-
-
<!-- Div for Slide images -->
<div class="carousel-inner" id="sliderDiv" runat="server"> </div>
-
-
-
</div>
</ContentTemplate>
</asp:UpdatePanel>
The html controls are dynamically added to the div as shown below:
Default.aspx.cs
protected void CreateSlider(string imgUrl)
{
sliderDiv.Controls.Add(new LiteralControl(#"<div class='item'>"));
sliderDiv.Controls.Add(new LiteralControl(#"<img alt='image' id='imgSlide' src='" + imgUrl + "'>"));
sliderDiv.Controls.Add(new LiteralControl(#"</div>"));
}
Finnally, ButtonDelete code:
protected void btnDeleteImage_Click(object sender, EventArgs e)
{
HtmlImage htmlImage = (HtmlImage)sliderDiv.FindControl("imgSlide");
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "<script>alert('" + htmlImage.Src.ToString() + "');</script>", false);
DeleteImagesFromTemp(htmlImage.Src.ToString());
}
By the way, I also added the postback code in the page Load event.
Any suggestions?

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...

ASP.NET Timer results in an updatepanel gives full postback

I have a quite strange situation where I have the following code:
<asp:Timer ID="GameClock" runat="server" Interval="5000" Enabled="true"
ontick="GameClock_Tick">
</asp:Timer>
<asp:UpdatePanel ID="ItemsUpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<Triggers>
NOTE THE TRIGGER IS COMMENTED OUT
<%--<asp:AsyncPostBackTrigger ControlID="GameClock" EventName="Tick" />--%>
</Triggers>
<ContentTemplate>
<asp:ListView ID="PlayerItems" runat="server" GroupItemCount="7"
onitemdatabound="PlayerItems_ItemDataBound">
<LayoutTemplate>
<table border="1" cellpadding="2" cellspacing="0" runat="server" id="tblProducts">
<tr runat="server" id="groupPlaceholder">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<td id="Td1" runat="server" style="vertical-align:top; text-align:left; height:100%;">
<div>
<div id="category" runat="server">
<asp:Panel ID="ItemPanel" runat="server">
</asp:Panel>
</div>
</div>
</td>
</ItemTemplate>
<GroupTemplate>
<tr runat="server" id="productRow">
<td runat="server" id="itemPlaceholder"></td>
</tr>
</GroupTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
This gives a quite strange result: Every 5s my whole page gives a full postback. When I comment in (activate) the asyncpostbacktrigger, the updatepanel does not give a full postback.
In the PlayerItems_ItemDataBound I have the following code (which, I do think, do not matter):
protected void PlayerItems_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
ListViewDataItem dataItem = e.Item as ListViewDataItem;
if (dataItem != null)
{
BaseItem myItem = dataItem.DataItem as BaseItem;
Panel itemPanel = new Panel();
Literal firstLiteral = new Literal();
firstLiteral.Text += "<div id='smoothmenu1' class='ddsmoothmenu'>";
firstLiteral.Text += "<ul>";
firstLiteral.Text += "<li><img src='Images/Game/Items/" + myItem.ItemImageUrl + "' />";
firstLiteral.Text += "<ul>";
// Add all events bound to item into contextmenu
itemPanel.Controls.Add(firstLiteral);
foreach (Delegate del in myItem.Actions.Items)
{
Literal firstItLit = new Literal();
firstItLit.Text += "<li>";
itemPanel.Controls.Add(firstItLit);
MethodInfo methodInfo = del.Method;
string commandName = myItem.ItemId + "|" + methodInfo.Name;
LinkButton btn = new LinkButton();
btn.Text = methodInfo.Name;
btn.Click += new EventHandler(btn_Click);
btn.CommandName = commandName;
itemPanel.Controls.Add(btn);
Literal secondItLit = new Literal();
secondItLit.Text += "</li>";
itemPanel.Controls.Add(secondItLit);
}
Literal btnLiteral = new Literal();
btnLiteral.Text += "</ul>";
btnLiteral.Text += "</li>";
btnLiteral.Text += "</ul>";
btnLiteral.Text += "</div>";
itemPanel.Controls.Add(btnLiteral);
Panel panel = (Panel)(e.Item.FindControl("ItemPanel"));
panel.Controls.Add(itemPanel);
}
}
}
When I create a NEW updatepanel, ItemsUpdatePanel1, it does not fire a full postback without the timer.
I can even start copying items from ItemsUpdatePanel to ItemsUpdatePanel1, and suddenly the full postbacks happen. I tried 2 seperate times, and they started happening at different times!!!
Could anyone please enlighten me? I simply want the UpdatePanel NOT to give a full postback, even without a timer.
Thanks!:)

I found the solution (or, I asked on ASP.NET and found it):
http://forums.asp.net/p/1644391/4262140.aspx#4262140
The wrapping solution worked really good.

Was this project upgraded from ASP.NET 1.1? If so, check your web.config file and remove the xhtmlConformance tag from it. I forget all the specifics, but having that tag in your web.config will cause that to happen, and is there by default in .NET 1.1 web applications.