问题描述
我正在使用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 + '" }',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:
<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);
})
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）