使用JQuery UI自动完成与ASP.NET的有效途径 [英] Efficient way of using JQuery UI Autocomplete with ASP.NET
问题描述
我使用JQuery用户界面自动完成我的ASP.NET C＃网站。
JavaScript的：
$（函数（）{
VAR availableTags = [
＆其中;％= GetAvaliableTags（）％＆GT;
]。
$（input.tag_list）。自动完成（{
来源：availableTags
}）;
}）;
在C＃中功能code-背后：
公共字符串GetAvaliableTags（）
{
VAR标签=新的[] {动作，计划};
返回的string.join（，，tags.Select（X =＆GT;的String.Format（\{0} \中，x）））;
}
这是工作的罚款。但我有一个疑问，如果我取的标签数量较大的数据库，它会加载在页面加载所有这些标签一下子，使其缓慢。即来到我脑海中有效的方法是使用Ajax。但我不是一个Ajax的程序员，不太了解它。任何一个可以请告诉我如何高效地使用Ajax做的呢？如何调用 GetAvailableTags 需求？
更新
我想是这样的：
$（函数（）{
VAR availableTags = [功能（）{
$阿贾克斯（{
键入：POST，
的contentType：应用/ JSON的;字符集= UTF-8，
网址：CreateTopic.aspx / GetAvaliableTags
数据：{'键'：'+ $（input.tag_list）VAL（）+'}，
数据类型：JSON，
异步：真正的，
dataFilter：功能（数据）{返回数据; }，
成功：功能（数据）{如果（result.hasOwnProperty（D））{
$（input.tag_list）。自动完成（{
来源：result.d
}）;
}
其他 {
// 点头;因此就使用结果
$（input.tag_list）。自动完成（{
来源：结果
}）;
}）;
}];
$（input.tag_list）。自动完成（{
来源：availableTags
}）;
}）;
Web方法相当于 GetAvailableTags（）
[System.Web.Services.WebMethod]
公共静态字符串GetAvaliableTags（字符串键）
{
VAR标签=新的[] {动作，计划};
返回的string.join（，，tags.Select（X =＆GT;的String.Format（\{0} \中，x）））;
}
但Ajax调用不被解雇。什么原因？
我会建议在服务器端使用ASP.NET AJAX页面的方法，并有jQuery的阿贾克斯（）函数调用它来获取数据，如：
code-背后：
[WebMethod的]
公共静态字符串GetAvailableTags（）
{
这里//把逻辑返回的标签列表（从数据库即负载）
VAR标签=新的[] {动作，计划};
返回的string.join（，，tags.Select（X =＆GT;的String.Format（\{0} \中，x）））;
}
标记：
$（文件）。就绪（函数（）{
$阿贾克斯（{
键入：POST，
网址：PageName.aspx / GetAvailableTags
数据： {}，
的contentType：应用/ JSON的;字符集= UTF-8，
数据类型：JSON，
成功：函数（结果）{
如果（result.hasOwnProperty（D））{
//该.D是结果的一部分，所以引用它
//到达所感兴趣的实际JSON数据
$（input.tag_list）。自动完成（{
来源：result.d
}）;
}
其他 {
// 点头;因此就使用结果
$（input.tag_list）。自动完成（{
来源：结果
}）;
}
}
}）;
}）;
请注意：您需要的
PageName.aspx将名称更改为您的.aspx页面的名称。此外，.D的语法是放在微软的ASP.NET 3.5版本的ASP.NET AJAX的防XSS保护;因此，检查，看是否.D属性是有或没有。
I am using JQuery UI Autocomplete with my ASP.NET-C# Website.
JavaScript:
$(function () {
var availableTags = [
<%=GetAvaliableTags() %>
];
$("input.tag_list").autocomplete({
source: availableTags
});
});
C# Function in code-behind:
public string GetAvaliableTags()
{
var tags = new[] { "ActionScript", "Scheme" };
return String.Join(",", tags.Select(x => String.Format("\"{0}\"", x)));
}
This is working fine. But I have a doubt that if I fetch the big amount of tags from database, it will load all those tags on page load at once, making it slow. The efficient way that came to my mind is to use Ajax. But I am not a Ajax programmer and know little about it. Can any one please tell me how to do it with Ajax efficiently? How to call GetAvailableTags on demand?
UPDATE
I tried like this:
$(function () {
var availableTags = [function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CreateTopic.aspx/GetAvaliableTags",
data: "{ 'key' : '" + $("input.tag_list").val() + "'}",
dataType: "json",
async: true,
dataFilter: function (data) { return data; },
success: function (data) {if (result.hasOwnProperty("d")) {
$("input.tag_list").autocomplete({
source: result.d
});
}
else {
// No .d; so just use result
$("input.tag_list").autocomplete({
source: result
});
});
}];
$("input.tag_list").autocomplete({
source: availableTags
});
});
Web Method equivalent of GetAvailableTags()
[System.Web.Services.WebMethod]
public static string GetAvaliableTags(string key)
{
var tags = new[] { "ActionScript", "Scheme" };
return String.Join(",", tags.Select(x => String.Format("\"{0}\"", x)));
}
But the Ajax call is not being fired. What can be the reason?
I would recommend using an ASP.NET AJAX Page Method on the server-side and have the jQuery .ajax() function call it to retrieve the data, like this:
Code-behind:
[WebMethod]
public static string GetAvailableTags()
{
// Put logic here to return list of tags (i.e. load from database)
var tags = new[] { "ActionScript", "Scheme" };
return String.Join(",", tags.Select(x => String.Format("\"{0}\"", x)));
}
Markup:
$(document).ready(function() {
$.ajax({
type: "POST",
url: "PageName.aspx/GetAvailableTags",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
if (result.hasOwnProperty("d")) {
// The .d is part of the result so reference it
// to get to the actual JSON data of interest
$("input.tag_list").autocomplete({
source: result.d
});
}
else {
// No .d; so just use result
$("input.tag_list").autocomplete({
source: result
});
}
}
});
});
Note: You will need to change the name of
PageName.aspxto the name of your .aspx page. Also, the.dsyntax was an anti-XSS protection put in by Microsoft in the ASP.NET 3.5 release of ASP.NET AJAX; therefore the check to see if the.dproperty is there or not.
这篇关于使用JQuery UI自动完成与ASP.NET的有效途径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
