使用 jquery 调用网络方法

Question

我有两个 asp 文本框，TextBoxPicPostCode 和 TextBoxPicAddress。

此任务的目标是，当我在 TextBoxPicPostCode 中输入 post 代码并且焦点从此文本框丢失时，它应该自动填充 TextBoxPicAddress 使用后面代码中的方法。

.cs 代码中的方法 getadd() 工作正常并使用 google api 但我不知道如何使用 jqueryajax用它。

代码隐藏

public void getadd()
{
    string address = "";
    //_Address.InnerText = _PostCode.Text;
    XmlDocument xDoc = new XmlDocument();
    xDoc.Load("http://maps.google.com/maps/api/geocode/xml?address=" + TextBoxPicPostCode.Text + "&sensor=false");
    XmlNodeList distanceX = xDoc.GetElementsByTagName("formatted_address");
    if (distanceX.Count > 0)
    {
        address = distanceX[0].InnerXml;
        TextBoxPicAddress.Text = address;
    }
}

JavaScript

<script type="text/javascript">
    function submit() {
        $.ajax({
            type: "POST",
            url: "Establishment_Controller.aspx.cs/getadd",
            data: dataValue,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',

            success: function (result) {
                alert("We returned: " + result.d);
            }
        });
    }
</script>

标记

<asp:TextBox ID="TextBoxPicPostCode" runat="server" 
    CssClass="time" 
    onblur="submit();">
</asp:TextBox>
<asp:TextBox ID="TextBoxPicAddress" runat="server" 
    CssClass="address">
</asp:TextBox>

Answer 1

.cs 不是必需的和

public void getadd()

应该是Static 所以

[System.Web.Services.WebMethod]
public static void getadd()

JScript

<script type="text/javascript">

                            function submit()
                            {
                                $.ajax({
                                    type: "POST",
                                    url: "Establishment_Controller.aspx/getadd",
                                    data: dataValue,
                                    contentType: 'application/json; charset=utf-8',
                                    dataType: 'json',

                                    success: function (result) {
                                        alert("We returned: " + result.d);
                                    }
                                });
                            }

                        </script>

编辑：您不能在静态方法中使用控件。你需要参考这个：

Using Jquery Ajax Call

Using AutoCompleteExtender

Answer 2

进行这些更改

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
    // change the function name from 'submit' here and at markup
    function FetchAddress() {
        //passing postalCode as string. 
        //Make sure that 'postalCode' is the parameter name at the webmethod
        var dataValue = "{ 'postalCode' : '" + $('.time').val() + "'}";
        //would be worthwhile to read about JSON.stringify, its the standard method
        //var dataValue = JSON.stringify({ postalCode: $(".time").val() });
        $.ajax({
            type: "POST",
            url: "Establishment_Controller.aspx/getadd", // .cs is not required
            data: dataValue,
            contentType: 'application/json', //charset is not required
            //dataType: 'json', // not required
            success: function (result) {
                var data = result.hasOwnProperty("d") ? result.d : result;
                //alert("We returned: " + result.d);
                // now we are assigning the return value to TextBoxPicAddress
                $(".address").val(data);
            }
        });
    }
</script>

代码隐藏

//1. webmethod attribute required
[System.Web.Services.WebMethod] 
//2. web methods should be static
//ref: http://encosia.com/why-do-aspnet-ajax-page-methods-have-to-be-static/
//3. return type string is needed 
// because we need to fetch the return on the ajax callback
//4. we need to pass TextBoxPicPostCode as a parameter
// because we need to fetch the return on the ajax callback
public static string getadd(string postalCode)
{
    string address = "No Address found!";
    //_Address.InnerText = _PostCode.Text;
    XmlDocument xDoc = new XmlDocument();
    var remoteXml = "http://maps.google.com/maps/api/geocode/xml?address="
        + postalCode + "&sensor=false";
    xDoc.Load(remoteXml);
    XmlNodeList distanceX = xDoc.GetElementsByTagName("formatted_address");
    if (distanceX.Count > 0)
    {
        address = distanceX[0].InnerXml;
    }
    return address;
}

在标记处，将事件更改为 onblur="FetchAddress();"

P.S: 没有时间详细输入所做的所有更改，因此添加为评论

Answer 3

HTML

Javascript `

    function danish() {
        var code = $("#<%=TextBoxPicPostCode.ClientID %>").val();

        $.ajax({
            type: "POST",
            url: "GoogleAPI.aspx/getadd",
            contentType: 'application/json; charset=utf-8',
            data: '{code: "' + code + '"}',
            dataType: 'json',
            success: function (result) {
                $("#<%=TextBoxPicAddress.ClientID %>").autocomplete({ source: result.d });
            }
        });
        return false;
    }

</script>`

代码隐藏

using System.Web.Services;
using System.Net;
using System.IO;
using System.Web.Script.Serialization;

[WebMethod]
    public static List<string> getadd(string code)
    {
        string address = "";
        List<string> lst = new List<string>();
        XmlDocument xDoc = new XmlDocument();
        var jsonSerialiser = new JavaScriptSerializer();

        try
        {
            HttpWebRequest.DefaultWebProxy.Credentials = CredentialCache.DefaultCredentials;
            xDoc.Load(@"http://maps.google.com/maps/api/geocode/xml?address=" + code + "&sensor=false");
            XmlNodeList distanceX = xDoc.GetElementsByTagName("formatted_address");
            if (distanceX.Count > 0)
            {
                for (int i = 0; i < distanceX.Count; i++)
                {
                    lst.Add(distanceX[i].InnerXml);
                    address = address + distanceX[i].InnerXml;
                }

            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return lst;
    }

使用 jquery 调用网络方法

calling webmethod using jquery

asp.net