[RESOLVED]Jquery Ajax calling code-behind Error – 405 (Method Not Allowed)

Hi,

I am working on a web form with Jquery, Ajax to call a code-behind (webservice), but I get the following error: 405 (Method Not Allowed).

See code…

../Ops/new-item.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="new-item.aspx.cs" Inherits="WebAppFrekuency.Ops.new_item" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="../Scripts/js-new.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.11.1.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="message">
        Mensaje
    </div>
    <div id="form">
        <input type="text" id="barcode" name="barcode" />  <button id="submit" type="button">Crear</button>
    </div>
</asp:Content>

../Scripts/js-new.js

$(document).ready(function () {
    //Informacion de contacto
    var error = false;
    var message = "";
    $("#submit").click(function () {

        if ($("#barcode").val() == "") {
            $("#barcode").css("border", "1px solid red");
            error = true;
            message = "Error - El campo codigo de barras es obligatorio";
        }
        else {
            $("#barcode").css("border", "");
            message = "";
        }
        if (error == false) {
            var formData = '{name:"' + $("#barcode").val() + '"}';
            // process the form
            $.ajax({
                type: "POST", // define the type of HTTP verb we want to use (POST for our form)
                url: "new-item.apsx/Search", // the url where we want to POST
                data: formData, // our data object
                contentType: "application/json; charset=utf-8",
                dataType: "json", // what type of data do we expect back from the server
                success: OnSuccess,
                failure: function (response) {
                    alert("Falla - " + response.d);
                }
            });
            // using the done promise callback
            event.preventDefault();
        } else { alert(message); }
    });
    function OnSuccess(response) {
        alert("Exito - " + response.d);
    }
});

../Ops/new-item.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.IO;

namespace WebAppFrekuency.Ops
{
    public partial class new_item : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [System.Web.Services.WebMethod]
        public static string Search(string epc) 
        {
            return "YES";
        }
    }
}

Any ideas why I am getting this error?

Thanks,

This could be in part to the order that you are ordering your Javascript references in.

You might want to consider loading your jQuery reference prior to your Javascript file that relies on it :

<-- Load jQuery -->
<script src="<%= ResolveUrl("~/Scripts/jquery-1.11.1.js")" type="text/javascript"></script>
<!-- Load your Javascript file -->
<script src="<%= ResolveUrl("~/Scripts/js-new.js")" type="text/javascript"></script>

I suspect that this isn’t at all an issue as you are actually receiving a 405 request. It’s likely to do with the format of your request, I threw together a very quick example that demonstrates a POST from your page to a server-side WebMethod (located in
the same page for simplicity) :

Test.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Examples.Test" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        // When your page loads
        $(function () {
            // Test your POST method
            $.ajax({
                type: "POST", 
                url: "Test.aspx/Search",
                data: '{ epc: "' + $("#epc").val() + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert(response.d);
                },
                failure: function (response) {
                    alert("Falla - " + response.d);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <!-- An example value that will be serialized and posted -->
        <input id="epc" name="epc" value="Example" />
    </form>
</body>
</html>

Test.aspx.cs

using System;
using System.Web.Services;

namespace Examples
{
    public partial class Test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
          
        }

        [WebMethod]
        public static string Search(string epc)
        {
            return "YES";
        }
    }
}

You can see that your value in your TextBox ("epc") was passed along to the WebMethod as expected :

And then when the result is passed to your page :

Rion,

Thanks for your answer, I tested your example and it works fine, but when I start to do some modifications to make it work to my needs, I start getting same 405(Method Not Allowed) error. I just dont get it. can you post an example with a button and when
it is clicked fires an event.

thanks,

Mario Villamizar

One thing that you might want to consider trying first would be to prevent your default behavior prior to performing your AJAX call to see if that makes a difference at all :

$("#submit").click(function () {
        // Prevent the default behavior
        event.preventDefault();
        
        // Code omitted for brevity
});

With regards to an example using a Button, I have provided one for you below :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        // When your page loads
        $(function () {
            $("form").submit(function () {
                // Prevent the default behavior / submit
                event.preventDefault();

                // Form data
                var search = $("#epc").val();

                // Test your POST method
                $.ajax({
                    type: "POST",
                    url: "Test.aspx/Search",
                    data: '{ epc: "' + search + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response.d);
                    },
                    failure: function (response) {
                        alert("Falla - " + response.d);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <!-- An example value that will be serialized and posted -->
        <input id="epc" name="epc" value="Example" />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

Hi Rion,

Thanks a lot, I am not quite sure why my code did not work, still doing some testing, but the one you send me works, so now I am changing it to my needs.

Mario Villamizar

Leave a Reply