locked
Call c# server-side function using xmlhttprequest RRS feed

  • Question

  • User-1197756793 posted

    I try to upload a file using xmlhttprequest.

    Here is my client-side code:

    function UploadFile() {
    
    var formData = new FormData();
    var file = document.getElementById("file").files[0];
    formData.append("file", file);
    
    var uploadServerSideScriptPath = "Login.aspx/test";
    var xhr = new XMLHttpRequest();
    
    xhr.open("POST", uploadServerSideScriptPath, false);
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.setRequestHeader("X-File-Name", file.name);
    xhr.setRequestHeader("X-File-Size", file.size);
    xhr.setRequestHeader("X-File-Type", file.type);
    
    
    xhr.send(formData);
    
    }



    I post to 

    Login.aspx/test

    test function on server side is:

    [WebMethod]
        public static void test(object obj)
        {
            string a = "test";
        }

    but I never get to this function. I put a break point but it never being hit.

    what am I doing wrong?

    Sunday, December 22, 2013 7:05 AM

Answers

  • User-417640953 posted

    Hi InbalT,

    Thank you post the issue to asp.net forum.

    Based on your description and code provided, I see that you use the XMLHttpRequest to call the aspx page method.

    As we all know that "ASP.NET page methods (or web services for consumption in JS) uses JSON serialization for i/p and o/p.

    So you need to set JSON as the content type for the request and actually send the JSON string in the body i.e."

    # If you want to call the aspx page method, you should set the Content-Type as "application/json" like below.

     function UploadFile() {
    
                var sendStr = "{name:'dddd'}" ; 
                var uploadServerSideScriptPath = "XmlHttpRequestUploadFile.aspx/test";
                var xhr = new XMLHttpRequest();  
                xhr.open("POST", uploadServerSideScriptPath, false); 
                xhr.setRequestHeader("Content-Type", "application/json");             
                xhr.send(sendStr);
    
            }

    Page method:

    [WebMethod]
    public static void test(string name)
       {
                    string param = name;
        }

    # If you want to upload the file, please try to use the page load method of aspx. Just Like below.

    Aspx:

    <head runat="server">
        <title></title> 
        <script>
            function UploadFile() {             
                var formData = new FormData();
                var file = document.getElementById("File1").files[0];
                formData.append("file", file);
                // var sendStr = "{name:'dddd'}" ; 
                var uploadServerSideScriptPath = "XmlHttpRequestUploadFile.aspx";
                var xhr = new XMLHttpRequest();  
                xhr.open("POST", uploadServerSideScriptPath, false); 
                xhr.setRequestHeader("Content-Type", "multipart/form-data");
                //xhr.setRequestHeader("Content-Type", "application/json");
                xhr.setRequestHeader("X-File-Name", file.name);
                xhr.setRequestHeader("X-File-Size", file.size);
                xhr.setRequestHeader("X-File-Type", file.type); 
                
                xhr.send(formData);
    
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="File1" type="file" />
            <input id="Button1" type="button" value="button" onclick="UploadFile()" />
        </div>
        </form>
    </body>

    Code Behind:

     protected void Page_Load(object sender, EventArgs e)
            {
                HttpPostedFile file = null;  
                if (Request.Files.Count > 0)
                {
                    file =Request.Files[0];
                    file.SaveAs(Server.MapPath("~/myfile.txt"));
                }
                
            }

    Thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, December 22, 2013 10:14 PM

All replies

  • User-417640953 posted

    Hi InbalT,

    Thank you post the issue to asp.net forum.

    Based on your description and code provided, I see that you use the XMLHttpRequest to call the aspx page method.

    As we all know that "ASP.NET page methods (or web services for consumption in JS) uses JSON serialization for i/p and o/p.

    So you need to set JSON as the content type for the request and actually send the JSON string in the body i.e."

    # If you want to call the aspx page method, you should set the Content-Type as "application/json" like below.

     function UploadFile() {
    
                var sendStr = "{name:'dddd'}" ; 
                var uploadServerSideScriptPath = "XmlHttpRequestUploadFile.aspx/test";
                var xhr = new XMLHttpRequest();  
                xhr.open("POST", uploadServerSideScriptPath, false); 
                xhr.setRequestHeader("Content-Type", "application/json");             
                xhr.send(sendStr);
    
            }

    Page method:

    [WebMethod]
    public static void test(string name)
       {
                    string param = name;
        }

    # If you want to upload the file, please try to use the page load method of aspx. Just Like below.

    Aspx:

    <head runat="server">
        <title></title> 
        <script>
            function UploadFile() {             
                var formData = new FormData();
                var file = document.getElementById("File1").files[0];
                formData.append("file", file);
                // var sendStr = "{name:'dddd'}" ; 
                var uploadServerSideScriptPath = "XmlHttpRequestUploadFile.aspx";
                var xhr = new XMLHttpRequest();  
                xhr.open("POST", uploadServerSideScriptPath, false); 
                xhr.setRequestHeader("Content-Type", "multipart/form-data");
                //xhr.setRequestHeader("Content-Type", "application/json");
                xhr.setRequestHeader("X-File-Name", file.name);
                xhr.setRequestHeader("X-File-Size", file.size);
                xhr.setRequestHeader("X-File-Type", file.type); 
                
                xhr.send(formData);
    
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="File1" type="file" />
            <input id="Button1" type="button" value="button" onclick="UploadFile()" />
        </div>
        </form>
    </body>

    Code Behind:

     protected void Page_Load(object sender, EventArgs e)
            {
                HttpPostedFile file = null;  
                if (Request.Files.Count > 0)
                {
                    file =Request.Files[0];
                    file.SaveAs(Server.MapPath("~/myfile.txt"));
                }
                
            }

    Thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, December 22, 2013 10:14 PM
  • User-1197756793 posted

    Thank you vaery much for the help!

    Instead of using Page Load, I created my own .axd handler that runs ProcessRequest.

    Is it sound like a good solution?

    Monday, December 23, 2013 2:07 AM
  • User-417640953 posted

    Instead of using Page Load, I created my own .axd handler that runs ProcessRequest.

    Hello,

    Yes, it is a nice solution, that will make your application clear and simple.

    Generally, axd handlers are used to download resources embedded in an assembly. so it is mostly used by control developers.

    You can also try to use the ashx handlers to complete it. If you never mind, please share the solution with simple code and that will help others.

    Thanks.

    Best Regards!

    Monday, December 23, 2013 8:26 PM