Problem:

Last week I came across this bug (?) with AsyncFileUpload control in updatepanel. The control is not firing OnUploadedComplete server side event when it’s in updatepanel.

Solution:

After doing some research on this issue, came across these solutions.

1)     Add another AsyncFileUpload control on the page and set its’ style to display:none; 

<div style="display: none;">

  <cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" />

</div>

2)     Another workaround is to add the following attributes to the <form> tag of the page..

enctype="multipart/form-data" method="post"

Both the solutions are working fine.

Thanks to obout_teo and MikeMelendez of Asp.Net forums

How to capture logoff time when user closes browser?

Or

How to end user session when browser closed?

These are some of the frequently asked questions in asp.net forums.

In this post I'll show you how to do this when you're building an ASP.NET web application.

Before we start, one fact:

There is no full-proof technique to catch the browser close event for 100% of time. The trouble lies in the stateless nature of HTTP. The Web server is out of the picture as soon as it finishes sending the page content to the client. After that, all you can rely on is a client side script. Unfortunately, there is no reliable client side event for browser close.

Solution:

The first thing you need to do is create the web service. I've added web service and named it AsynchronousSave.asmx. 

Make this web service accessible from Script, by setting class qualified with the ScriptServiceAttribute attribute... 

Add a method (SaveLogOffTime) marked with [WebMethod] attribute. This method simply accepts UserId as a string variable and writes that value and logoff time to text file. But you can pass as many variables as required. You can then use this information for many purposes.

To end user session, you can just call Session.Abandon() in the above web method.

To enable web service to be called from page’s client side code, add script manager to page. Here i am adding to SessionTest.aspx page

When the user closes the browser, onbeforeunload event fires on the client side. Our final step is adding a java script function to that event, which makes web service calls. The code is simple but effective

My Code

HTML:( SessionTest.aspx )

C#:( SessionTest.aspx.cs )

That’s’ it. Run the application and after browser close, open the text file to see the log off time.

The above code works well in IE 7/8. If you have any questions, leave a comment.

AsyncFileUpload is a new ASP.NET AJAX Control (Ajax Control Toolkit (v 3.0.30930) released for .NET 3.5 SP1) that allows you asynchronously upload files to server. You don’t need a separate upload button for this control.  Add the AsyncFileUpload control and a label to the web form for the uploading and displaying messages respectively.  HTML:

<asp:ScriptManager ID="ScriptManager1" runat="server"> 

</asp:ScriptManager> 

<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" CompleteBackColor="White" 

OnUploadedComplete="AsyncFileUpload1_UploadedComplete" OnUploadedFileError="AsyncFileUpload1_UploadedFileError" 

OnClientUploadComplete="Success" OnClientUploadError="Error" /> 

<asp:Label ID="Label1" runat="server"></asp:Label> 

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 

{ 

 //Fired on the server side when the file successfully uploaded 

   if (AsyncFileUpload1.HasFile) 

   { 

         AsyncFileUpload1.SaveAs(@"C:\Images\" + AsyncFileUpload1.FileName ); 

         Label1.Text = "Received " + AsyncFileUpload1.FileName + " Content Type " + AsyncFileUpload1.PostedFile.ContentType ; 

   } 

 } 

protected void AsyncFileUpload1_UploadedFileError(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 

 { 

 //Fired on the server side when the loaded file is corrupted 

 //Display some error message here 

 } 

Client side events:

OnClientUploadError - The name of a javascript function executed in the client-side if the file uploading failed  

OnClientUploadComplete - The name of a javascript function executed in the client-side on the file uploading completed

function Success() { 

document.getElementById("Label1").innerHTML = "File Uploaded Successfully !!"; 

} 

function Error() { 

document.getElementById("Label1").innerHTML = "File upload failed"; 

} 

We can use  OnClientUploadComplete to clear fileupload control selction,

function Success() { 
document.getElementById ("Label1").innerHTML = "File Uploaded Successfully !!"; 
var fu = document.getElementById("AsyncFileUpload1"); 
document.getElementById("AsyncFileUpload1").innerHTML = fu.innerHTML; 
} 

Reference:  http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx

Error:

You will get following error, if you try to add a sever control to AjaxTollkit’s tab panel.

TabContainer cannot have children of type 'System.Web.UI.WebControls.DataList'.

That’s because tab panel must be a server control, it should have an ID and runat =”server” attribute.

Solution:

Add an ID and runat =”server” attribute to that TabPanel, like this..

    <cc1:TabContainer ID="TabContainer1" runat="server">

        <cc1:TabPanel ID="TabPanel1" runat="server">

            <ContentTemplate>

                <asp:DataList ID="DataList1" runat="server">

                </asp:DataList>

                <asp:Label ID="Label1" runat="server" Text="Label">

                </asp:Label>

            </ContentTemplate>

        </cc1:TabPanel>

    </cc1:TabContainer>

Multiple controls with the same ID '_header' were found. FindControl requires that controls have unique IDs.

 I got this error, when I tried adding multiple accordion panes to the accordion control in code behind. The problem is with duplicate ID for the panes. Setting unique ID's to dynamic panes will fix the problem.

<cc1:accordion id="Accordion1" runat="Server" selectedindex="0" 
  headercssclass="accordionHeader" contentcssclass="accordionContent" 
  autosize="None" fadetransitions="true" transitionduration="250"
  framespersecond="40" requireopenedpane="false" suppressheaderpostbacks="true">
</cc1:accordion>

In Code behind:

for (int i = 0; i < 3; i++)
{
    AccordionPane pane1 = new AccordionPane();
    //Here i used Guid for uniqueness
    pane1.ID = "AccordionPane" + Guid.NewGuid().ToString();
    Label lbl = new Label();
    lbl.Text = "New pane";
    pane1.Controls.Add(lbl);
    Accordion1.Panes.Add(pane1);
}

Microsoft is going to make jQuery part of the official dev platform. JQuery will come with Visual Studio in the long term, and in the short term it'll ship with ASP.Net MVC. It is truly good news for ASP.Net developers

What is jQuery?

jQuery is a lightweight open source JavaScript library.

From jQuery website..

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Blogs posts by Scott Guthrie and Scott Hanselman on this topic.

Some times we need to call server side function from Javascript function.For example,callig a PoupWindow(with value from code behind) on HyperLink click. 

This must be implemented by creating a additional request to the web server and that’s the only way to invoke methods on the server. Page methods are used for this.

What is PageMethod?

A PageMethod is a public static method that is exposed in the code-behind of a page and can be called from the client script. PageMethods are annotated with [System.Web.Services.WebMethod] attribute.

The code is simple..

Server side function

[code:c#]

[System.Web.Services.WebMethod] public static void Score(string ID, string name, string Role) {

         try {

                //Some data manipulations 

                  return finalScore ; 

              }

         catch (Exception ex) { 

               //Response.Write(ex.ToString());

                                  } 

            } 

[/code]

//Client Side function 

[code:c#]

function score()

              {               

                  PageMethods.Score(txtID.value,txtName.value,txtRole.value);            

               } 

[/code]

<asp:HyperLink ID="btn_Test" runat="server" Text="Calculate" OnClientClick="javascript:return score();"/> 

The ListSearchExtender lets you search for items in a ListBox or DropDownList by typing.  The extender performs an incremental search within the ListBox based on what has been typed so far.

the code is simple 

 <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" EnablePartialRendering="true" EnableScriptGlobalization="true" EnableScriptLocalization="true" runat="Server" />

ScriptManger is required for all AJAX controls..

 <ajaxToolkit:ListSearchExtender ID="ListSearchExtender1" runat="server" TargetControlID="ListBox1" PromptCssClass="ListSearchExtenderPrompt" PromptPosition="Top"></ajaxToolkit:ListSearchExtender/>

• PromptText - Message to display when the ListBox is given focus. 
• TargetControlID - Control to be searched
• PromptPosition - Indicates whether the message should appear at the Top or Bottom of the ListBox.  The default is Top.