jQuery自動完成與C＃和SQL Server數據庫

Question

我想在我的動態創建的文本框上使用jQuery自動完成。這是我第一次使用jQuery，所以我不太確定我在哪裏下車... 我的ASMX頁面代碼工作正常&生成的結果問，但我的 自動完成的JavaScript是不是要求所有的頁面（嘗試調試），它不給我錯誤 消息要麼...幫助請！

編輯： 我仍然有錯誤「 ASP.NET AJAX客戶端框架未能加載」

<script src="/ScriptResource.axd?d=dRAn80ZulnXIbHUFZAi0thqEaFFdeMlwAh6uA_ciIINTs7jTUe13ADvaDyjOl6tPSr-1TN4Bqt6MFVjznyiXABGNxDhFk5_-02EGxOku0B-Tim4ebG59zhvC6DdsHV11uoIY024U1o0IMngrTBO45x9tPeG-PiyEUPEypUFf795T-3SY0&amp;t=ffffffffb868b5f4" type="text/javascript"></script> 
<script type="text/javascript"> 
<!-- 
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.'); 

一旦在文本框中鍵入，我收到彈出錯誤：

阿賈克斯的錯誤：researcher_list.asmx/FetchResList：錯誤：未定義：內部服務器錯誤：500

編輯的代碼：

.aspx的代碼：

$(function() { 
    $('input:text').autocomplete({ 
     source: function(request, response) { 
      var pString = '{ "resName": "' + request.term + '" }'; 
      $.ajax({ 
       url: "researcher_list.asmx/FetchResList", /* same root as the page? */ 
       data: pString, 
       dataType: "jsond", 
       type: "POST", 
       contentType: "application/json", /* simplify */ 
       converters: {/* avoid the d or no d issue, works with 3.5 or prior this way */ 
        "json jsond": function(msg) { 
         return msg.hasOwnProperty('d') ? msg.d : msg; 
        } 
       }, 
       success: function(data) {/* assumes data always returned and it IS called item in the JSON */ 
        response($.map(data, function(item) { 
         return { 
          value: item.name, 
          label: item.name 
         } 
        })) 
       }, 
       error: function(xhr, textStatus, errorThrown) { 
        var errorMessage = "Ajax error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + xhr.statusText + " : " + xhr.status; 

        if (xhr.status != "0" || errorThrown != "abort") { 
         alert(errorMessage); 
        } 
       } 
      }); 
     }, 
     minLength: 2 
    }); 
}); 

ASMX代碼：

[WebService(Namespace = "http://localhost/v2/pages/main.aspx")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[System.ComponentModel.ToolboxItem(false)] 
// 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 researcher_list : System.Web.Services.WebService 
{ 
    [WebMethod] 
    public List<DBResearcher.Summary> FetchResList(string resName) 
    { 
     //SqlConnection connection; 
     //SqlCommand command = null; 
     //SqlDataReader myReader = null; 
     //string sql; 
     //StringBuilder sb = new StringBuilder(); 
     var tempSum = new DBResearcher(); 
     var allRes = DBResearcher.GetAllResearcher() 
         .Where(m => m.name.ToLower().Contains(resName.ToLower())); 
     return allRes.ToList(); 
    } 

    public static string[] GetCustomerNames() 
    { 
     string[] data = new string[] { "Andrew", "Ramona", "Russ", "Russell", Raymond" }; 

     return data; 

    } 
} 

web.config文件：

<httpHandlers> 
    <!-- AJAX.Net Configuration --> 
    <add verb="GET,POST" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/> 
    <remove verb="*" path="*.asmx"/> 
    <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
    <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
    <add verb="GET,HEAD" path="ScriptResource.axd" validate="false" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
</httpHandlers> 

<!-- HTTP MODULES --> 

<httpModules> 
    <!-- doesn't work if we restrict it by <location path=...> for some reason, 
      so we have no choice but to do this at the root level. --> 
    <!--<add name="HttpUploadModule" type="AssistedSolutions.SlickUpload.HttpUploadModule, AssistedSolutions.SlickUpload" /> 
    --> 
    <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 

</httpModules> 

編輯 - 錯誤而對自己

Stack Trace: 

[HttpException (0x80004005): Failed to Execute URL.] 
    System.Web.Hosting.ISAPIWorkerRequestInProcForIIS6.BeginExecuteUrl(String url, String method, String childHeaders, Boolean sendHeaders, Boolean addUserIndo, IntPtr token, String name, String authType, Byte[] entity, AsyncCallback cb, Object state) +2008569 
    System.Web.HttpResponse.BeginExecuteUrlForEntireResponse(String pathOverride, NameValueCollection requestHeaders, AsyncCallback cb, Object state) +393 
    System.Web.DefaultHttpHandler.BeginProcessRequest(HttpContext context, AsyncCallback callback, Object state) +220 
    System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +8699714 
    System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +155 

Answer 1

我的答案是基於一個asp.net建3.5解決方案和jQuery 1.7.1版本的假設。其他海報已經涵蓋了很多。您的版本可能有所不同。這只是一個試圖將註釋放在已完成的腳本和服務器端註釋的答案中。

就此你裝飾了你的類：

[WebService(Namespace = "http://mysite.com/researcher_list/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[ToolboxItem(false)] 
[ScriptService] 
public class researcher_list : WebService 
{ 

裝點你的方法：（使用EnableSession如果你需要...）

[WebMethod(EnableSession = true)] 
public List<DBResearcher.Summary> FetchResList(string resName)  { 

清理客戶端腳本的：

$('input:text').autocomplete({ 
    source: function(request, response) { 
     var pString = '{ "resName": "' + request.term + '" }'; 
     $.ajax({ 
      url: "researcher_list.asmx/FetchResList", 
      /* same root as the page? */ 
      data: pString, 
      dataType: "jsond", 
      type: "POST", 
      contentType: "application/json", 
      /* simplify */ 
      converters: { /* avoid the d or no d issue, works with 3.5 or prior this way */ 
       "json jsond": function(msg) { 
        return msg.hasOwnProperty('d') ? msg.d : msg; 
       } 
      }, 
      success: function(data) { /* assumes data always returned and it IS called item in the JSON */ 
       response($.map(data, function(item) { 
        return { 
         value: item.name, 
         label: item.name 
        }; 
       })); 
      }, 
      minLength: 2, 
      error: function(xhr, textStatus, errorThrown) { 
       var errorMessage = "Ajax error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + xhr.statusText + " : " + xhr.status; 
       if (xhr.status != "0" || errorThrown != "abort") { 
        alert(errorMessage); 
       } 
      } 
     }); 
    } 
}); 

除此之外，還有Web。在asp.net中的配置設置，需要設置爲獲得一個Web服務的功能 - 這裏假設你已經完成了研究，並有工作。如果不是，建議創建一個簡單的方法，將當前時間作爲帶有NO參數的字符串（data：「{}」，）返回，並通過ajax獲取，以確保它在自動完成的複雜性分層之前可用。

Answer 2

嘗試運行ASMX頁面標記與WebMethod屬性的方法像這樣：

[WebMethod] 
public static List<DBResearcher.Summary> FetchResList(string mail) 
{ 
... 
} 

另外，您的參數需要匹配，所以將resName更改爲郵件。

您也可以合併您的jQuery每到自動完成選擇：

$('input:text').autocomplete(...) 

編輯：

試試這個代碼：

$('input:text').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "researcher_list.asmx/FetchResList", 
      data: "{ 'resName': '" + 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 
});