C# Webmethod unable to be called with JQuery AJAX

I am trying to call a webmethod I created. The problem I'm having is that the ajax call never calls my webmethod; this is strange to me because I have another webmethod located in the same file with the same return type and parameters that is able to be referenced fine in the "url" definition of the ajax call.

My aspx document consists of the following:

File name CS.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="CS.aspx.cs" Inherits="_Default" %>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<script>
    function ShowCurrentTime() {
    if(document.getElementById("txtUserName").value == "" && document.getElementById("app_name").value == ""){
        alert("One of the fields must be filled out");
        return 0;
    }


    $.ajax({
        type: "POST",
        url: "CS.aspx/getAppId",
        data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert(response.d);
        }
    });
   }
function OnSuccess(response) {
    var y = document.getElementById("test");
    y.innerHTML = response.d;

    }
    </script>

    <body>
    <form id="form1" runat="server">
        <div>
    <table style="background-color:#fcfcfc; width:30%;">
    <tr>
        <td><b>Application ID:</b> </td>
        <td><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br /></td>
    </tr>

    <tr>
        <td><b>Application Name:</b></td>
        <td><asp:TextBox ID="app_name" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
        <td><input id="btnGetTime" type="button" value="Search" 
            onclick = "ShowCurrentTime()" /></td>
    </tr>
    </table>
    <p id="test"></p>
    </body>
    </html>

My web method looks like the following with the filename CS.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.Data.SqlClient;
using System.Configuration;
using System.Data;
using System.Web.Script.Serialization;

public partial class _Default : System.Web.UI.Page 
{
   [System.Web.Services.WebMethod]
   public static string getAppId(string appName) {
       return "this is a string";
   } 
}

I've put a breakpoint at the return statement, just to make sure that the method is even called, while in debug mode, and have had no luck.

回答1:

Make sure you have a reference to jQuery if you want to make a jQuery ajax call.

Also, the parameters of your WebMethod need to match the parameter name you are passing in. The parameter is appName:

 $.ajax({
    type: "POST",
    url: "CS.aspx/getAppId",
    data: '{appName: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    error: function (response) {
        alert(response.d);
    }
});

And in the WebMethod it is appName as well:

[System.Web.Services.WebMethod]
public static string getAppId(string appName)
{
    return "this is a string";
}

In your code, there is a mismatch.

I would also make a habit of closing your div and form tags.

回答2:

You need to place this service in a WCF or ASMX service and create a JavaScript proxy for it. See http://msdn.microsoft.com/en-us/library/bb532367(v=vs.90).aspx