Get hidden field values from codebehind

Question

I am trying to assign hiddenfield values as shown on my page_load:

If Session("tempDir") Is Nothing Then
    If Request.Files.Count > 0 Then
        Dim tempDir As String
        tempDir = Path.GetRandomFileName()
        tempDir = tempDir.Substring(0, tempDir.LastIndexOf("."))
        IO.Directory.CreateDirectory(Server.MapPath("~/Uploads/" & tempDir))
        IO.Directory.CreateDirectory(Server.MapPath("~/Downloads/" & tempDir))
        Session.Add("tempDir", tempDir)


        currentDirectory.Value = Session("tempDir").ToString

        Dim chunk As Integer = If(Context.Request("chunk") IsNot Nothing, Integer.Parse(Context.Request("chunk")), 0)
        Dim fileName As String = If(Context.Request("name") IsNot Nothing, Context.Request("name"), String.Empty)
        myfilename = fileName
        Session.Add("filename", myfilename)
        finalfilename.Value = currentDirectory.Value & fileName

        finalfilename.Value = Session("filename").ToString
        MsgBox(finalfilename.Value)

        workingDir.Value = Server.MapPath("~/Uploads/" & tempDir)
        Session.Add("tempDir", workingDir.Value)
        MsgBox(workingDir.Value)


        waitFlag.Value = "True"
        Session.Add("flag", waitFlag.Value)

        waitFlag.Value = Session("flag").ToString
        MsgBox(waitFlag.Value)

        Dim fileUpload As HttpPostedFile = Context.Request.Files(0)

        Dim uploadPath = Context.Server.MapPath("~/uploads/" & tempDir)
        Using fs = New FileStream(Path.Combine(uploadPath, fileName), If(chunk = 0, FileMode.Create, FileMode.Append))
            Dim buffer = New Byte(fileUpload.InputStream.Length - 1) {}
            fileUpload.InputStream.Read(buffer, 0, buffer.Length)

            fs.Write(buffer, 0, buffer.Length)
        End Using
    End If
End If

These are my html input hidden fields:

<input type="hidden" id="workingDir" runat="server"/>
<input type="hidden" id="finalfilename" runat="server"/>
<input type="hidden" id="waitFlag"  runat="server"/>
<input id="currentDirectory" type="hidden" runat="server"/>

This is my ajax call where I get all the hidden field values as undefined:

<script type="text/javascript">
     $('#btnconvert').click(function () {
         var wd = $('#workingDir').val();
         alert(wd);
         var fn = $('#finalfilename').val();
         alert(fn);
         var bf = $('#waitFlag').val();
         alert(bf);
         $.ajax({
             type: "POST",
             url: "Default.aspx/ProcessFiles",
             data: "{'workingDir':'" + wd + "', 'finalfilename':'" + fn + "', 'waitFlag':'" + bf + "'}",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function (data) {
                 alert("success");
             },
             error: function (data) {
                 alert("fail");
             }
         });
     });
  </script>

can anyone point out me where am I going wrong ?

Answer 1

You made some minor mistake.

The issue is with your Jquery button click event where you retrieve values from hidden field. Your hidden fields are server side control. So when it will be rendered, id of the hidden field will not be only workingDir, finalfilename, waitFlag

So you should use ClientID to get the values from Hidden Field as mentioned below :

var wd = $('#<%=workingDir.ClientID%>').val();
alert(wd);
var fn = $('#<%=finalfilename.ClientID%>').val();
alert(fn);
var bf = $('#<%=waitFlag.ClientID%>').val();
alert(bf);

Your JQUERY will look like as mentioned below :

<script type="text/javascript">
        $('#btnconvert').click(function () {
            var wd = $('#<%=workingDir.ClientID%>').val();
            alert(wd);
            var fn = $('#<%=finalfilename.ClientID%>').val();
            alert(fn);
            var bf = $('#<%=waitFlag.ClientID%>').val();
            alert(bf);
            $.ajax({
                type: "POST",
                url: "Default.aspx/ProcessFiles",
                data: "{'workingDir':'" + wd + "', 'finalfilename':'" + fn + "', 'waitFlag':'" + bf + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    alert("success");
                },
                error: function (data) {
                    alert("fail");
                }
            });
        });
</script>