asp.netajaxc#-4.0partial-page-refreshpartial-postback

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


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


Solution

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