Pass (Send) TextBox value to Generic Handler using jQuery Ajax in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

i am using this handler to upload files it works perfect but with the file upload i want to send textbox value to handler.

so how on upload button i can send filepath (which is already going) along with textbox value to handler

<%@ WebHandler Language="C#" Class="HandlerCS" %>

using System;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Script.Serialization;
using socialnetworkingwebsite.Models;

public class HandlerCS : IHttpHandler
{
    smEntities db = new smEntities();
    public void ProcessRequest(HttpContext context)
    {
        //Check if Request is to Upload the File.
        if (context.Request.Files.Count > 0)
        {
            //Fetch the Uploaded File.
            HttpPostedFile postedFile = context.Request.Files[0];
            
            //Set the Folder Path.
            string folderPath = context.Server.MapPath("~/DynamicImages/");

            //Set the File Name.
            string fileName = Path.GetFileName(postedFile.FileName);
            
            //Save the File in Folder.
            postedFile.SaveAs(folderPath + fileName);

            //Send File details in a JSON Response.
            string json = new JavaScriptSerializer().Serialize(
                new
                {
                    name = fileName
                });
            context.Response.StatusCode = (int)HttpStatusCode.OK;
            context.Response.ContentType = "text/json";
            context.Response.Write(json);
            context.Response.End();
            
            
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="fileuploadajax.ascx.cs" Inherits="socialnetworkingwebsite.usercontrol.fileuploadajax" %>


 <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
<input type="file" name="postedFile" />
<input type="button" id="btnUpload" value="Upload" />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<progress id="fileProgress" style="display: none"></progress>
<hr />
<span id="lblMessage" style="color: Green"></span>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("body").on("click", "#btnUpload", function () {
        $.ajax({
            url: '<%= ResolveUrl("~/HandlerCS.ashx")%>',
            type: 'POST',
            data: new FormData($('form')[0]),
            cache: false,
            contentType: false,
            processData: false,
            success: function (file) {
                $("#fileProgress").hide();
                $("#lblMessage").html("<b>" + file.name + "</b> has been uploaded.");
            },
            xhr: function () {
                var fileXhr = $.ajaxSettings.xhr();
                if (fileXhr.upload) {
                    $("progress").show();
                    fileXhr.upload.addEventListener("progress", function (e) {
                        if (e.lengthComputable) {
                            $("#fileProgress").attr({
                                value: e.loaded,
                                max: e.total
                            });
                        }
                    }, false);
                }
                return fileXhr;
            }
        });
    });
</script>

 

 

Posted one month ago

Hi nauna,

For sending textbox value to handler use query string parameter to send.

Check this example. Now please take its reference and correct your code.

HTML

<input type="file" name="postedFile" />
<input type="button" id="btnUpload" value="Upload" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<progress id="fileProgress" style="display: none"></progress>
<hr />
<span id="lblMessage" style="color: Green"></span>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("body").on("click", "#btnUpload", function () {
        $.ajax({
            url: '<%= ResolveUrl("~/HandlerCS.ashx")%>' + "?Name=" + $('#TextBox1').val(),
            type: 'POST',
            data: new FormData($('form')[0]),
            cache: false,
            contentType: false,
            processData: false,
            success: function (file) {
                $("#fileProgress").hide();
                $("#lblMessage").html("<b>" + file.name + "</b> has been uploaded.");
            },
            xhr: function () {
                var fileXhr = $.ajaxSettings.xhr();
                if (fileXhr.upload) {
                    $("progress").show();
                    fileXhr.upload.addEventListener("progress", function (e) {
                        if (e.lengthComputable) {
                            $("#fileProgress").attr({ value: e.loaded, max: e.total });
                        }
                    }, false);
                }
                return fileXhr;
            }
        });
    });
</script>

Handler

C#

<%@ WebHandler Language="C#" Class="HandlerCS" %>

using System;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Script.Serialization;

public class HandlerCS : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        //Check if Request is to Upload the File.
        if (context.Request.Files.Count > 0)
        {
            //Fetch TextBox Value from QueryString.
            string name = context.Request.QueryString["Name"];
            
            //Fetch the Uploaded File.
            HttpPostedFile postedFile = context.Request.Files[0];

            //Set the Folder Path.
            string folderPath = context.Server.MapPath("~/Uploads/");

            //Set the File Name.
            string fileName = Path.GetFileName(postedFile.FileName);

            //Save the File in Folder.
            postedFile.SaveAs(folderPath + fileName);

            //Send File details in a JSON Response.
            string json = new JavaScriptSerializer().Serialize(new { name = fileName });
            context.Response.StatusCode = (int)HttpStatusCode.OK;
            context.Response.ContentType = "text/json";
            context.Response.Write(json);
            context.Response.End();
        }
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

VB.Net

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

Imports System
Imports System.IO
Imports System.Net
Imports System.Web
Imports System.Web.Script.Serialization

Public Class HandlerVB : Implements IHttpHandler
    
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        'Check if Request is to Upload the File.
        If context.Request.Files.Count > 0 Then
            'Fetch TextBox Value from QueryString.
            Dim name As String = context.Request.QueryString("Name")
            
            'Fetch the Uploaded File.
            Dim postedFile As HttpPostedFile = context.Request.Files(0)
            
            'Set the Folder Path.
            Dim folderPath As String = context.Server.MapPath("~/Uploads/")

            'Set the File Name.
            Dim fileName As String = Path.GetFileName(postedFile.FileName)
            
            'Save the File in Folder.
            postedFile.SaveAs(folderPath + fileName)
            
            'Send File details in a JSON Response.
            Dim json As String = New JavaScriptSerializer().Serialize(New With {
                .name = fileName
            })
            context.Response.StatusCode = CInt(HttpStatusCode.OK)
            context.Response.ContentType = "text/json"
            context.Response.Write(json)
            context.Response.End()
        End If
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class