Question

让我们说，我有一个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 +'%'+@term + '%'", 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代码？如何解决？

Answer 1

首先，我建议您将您的Web服务分离到自己的类中 - 看起来您将其设置为使用与页面本身相同的基本URL - 这就是问题 - 我并不感到惊讶您正在从Web服务调用中获取页面内容。

其次，我建议从document.ready函数中启动你的jQuery代码（包括自动完成初始化） - 你需要在调用之前确保页面已经充分加载。

如何在asp.net WebForm中ajax Jquery UI自动完成？

1 个答案: