Hello Readers,
In this post, I would like to discuss how to integrate Ajax with custom application pages in SharePoint.
This article assumes that you are using .NET Framework 3.5. You need not install anything because .NET Framework 3.5 supports Ajax and it includes all Ajax related stuff like script manager, update panel, etc.
Paste below line in content place holder with ID “Main”.
<asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager>
This will add script manager to the application page and manages ASP.NET Ajax script libraries and script files, partial-page rendering, and client proxy class generation for Web and application services.
Then add the following block next to end of script manager.
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
<div><asp:Image ID="Image1" runat="server" ImageAlign="Left" ImageUrl="/_layouts/IMAGES/ProgressImage.gif" /><asp:Label ID="lblProgressText" runat="server" Text="Please wait while your changes are processed" Width="500" Font-Size="Medium" Font-Underline="true" Font-Bold="true" ForeColor="Green" ></asp:Label></div>
<div id="progressBackgroundFilter"> </div>
</ProgressTemplate>
</asp:UpdateProgress>
UpdateProgress control starts working when asynchronous operations are in progress and provides visual feedback in the browser when the contents of one or more UpdatePanel controls are updated. I used a animated image for showing on screen while asynchronous operations are in progress.
Then add below lines
<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
//Put your controls here
</ContentTemplate>
</asp:UpdatePanel>
UpdatePanel enables sections of a page to be partially rendered without a postback.
With this you are almost done Ajaxfying your application page. Only thing left on this is, you need to register async post back control in code behind file of your aspx page.
You can do this by adding the following line in page load event of the aspx page.
ScriptManager1.RegisterAsyncPostBackControl(btnCreate);
In the above line btnCreate is the control ID I used for actual operations has to be done in post back.
With this you are done.
Few things you need to take care are:
Some controls may not support post back scenarios during partial page rendering. For example, File Upload control.
If you are using file upload control in your aspx page, the file must be uploaded by using a control that is a post back trigger object for the panel. Update Panels are used to update selected regions of a page instead of updating the whole path with a post back.
Useful links on this:
Using the AJAX Update Panel in SharePoint
http://msdn.microsoft.com/en-us/library/ff650218.aspx
Script Manager Class
http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx
Using the FileUpload Control with the UpdatePanel Control
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.fileupload.aspx
Regards,
Sudhakar Bulli
