使用Web服务自动完成文本框

时间:2012-03-27 08:17:52

标签: asp.net web-services jquery

我已经创建了我从客户端脚本调用的Web服务。但它显示错误。我无法理解错误的来源。我还在Web服务和客户端脚本中的不同点设置了断点,但没有遇到这些断点。这是我写的代码。

类文件代码

public class GetContacts
{ 
public int ID { get; set; }
public string Name { get; set; }
public GetContacts()
{
    //
    // TODO: Add constructor logic here
    //
}
public List<GetContacts> FetchContacts()
{
    List<GetContacts> ContactList = new List<GetContacts>();
    ContactList.Add(new GetContacts() { ID = 1, Name = "XXX<1111111111>" });
    ContactList.Add(new GetContacts() { ID = 2, Name = "XXX<1111111111>" });
    ContactList.Add(new GetContacts() { ID = 3, Name = "XXX<1111111111>" });
    ContactList.Add(new GetContacts() { ID = 4, Name = "XXX<1111111111>" });
    ContactList.Add(new GetContacts() { ID = 5, Name = "XXX<1111111111>" });
    ContactList.Add(new GetContacts() { ID = 6, Name = "XXX<1111111111>" });
    ContactList.Add(new GetContacts() { ID = 7, Name = "XXX<1111111111>" });
    ContactList.Add(new GetContacts() { ID = 7, Name = "XXX<1111111111>" });

    return ContactList;
}
} 

网络服务代码。

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment  the following line. 
 [System.Web.Script.Services.ScriptService]
public class Contacts : System.Web.Services.WebService {

public Contacts () {

    //Uncomment the following line if using designed components 
    //InitializeComponent(); 
}

[WebMethod]
public string HelloWorld() {
    return "Hello World";
}
public List<GetContacts> FetchContactList(string Name)
{
    var Receipent = new GetContacts();
    var ContactDetail = Receipent.FetchContacts()
    .Where(m => m.Name.ToLower().StartsWith(Name.ToLower()));

    return ContactDetail.ToList();
}
}

Default.aspx页面的代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%--<script src="jQuery.js" type="text/javascript"></script>--%>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".tb").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Contacts.asmx/FetchContactList",
                    data: "{ 'Name': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                value: item.Name
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 2
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="100%">
    <tr>
        <td>
            Number</td>
        <td>
            <asp:TextBox ID="txtNumber" runat="server" class="tb"></asp:TextBox>

            </td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            Message</td>
        <td>
            <asp:TextBox ID="txtMsg" runat="server" TextMode="MultiLine"></asp:TextBox></td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            <asp:Button ID="btnSend" runat="server" Text="Send" onclick="btnSend_Click" /></td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
</table>
</form>
</body>
</html>

请告诉我我在哪里犯错误。

2 个答案:

答案 0 :(得分:1)

将[WebMethod]属性添加到FetchContactList

答案 1 :(得分:0)

你实现了属性

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

请参阅此内容以获取完整参考 http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx