Update Panel refresh on code behind function call in C# - Ajax

Question

I am using Uploadify v2.1.4 to upload images using ASP.Net C# FM 4.0.

In this page i have other controls also, but i want a functionality in such a way that when i upload images it should automatically refresh the UpdatePanel1 to show image uploaded

Default.aspx FILE

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
   <ContentTemplate>                                 
        <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatDirection="Horizontal" >
            <ItemTemplate>
                <br /><img src='http://test.kashmirsouq.com/ImageUploads/<%# Eval("ImageID") %>' width="100px" height="100px"   vspace="2" hspace="2" border="1" />
                <br /><asp:LinkButton ID="lnkBtnDeleteImage" CommandArgument='<%# Eval("sno") %>' CommandName="Delete" runat="server">
         Delete</asp:LinkButton>
        <br />
            </ItemTemplate>
        </asp:DataList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>" 
            SelectCommand="SELECT [sno], [ImageID] FROM [User_Images]">
        </asp:SqlDataSource>
 </ContentTemplate>
</asp:UpdatePanel>

Page example is here test.kashmirSouq.com

I am calling FileUplaad.aspx file to upload image using jQuery

<script type="text/javascript">
        $(document).ready(function () {
            $('#fuFiles').uploadify({
                'uploader': 'Scripts/uploadify.swf',
                'script': 'FileUploads.aspx',
                'cancelImg': 'Scripts/cancel.png',
                'auto': 'true',
                'multi': 'true',
                'fileExt': '*.jpg;*.gif;*.png',
                'buttonText': 'Browse...',
                'queueSizeLimit': 5,
                'simUploadLimit': 2
            });
        });

</script>

and in FileUpload.aspx.cs file i save the file on the server and database, I need a way so that i can refresh the updatepanel1 from function saveData() which is in FileUpload.aspx.cs

protected int saveData()
{
            String strSql = "INSERT INTO HMS_User_Images(ImageID,UserID,ImageCreationDate) ";
            strSql += " VALUES ('" + filename + "','123456789', '" + DateTime.Now + "')";
            int result = DataProvider.intConnect_Select(strSql);
}

So when i upload images it should refresh do partial page update of the grid. Please give me a example how i can do it using C#

Please advice how i can do this code sample would be highly appreciated.

Regards

Answer 1

Try by showing the image by using the response after the Onupload complete event.So when the user as soon as he uploads you will find the image.

This is the script:

<script type="text/javascript">
    $(window).load(
function () {
    $("#fileInput1").uploadify({
        'uploader': 'scripts/uploadify.swf',
        'cancelImg': 'images/cancel.png',
        'buttonText': 'Browse Files',
        'script': 'Upload.aspx',
         'folder': 'uploads',
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'queueSizeLimit': 9999,
        'simUploadLimit': 2,
        'sizeLimit': 4000000,
        'multi': true,
        'auto': true,
        'onComplete': function (event, queueID, fileObj, response, data) {
            $("#thumbnail").append(response)
        },

        'onError': function (event, ID, fileObj, errorObj) {
            alert(errorObj.type + ' Error: ' + errorObj.info);
        }


    });
    }
    );

</script>

This is the Handler:

<%@ WebHandler Language="VB" Class="UploadVB" %>

Imports System
Imports System.Web
Imports System.IO
Imports System.Drawing
Public Class UploadVB : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")

        Dim savepath As String = ""
        Dim tempPath As String = ""
        tempPath = System.Configuration.ConfigurationManager.AppSettings("FolderPath")
        savepath = context.Server.MapPath(tempPath)
        Dim filename As String = postedFile.FileName
        If Not Directory.Exists(savepath) Then
            Directory.CreateDirectory(savepath)
        End If
        If Not Directory.Exists(savepath + "\thumbs") Then
            Directory.CreateDirectory(savepath + "\thumbs")
        End If


        postedFile.SaveAs((savepath & "\") + filename)
        Dim fullImage As System.Drawing.Image = New System.Drawing.Bitmap((savepath & "\") + filename)

        Dim newWidth As Integer = 100
        Dim newHeight As Integer = 80

        Dim temp As New Bitmap(newWidth, newHeight)
        Dim newImage As Graphics = Graphics.FromImage(temp)
        newImage.DrawImage(fullImage, 0, 0, newWidth, newHeight)
        temp.Save((savepath + "\thumbs" & "\") + "t_" + filename)

        context.Response.Write("<a href='" + (tempPath & "/") + filename + "'><img src='" + tempPath + "/thumbs" & "/" + "t_" + filename + "'/></a>")
        context.Response.StatusCode = 200
        'context.Response.Write("OK")

    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get


       End Property

End Class

In the above code you can find thumbnails appended as soon as the user uploads you find a thumbnail of the image.

Answer 2

If You want to refresh the Update panel , Try This...

UpdatePanel1.Update();

If the page is enabled for partial-page rendering, when you invoke the Update method, the UpdatePanel control's content is updated in the browser. Call the Update method if you have server code that must execute to determine whether an UpdatePanel control should be updated. If you plan to use the Update method, set the UpdateMode property to Conditional. If you want the decision to update the panel to be determined in server logic, make sure that the ChildrenAsTriggers property is false and that no explicit triggers are defined for the panel.

In a typical page development scenario, if you define triggers or if the ChildrenAsTriggers property is true for the UpdatePanel control, the Update method is automatically called during the page life cycle.

If the ContentTemplate property is not defined for the UpdatePanel control, no updates of the panel will occur.