2013-02-23 44 views
0

我已經嘗試使用jquery自動完成文本框與下面提到的代碼,但我無法實現它,我在jquery中出現錯誤。提前致謝。JQuery自動完成文本框返回錯誤

AutoCompleteTextBox.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteTextBox.aspx.cs" Inherits="Ajax_Using_Jquery.AutoCompleteTextBox" %> 

<!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>Ajax Auto Complete Using Jquery</title> 

     <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"> 
    var UserNameInput; 

    $(document).ready(function() { 

      $("#<%=txtName.ClientID %>").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         //contentType: "application/json; charset=utf-8", 
         url: "AutoCompleteTextBox.aspx/getUserNames", 
         data: "{'TextBoxVal':'" + document.getElementById('<%=txtName.ClientID%>').value + "'}", 
         dataType: "json", 
         success: function (data) { 
          alert("success"); 
         }, 
         error: function (result) { 
          alert("error "); 
         } 
        }); 
       } 
      }); 
     }); 

    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <table> 
    <tr> 
    <td> 
    <div> 
    User Name : &nbsp;&nbsp; 
     <asp:TextBox ID="txtName" runat="server" ></asp:TextBox> 
    </div> 
    </td> 
    </tr> 
    </table> 
    </form> 
</body> 
</html> 

AutoCompleteTextBox.aspx.cs:

public List<string> getUserNames(string TextBoxVal) 
    { 
     string strCon; 
     List<string> objList = new List<string>(); 
     strCon = ConfigurationManager.ConnectionStrings["EmpNameFetch"].ConnectionString; 
     SqlConnection con = new SqlConnection(strCon); 
     SqlCommand cmd = new SqlCommand(@"select EmpName from newTb2 where EmpName like '%"+TextBoxVal+"%'", con); 
     con.Open(); 
     SqlDataReader objReader = cmd.ExecuteReader(); 

     while (objReader.Read()) 
     { 
      objList.Add(objReader["EmpName"].ToString()); 
     } 
     Response.Write(objList.ToString()); 
     con.Close(); 
     return objList; 

    } 
+0

你得到什麼錯誤? – 2013-02-23 02:58:08

+0

500內部服務器錯誤'/'應用程序中的服務器錯誤。未知的Web方法getUserNames。異常詳細信息:System.ArgumentException:未知Web方法getUserNames – Vignesh 2013-02-24 03:59:58

回答

0

爲了這個而不是調用AutoCompleteTextBox.aspx的錯誤頁面我添加了一項新服務,並在asmx.cs頁面中添加這段代碼,並將其命名爲asmx頁面

[System.Web.Script.Services.ScriptService()]

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
using System.Data.SqlClient; 
using System.Configuration; 

namespace Ajax_Using_Jquery 
{ 
    /// <summary> 
    /// Summary description for AutoCompleteFetchService 
    /// </summary> 
    [WebService(Namespace = "http://tempuri.org/")] 
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
    [System.ComponentModel.ToolboxItem(false)] 
    [System.Web.Script.Services.ScriptService()] 
    // 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 AutoCompleteFetchService : System.Web.Services.WebService 
    { 


     [WebMethod] 
     public List<string> getUserNames(string TextBoxVal) 
     { 
      string strCon; 
      List<string> objList = new List<string>(); 
      strCon = ConfigurationManager.ConnectionStrings["EmpNameFetch"].ConnectionString; 
      SqlConnection con = new SqlConnection(strCon); 
      SqlCommand cmd = new SqlCommand(@"select EmpName from newTb2 where EmpName like '%" + TextBoxVal + "%'", con); 
      con.Open(); 
      SqlDataReader objReader = cmd.ExecuteReader(); 

      while (objReader.Read()) 
      { 
       objList.Add(objReader["EmpName"].ToString()); 
      } 

      con.Close(); 
      return objList; 

     } 

    } 
} 

在aspx頁面我喜歡編碼,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteTextBox.aspx.cs" Inherits="Ajax_Using_Jquery.AutoCompleteTextBox" %> 

<!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>Ajax Auto Complete Using Jquery</title> 
    <script type="text/javascript" src="JQuery/jquery-1.9.0.mini.js"></script> 
    <script type="text/javascript" src="JQuery/jquery-ui.min.js" ></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"> 
    $(document).ready(function() { 
     $(".autosuggest").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "AutoCompleteFetchService.asmx/getUserNames", 
        data: "{'TextBoxVal':'" + document.getElementById('txtName1').value + "'}", 
        dataType: "json", 
        success: function (data1) { 
         response(data1.d); 
         if (data1.d == "" || data1.d == null || typeof (data1.d) == 'undefined') { 

          response(["no search found"]); 
         } 
        }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         alert("error " + XMLHttpRequest); 
         alert("error " + textStatus); 
         alert("error " + errorThrown); 
        } 
       }); 
      } 
     }); 
    }); 
    </script> 
    <%-- <link href="StyleSheet/jquery-ui.css" type="text/css" rel="Stylesheet" />--%> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <table> 
    <tr> 
    <td> 
    <div> 
    User Name : &nbsp;&nbsp; 
     <input type="text" id="txtName1" class="autosuggest" /> 
    </div> 
    </td> 
    </tr> 
    </table> 
    </form> 
</body> 
</html> 
+0

不要使用內聯SQL參數,你會傾向於SQL注入。使用SqlParameter來避免sql注入。 http://xkcd.com/327/ – 2013-03-04 03:57:50

0

我不知道你會得到什麼樣的錯誤,但你有沒有嘗試過線下評論? 您已經發送回復,沒有必要直接寫回復。 您可能還想在Web方法中轉換您的方法。

Response.Write(objList.ToString()); 
+0

500內部服務器錯誤'/'應用程序中的服務器錯誤。未知的Web方法getUserNames。異常詳細信息:System.ArgumentException:未知的Web方法getUserNames – Vignesh 2013-02-24 03:07:39

0

你應該做這個方法是這樣的:

[WebMethod] 
public List<string> getUserNames(string TextBoxVal) 
{ 
    string strCon; 
    List<string> objList = new List<string>(); 
    strCon = ConfigurationManager.ConnectionStrings["EmpNameFetch"].ConnectionString; 
    SqlConnection con = new SqlConnection(strCon); 
    SqlCommand cmd = new SqlCommand(@"select EmpName from newTb2 where EmpName like '%"+TextBoxVal+"%'", con); 
    con.Open(); 
    SqlDataReader objReader = cmd.ExecuteReader(); 

    while (objReader.Read()) 
    { 
     objList.Add(objReader["EmpName"].ToString()); 
    } 
    //Response.Write(objList.ToString()); 
    //remove the above because you can not use Resonse.Write here 
    con.Close(); 
    return objList; 

} 

嘗試使用Firebug的插件,這會給你很多關於你的信息得到

+0

我刪除了response.write,但錯誤仍然存​​在,在Firefox中xhr顯示200正常,但在jquery錯誤警報顯示, – Vignesh 2013-02-23 13:02:53

+0

我沒有使用Web服務我使用相同的頁面(AutoCompleteTextBox.aspx和AutoCompleteTextBox.aspx.cs) – Vignesh 2013-02-23 13:04:51

+0

你可以在你的asp.net應用程序的任何代碼begind中有[WebMethod] – BMW 2013-02-23 13:43:50