如何在asp.net WebForm中使用jquery UI自動完成？

比方說，我有一個jQuery UI插件如何在asp.net WebForm中使用jquery UI自動完成？

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

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Autocomplete - Remote datasource</title> 
    <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> 
    <script src="js/jquery-1.8.3.js"></script> 
    <script src="ui/jquery.ui.core.js"></script> 
    <script src="ui/jquery.ui.widget.js"></script> 
    <script src="ui/jquery.ui.position.js"></script> 
    <script src="ui/jquery.ui.menu.js"></script> 
    <script src="ui/jquery.ui.autocomplete.js"></script> 
    <link rel="stylesheet" href="../demos.css"> 
    <style> 
     .ui-autocomplete-loading { 
      background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; 
     } 
    </style> 
    <script> 
     $(function() { 
      function log(message) { 
       $("<div>").text(message).prependTo("#log"); 
       $("#log").scrollTop(0); 
      } 

      $("#birds").autocomplete({ 
       source: "index.aspx/abc", 
       minLength: 2, 
       select: function (event, ui) { 
        log(ui.item ? 
         "Selected: " + ui.item.value + " aka " + ui.item.id : 
         "Nothing selected, input was " + this.value); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 

    <div class="ui-widget"> 
     <label for="birds">Birds: </label> 
     <input id="birds"> 
    </div> 

    <div class="ui-widget" style="margin-top: 2em; font-family: Arial"> 
     Result: 
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
    </div> 

    <div class="demo-description"> 
     <p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p> 
     <p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p> 
    </div> 
</body> 
</html>

代碼隱藏

using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
using System.Web.UI; 
using System.Web.UI.WebControls; 

namespace WebApplication26 
{ 
    public partial class index : System.Web.UI.Page 
    { 
     protected void Page_Load(object sender, EventArgs e) 
     { 

     } 

     [WebMethod] 
     public static string abc(string term) 
     { 
      Dictionary<string, dynamic> dictionary = new Dictionary<string, dynamic>(); 
      dictionary.Add("@term", term); 
      DataTable dt = DAL.GetDataTable(@"SELECT dbo.Guests.guest_id AS id, ISNULL(CONVERT(nvarchar(50), first_name) + ' ', '') + ISNULL(CONVERT(nvarchar(50), last_name),'') AS value FROM dbo.Guests WHERE ISNULL(CONVERT(nvarchar(50), first_name) + ' ', '') + ISNULL(CONVERT(nvarchar(50), last_name),'') LIKE +'%'[email protected] + '%'", dictionary); 
      return BAL.jsonfier(dt); 
     } 
    } 
}

BAL

public static string jsonfier(DataTable dt) 
    { 
     JavaScriptSerializer js = new JavaScriptSerializer(); 

     List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); 
     Dictionary<string, object> row = null; 

     foreach (DataRow dr in dt.Rows) 
     { 
      row = new Dictionary<string, object>(); 
      foreach (DataColumn col in dt.Columns) 
      { 
       row.Add(col.ColumnName, dr[col]); 
      } 
      rows.Add(row); 
     } 

     return js.Serialize(rows); 
    }

它返回相同的頁面HTML enter image description here

BAL（是一個類）具有將數據錶轉換爲json對象所需的全部代碼。 BAL工作正常！爲什麼它返回所有的html代碼？如何解決它？

來源

2014-01-28 MD TAHMID HOSSAIN

什麼是BAL？ WebMethod中的某些內容會刷新整個頁面，這就是爲什麼這會返回整個頁面而不是更新代碼。 –

BAL（是一個類）具有將數據錶轉換爲json對象的所有必需代碼。 BAL工作正常！ –

我想也許它應該是DAL，就像數據訪問層一樣。 – tintyethan

首先，我建議你將你的web服務分成它自己的類 - 它看起來像你已經設置爲使用相同的基本URL作爲頁面本身 - 這是問題 - 我不是感到驚訝的是，您從Web服務調用回來的頁面內容。其次，我建議從document.ready函數中啓動你的jQuery代碼（包括autocomplete init） - 你需要確保頁面在調用之前被充分加載。

來源

2014-01-28 21:29:37

如何在asp.net WebForm中使用jquery UI自動完成？

回答

相關問題