时间戳

首页 > 解决方案 > 在 C# 中选择事件和 WebMethod 的 Jquery 自动完成

javascript - 在 C# 中选择事件和 WebMethod 的 Jquery 自动完成

问题描述

我正在使用jQuery autocomplete并且工作正常。

现在我想使用用户选择的值并执行所需的操作。

在从预先填充的列表中选择值的上一步中，AutoComplete TextBox我们将调用jQuery GetCustomerDetails函数。

它将Country名称作为输入参数，制作ajax call细节WebMethod get Customer并呈现在表格对象中。

这是正在使用的代码，我没有错误，但它不起作用，因为tblCustomers表仍然是空的......

我该怎么做？

在此处输入图像描述

.aspx 页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#txtCountry").autocomplete({
                source: function (request, response) {
                    var param = { keyword: $('#txtCountry').val() };
                    $.ajax({
                        url: "Default4.aspx/GetCountryNames",
                        data: JSON.stringify(param),
                        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
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                select: function (event, ui) {
                    if (ui.item) {
                        GetCustomerDetails(ui.item.value);
                    }
                },
                minLength: 2
            });
        });


        function GetCustomerDetails(country) {

            $("#tblCustomers tbody tr").remove();

            $.ajax({
                type: "POST",
                url: "Default4.aspx/GetCustomers",
                data: '{country: "' + country + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        var rows = "<tr>"
                            + "<td class='customertd'>" + item.Name + "</td>"
                            + "<td class='customertd'>" + item.Population + "</td>"
                            + "<td class='customertd'>" + item.Code + "</td>"
                            + "<td class='customertd'>" + item.Continent + "</td>"
                            + "<td class='customertd'>" + item.Region + "</td>"
                            + "<td class='customertd'>" + item.GovernmentForm + "</td>"
                            + "</tr>";
                        $('#tblCustomers tbody').append(rows);
                    }))
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Enter Country Name: &nbsp; &nbsp;
            <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
        </div>
        <br />
        <div>
            <table id="tblCustomers" class="tblCustomers">
                <thead>
                    <tr>
                        <th class="customerth">Name</th>
                        <th class="customerth">Population</th>
                        <th class="customerth">Code</th>
                        <th class="customerth">Continent</th>
                        <th class="customerth">Region</th>
                        <th class="customerth">GovernmentForm</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>

.cs 页面

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

public partial class Default4 : System.Web.UI.Page
{
    public class Customer
    {
        public string Name { get; set; }
        public string Population { get; set; }
        public string Code { get; set; }
        public string Continent { get; set; }
        public string Region { get; set; }
        public string GovernmentForm { get; set; }
    }

    [WebMethod]
    public static Customer[] GetCustomers(string country)
    {
        List<Customer> customers = new List<Customer>();

        string CS = ConfigurationManager.ConnectionStrings["cn3"].ConnectionString;

        string query = string.Format("SELECT `Name`, `Population`, `Code`, `Continent`, `Region`, `GovernmentForm` FROM `country` WHERE `Name` LIKE '%{0}%';", country);

        using (MySqlConnection con =
                new MySqlConnection(CS))
        {
            using (MySqlCommand cmd = 
                new MySqlCommand(query, con))
            {
                con.Open();
                MySqlDataReader reader = cmd.ExecuteReader();

                while (reader.Read())
                {
                    Customer customer = new Customer();
                    customer.Name = reader.GetString(0);
                    customer.Population = reader.GetString(1);
                    customer.Code = reader.GetString(2);
                    customer.Continent = reader.GetString(3);
                    customer.Region = reader.GetString(4);
                    customer.GovernmentForm = reader.GetString(5);
                    customers.Add(customer);
                }
            }
        }

        return customers.ToArray();
    }


    [WebMethod]
    public static string[] GetCountryNames(string keyword)
    {
        List<string> country = new List<string>();

        string CS = ConfigurationManager.ConnectionStrings["cn3"].ConnectionString;

        string query = string.Format("SELECT DISTINCT `Name` FROM `country` WHERE `Name` LIKE '%{0}%';", keyword);

        using (MySqlConnection con =
                new MySqlConnection(CS))
        {
            using (MySqlCommand cmd = 
                new MySqlCommand(query, con))
            {
                con.Open();
                MySqlDataReader reader = cmd.ExecuteReader();

                while (reader.Read())
                {
                    country.Add(reader.GetString(0));
                }
            }
        }

        return country.ToArray();
    }
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

编辑问题

使用断点并调试此部分代码上的错误，

响应未定义

response($.map(data.d, function (item) {
    var rows = "<tr>"
        + "<td class='customertd'>" + item.Name + "</td>"
        + "<td class='customertd'>" + item.Population + "</td>"
        + "<td class='customertd'>" + item.Code + "</td>"
        + "<td class='customertd'>" + item.Continent + "</td>"
        + "<td class='customertd'>" + item.Region + "</td>"
        + "<td class='customertd'>" + item.GovernmentForm + "</td>"
        + "</tr>";
    $('#tblCustomers tbody').append(rows);
}))

解决方案

 $.map(data.d, function (item) {
     var rows = "<tr>"
     + "<td class='customertd'>" + item.Name + "</td>"
     + "<td class='customertd'>" + item.Population + "</td>"
     + "<td class='customertd'>" + item.Code + "</td>"
     + "<td class='customertd'>" + item.Continent + "</td>"
     + "<td class='customertd'>" + item.Region + "</td>"
     + "<td class='customertd'>" + item.GovernmentForm + "</td>"
     + "</tr>";
 $('#tblCustomers tbody').append(rows);
 })

标签： javascriptc#jqueryajaxjquery-ui-autocomplete

解决方案

推荐阅读