jQuery AJAX source is an ASP.NET function on the same page (Default.cshtml). How do I send/receive?

Question

We're migrating to ASP.NET from PHP, and I'm a little new to jQuery. So, I'm having a little bit of an issue with this function:

[System.Web.Services.WebMethod]
internal static string[] GetSearchSuggestions(string SearchQuery)
{
    string ConnectionString = "Data Source=<omitted>;Initial Catalog=<omitted>;Integrated Security=True";
    string TSQL_Query = String.Format("SELECT DISTINCT TOP 5 [colum-name] from [table] WHERE [column-name] LIKE '{0}%' AND len([column-name]) > 0", SearchQuery);
    List<string> SearchSuggestions = new List<string>();

    using (System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(ConnectionString))
    {
        using (System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(TSQL_Query, connection))
        {
            connection.Open();
            System.Data.SqlClient.SqlDataReader r = command.ExecuteReader();

            while (r.Read())
            {
                SearchSuggestions.Add(r.GetString(0));
            }
        }
    }
    return SearchSuggestions.ToArray();
}

And this is my jquery:

    <script type="text/javascript">
        $(document).ready(function () {
        $("#SearchQueryBox").autocomplete({
            source: function (request, response) 
            {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: GetSearchSuggestions,
                    data: "{'term':'" + $("#SearchQueryBox").val() + "'}",
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert("error");
                    }
                });
             }
          });
       });
    </script>

Now, if I were to turn this into a simple post that loads the next page, the above ASP.NET C# code works. However, I can't seem to get a jQuery response under any of my test circumstances.

This page is called Default.cshtml, and is using the ASP.NET Razor syntax. The function is located on the same page like this:

@functions
{
    // GetSearchSuggestions() code here
}

How do I appropriately post to an ASP.NET function on the same page, and receive a response?

Thanks in advance!

Answer 1

I am assuming you are using ASP.NET MVC. If that's the case:

You would need to move your function (that is in Default.cshtml) to a new ActionMethod with HttpPost in your Controller.

So, let's say your Default.cshtml is loaded by HomeController.cs. In HomeController.cs, you would create new ActionMethod:

[HttpPost]
public void ActionResult GetSearchSuggestions() {
    // GetSearchSuggestions() code here
}

Also, in your jQuery, the option url of .ajax will need to be the URL of your site. Again, with the example I gave above, the URL would be http://www.example.com/Home/GetSearchSuggestions You can't call C# or ASP.NET function from jQuery like that, you must specify the URL of that ActionMethod.

UPDATE

On the second look, I am not sure if where your internal static string[] GetSearchSuggestions(string SearchQuery) located. But you can move that to HomeController.cs I was talking about. Just remove the [System.Web.Services.WebMethod] and changed to [HttpPost]