Question

我有一个自动填充文本框，当用户输入城市名称时会提示。用户选择城市名称后，将使用以下代码检索所选值：

$(document).ready(function() {
      $('#txtName').on('change', function() {
        $('#selectedItem').html('You selected: ' + this.value);
      }).change();
      $('#txtName').on('autocompleteselect', function(e, ui) {
        $('#selectedItem').html('You selected: ' + ui.item.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

现在我需要在aspx.cs（代码隐藏）中传递选定的值和调用方法，以检索所选城市的更多细节。

如何从JQuery调用方法可以指导我实现

Answer 1

您必须在autocompleteselect中调用ajax，如下所示

$('#txtName').on('autocompleteselect', function (e, ui) {
     $('#selectedItem').html('You selected: ' + ui.item.value);
     $.ajax({url: "aspx.cs",data:{value:ui.item.value}, success: function(result){
        //response from server
    }});

});

Answer 2

使用$.Ajax将所选值发送到服务器（代码隐藏）并获得响应：

$('#txtName').on('autocompleteselect', function(e, ui) {
  $('#selectedItem').html('You selected: ' + ui.item.value);
  $.ajax({
    url: "your-page.aspx/GetCityDetails",
    data: { Name: this.value },
    success: function(result) {
      //Process the result from the code-behind.
    }
  });
});

您的代码隐藏必须有一个名为GetCityDetails的web方法，该方法接受name参数并将city对象作为JSON返回。

Answer 3

您可以使用Web Method

function GetDetails(cityId) {     
                 $.ajax({
                 type: "POST",
                 url: 'Default.aspx/GetDetails',
                 data: {"cityId":cityId},
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (msg) {
                   console.log(msg);
                 },
                 error: function (e) {
                  console.log(e);

                 }
             });
         }

$(document).ready(function() {
      $('#txtName').on('change', function() {
        $('#selectedItem').html('You selected: ' + this.value);
      }).change();
      $('#txtName').on('autocompleteselect', function(e, ui) {
        $('#selectedItem').html('You selected: ' + ui.item.value);
        GetDetails(ui.item.value);
});

在您的aspx页面中

[WebMethod]                                 //Default.aspx.cs
  public static void GetDetails(cityId)
  {
     //Your Logic
  }

Answer 4

服务器端更改

您需要使用WebMethod属性标记该方法，以便从客户端调用它，或者您需要创建一个Web服务。

[WebMethod]
public static yourObject GetCityDetails(string cityId)//name this method as per your needs.
{
  //Do whatever you want.
  return yourObject; //it can also be in JSON format.
}

客户端更改

从客户端对该方法进行ajax调用。

  $('#txtName').on('autocompleteselect', function(e, ui) {
  $('#selectedItem').html('You selected: ' + ui.item.value);
  $.ajax({
    url: "yourpage.aspx/GetCityDetails", //same method name here.
    data: { cityId: this.value },
    success: function(result) {
      //do whatever you want with server side data here.
    }
  });
});

Answer 5

这就解决了我的问题：

以下是.aspx

中jquery部分的代码

function SetCityName(cityName) {
        $.ajax({
            type: "POST",
            url: 'Default.aspx/GetCityDetails',
            data: JSON.stringify({ cityName: cityName }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("CityName:" + cityName + "\n\nRequest: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
            },
            success: function (result) {
                alert("We returned: " + result.d);
            }
       });
    }

这是.aspx.cs中的代码

[WebMethod]
        public static string GetCityDetails(string cityName)
        {
            MessageBox.Show(cityName);
            return "success";
        }

技巧部分是在JQuery中使用以下部分。我已经尝试了上面提供的替代方案，但没有一个与下面的代码分开：

data: JSON.stringify({ cityName: cityName }),

如何在自动完成选择后从Jquery调用codebehind方法

5 个答案:

服务器端更改

客户端更改