My Ajax web method call in C# keeps showing an error: "401 Unauthorized"

Ok, several things to check.

First up, not really sure why one is writing jQuery selector code to add an event to a button. Why not just add the event call to the button? That way, when looking at markup, you don’t have two (multiple) places to look at to determine what a button does?

And your thus writing code (that you have to check and verify) to add the event, and then you have code for the event (that you have to check and verify). Now, if you wanting to select a bunch of buttons in say a table, then by all means use a jQuery selector to add an event to all of the buttons with one bit of jQuery selector code. So, writing more code to add an event is just another place for things to fail.

Ok, so a few things to check:

Make sure the button is not causing a post-back. Just another REALLY great reason to not write code to hook up a click event, since then you have to go back and check what the button does - two places in the markup to check and look at. So, just put the code call in the button markup.

So, say this markup:

        <div style="padding:35px">
            
            <h4>Enter your name</h4>
            <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static">
            </asp:TextBox>

            <br />
            <br />

            <asp:Button ID="cmdTest" runat="server" Text="ajax call test"
                cssclass="btn"
                OnClientClick="HelloTest();return false"                
                />


            <h4>Result</h4>
            <asp:TextBox ID="txtFull" runat="server" ClientIDMode="Static">
            </asp:TextBox>

        </div>

        <script>


            function HelloTest() {

                var name = $("#txtName").val()

                var sMsg = "about to call web method" +
                    "\njQuery ver = " + jQuery.fn.jquery +
                    "\nName to pass = " + name

                alert(sMsg)

                var sURL = "WebCallTestPage.aspx/SayHello"
                $.ajax({
                    type: "POST",
                    url: sURL,
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ name: name }),
                    dataType: "json",
                    success: function (Data) {
                        $('#txtFull').val(Data.d)
                    },
                    error: function (xhr, status, error) {
                        var errorMessage = xhr.status + ': ' + xhr.statusText
                        alert('Error - ' + errorMessage)
                    }
                });
            }

        </script>

Note the use of ClientIDMode for the controls. If you don't do this, then you need to use "in line" server side expressions for the jQuery() selectors. And even if using an HTML button? Do include the return = false to prevent a post-back.

So, the above should produce this:

Ok, if above does not work, then if you are using friendly URL's, then check Global.asax, and in App_Start, comment out the following:

var settings = new FriendlyUrlSettings();
// settings.AutoRedirectMode = RedirectMode.Permanent; // <-- comment this out
routes.EnableFriendlyUrls(settings);

Simply remove EnableSession = true since you're not actually using session data:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string SayHello(string name)
{
    return "Hello " + name;
}