Error 302 when passing multiple parameters via AJAX to ASP.NET WebMethod

Question

Error 302 when passing multiple parameters via AJAX to ASP.NET WebMethod

180 Views Asked by TheMixy At 18 March 2022 at 10:19

I'm trying to pass three parameters to a WebMethod using AJAX in an old ASP.NET web application (NET Framework 4.6.2 project).

Note: I cannot use a form, so the three controls (id, date and tempdocument) are just wrapped in a <div> element (so not in <form>).

Here is my javascript code:

function passValues() {        
    // this one is from an <input> (text) control
    var date= $('#txbDate').val();

    // this one is from a <input> (date) control
    var id= $('#txbId').find('select').val();

    // this one is from an <input> (type=file) control
    var filedata = $("#TempDocument").get(0).files;

    // url to the aspx.file where the WebMethod is
    var url = 'Test.aspx/PassValues';
            
$.ajax({
    type: 'post',
    url: url,
    processData: false,
    contentType: false,
    data: { id: id, date: date, filedata: filedata}
    }).done(function (result) {

        // do some stuff here
    });
}

and I'm trying to catch these in a webmethod:

[WebMethod]
public static string PassValues(int id, string date, string filedata)
{
    // do some stuff here

    // return some stuff in a Json result
}

When running passValues() I get no javascript errors and All three variables (id, date and filedata) get populated, but the WebMethod does not get hit.

I do however get a 302 network error (browser developer tools) with no details about the error.

What is the reason for the error? Is it even possible to pass files with AJAX in an ASP.NET app?

Original Q&A

There are 1 best solutions below

**Albert D. Kallal** · Answer 1 · 2022-03-18T15:01:53.603000

Your data has to take the varibles and make a string.

It can be some messy js code to do that, but you can use stringify, and it will do the work for you. I mean, when you use id : id, how does it know that "id" supposed to be "id", or the value of id? Which will you get?

So, try this:

data: JSON.stringify({ id: id, date: date, filedata: filedata}),

Edit: Try building a test web page

Ok, so when you build a web method, you can create a web service page (.asmx), or you can drop (place) web methods right into a existing page.

so, create a new web page - and test/try adding a web method.

Assuming you do have jQuery working (installed) then try create a new web page - and don't include a master page (if you using them).

So, you have a page that looks like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Autocom.aspx.cs" Inherits="CSharpWebApp.Test2.Autocom" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="../Scripts/jquery-1.12.4.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.js"></script>

    <style>
        input {border-radius:10px}
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <div style="padding:25px">

    <h2>Celsius to Fahrenheit (°C to °F)</h2>
    <br />
    <div style="text-align:right;width:20%">
        <label style="font-size:large">Enter Celsious Tempature</label>
        <asp:TextBox ID="txtC" runat="server" style="font-size:large;margin-left:5px;text-align:center" 
            TextMode="Number" Width="80px" Wrap="False"
            ClientIDMode="Static">
        </asp:TextBox>
        <br /> <br />

        <div style="text-align:center">
            <asp:Button ID="cmdConvert" runat="server" Text="Convert to °F" CssClass="btn"
                OnClientClick="MyConvert();return false"/>
        </div>
        <br />
        <label style="font-size:large">Fahrenheit</label>
        <asp:TextBox ID="txtF" runat="server" style="font-size:large;margin-left:5px;text-align:center" 
            TextMode="Number"  Width="80px" Wrap="false"
            ClientIDMode="Static">
        </asp:TextBox>
    </div>

    <asp:FileUpload ID="FileUpload1" runat="server" />

    <script>
        function MyConvert() {
            txtC = $("#txtC");
            txtF = $("#txtF");
            $.ajax({
                type: "POST",
                url: "Autocom.aspx/ConvertToC",
                data: JSON.stringify({ MyC: txtC.val()}),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    txtF.val(msg.d);
                },
                error: function (xhr, status, error) {
                    var errorMessage = xhr.status + ': ' + xhr.statusText
                    alert('Error - ' + errorMessage)
                }
            });
        }
    </script>


        </div>
    </form>
</body>
</html>

And the code behind looks like this:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace CSharpWebApp.Test2
{
    public partial class Autocom : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static Double ConvertToC(Double MyC)
        {            
            Double CelResult = (MyC * 1.8) + 32;
            return CelResult;
        }
    }
}

So, try a test page.

Edit#: Getting value of a FileUpLoad control

Your code of this looks to be wrong:

var filedata = $("#TempDocument").get(0).files;

I Can't see how above will work????

This works:

            <asp:FileUpload ID="FileUpload1" runat="server" ClientIDMode="Static" />

            <asp:Button ID="Button1" runat="server" Text="check file up-load control"
                OnClientClick="checkmycontrol();return false"  />

    <script>
        function checkmycontrol() {
            var upload = $('#FileUpload1')
            alert(upload.val())
        }
    </script>

Error 302 when passing multiple parameters via AJAX to ASP.NET WebMethod

There are 1 best solutions below

Edit: Try building a test web page

Edit#: Getting value of a FileUpLoad control

Related Questions in ASP.NET

Related Questions in AJAX

Related Questions in WEBMETHOD

Trending Questions

Popular # Hahtags

Popular Questions