I have been struggling to bind an AutoComplete datasource to an AspNet web service throughout the day. But the web service is not called at all. The error routine shows "Internal Server Error" alert.
Both the web page and the web service are in a folder named "AutoComplete" under the root directory.
Could anybody please help me?
Client-Side Code:
<script type="text/javascript">
var _rootUrl = '<%=string.Format("{0}{1}/", Request.Url.GetLeftPart(UriPartial.Authority), HttpRuntime.AppDomainAppVirtualPath)%>';
</script>
<script type = "text/javascript">
$(document).ready(function ()
{
$("#TxtName").kendoAutoComplete(
{
change: function (e)
{
alert(e);
onChange(e);
},
minLength: 1,
dataTextField: "Name",
filter: "contains",
dataSource: new kendo.data.DataSource(
{
type: "json",
transport:
{
read:
{
type: "POST",
url: _rootUrl + "AutoComplete/WebService2.asmx/GetEmployeesNames",
contentType: 'application/json; charset=utf-8',
datatype: "json",
data: function ()
{
alert($("#TxtName").data("kendoAutoComplete").value());
return
{
Param: $("#TxtName").data("kendoAutoComplete").value()
}
} // data
}, //read
parameterMap: function (options)
{
alert(options);
return JSON.stringify(options);
} // parameterMap
}, // transport
serverFiltering: true,
serverSorting: true,
pageSize: 10,
schema:
{
data: "d"
},
error: function(e)
{
var xhr = e[0];
var statusCode = e[1];
var errorThrown = e[2];
alert(xhr);
alert(statusCode);
alert(errorThrown);
}
})
})
});
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID = "TxtName" runat = "server" />
</div>
</form>
</body>
Web Service:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService2 : System.Web.Services.WebService
{
public class Employee
{
private int _Id;
private string _Name;
public int Id
{
get { return _Id; }
set { _Id = value; }
}
public string Name
{
get { return _Name; }
set { _Name = value; }
}
public Employee() { }
public Employee(int Id, string Name)
{
this.Id = Id; this.Name = Name;
}
}
public WebService2() { }
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
[WebMethod]
public List<Employee> GetEmployeesNames(string Param)
{
string StrConnectionString = ConfigurationManager.ConnectionStrings["ConnectionStringEmployeesNormalized2"].ConnectionString;
SqlConnection SqlConnection1 = new SqlConnection(StrConnectionString);
SqlCommand SqlCommand1 = new SqlCommand("SELECT Id, Name FROM dbo.Employees Where Name Like '" + Param.Trim() + "%'", SqlConnection1);
DataTable DataTable1 = new DataTable();
SqlDataAdapter SqlDataAdapter1 = new SqlDataAdapter(SqlCommand1);
SqlDataAdapter1.Fill(DataTable1);
List<Employee> List1 = new List<Employee>();
foreach (DataRow DataRow1 in DataTable1.Rows)
{
List1.Add(new Employee(Convert.ToInt32(DataRow1["Id"]), Convert.ToString(DataRow1["Name"])));
}
return List1;
}
}
Both the web page and the web service are in a folder named "AutoComplete" under the root directory.
Could anybody please help me?
Client-Side Code:
<script type="text/javascript">
var _rootUrl = '<%=string.Format("{0}{1}/", Request.Url.GetLeftPart(UriPartial.Authority), HttpRuntime.AppDomainAppVirtualPath)%>';
</script>
<script type = "text/javascript">
$(document).ready(function ()
{
$("#TxtName").kendoAutoComplete(
{
change: function (e)
{
alert(e);
onChange(e);
},
minLength: 1,
dataTextField: "Name",
filter: "contains",
dataSource: new kendo.data.DataSource(
{
type: "json",
transport:
{
read:
{
type: "POST",
url: _rootUrl + "AutoComplete/WebService2.asmx/GetEmployeesNames",
contentType: 'application/json; charset=utf-8',
datatype: "json",
data: function ()
{
alert($("#TxtName").data("kendoAutoComplete").value());
return
{
Param: $("#TxtName").data("kendoAutoComplete").value()
}
} // data
}, //read
parameterMap: function (options)
{
alert(options);
return JSON.stringify(options);
} // parameterMap
}, // transport
serverFiltering: true,
serverSorting: true,
pageSize: 10,
schema:
{
data: "d"
},
error: function(e)
{
var xhr = e[0];
var statusCode = e[1];
var errorThrown = e[2];
alert(xhr);
alert(statusCode);
alert(errorThrown);
}
})
})
});
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID = "TxtName" runat = "server" />
</div>
</form>
</body>
Web Service:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService2 : System.Web.Services.WebService
{
public class Employee
{
private int _Id;
private string _Name;
public int Id
{
get { return _Id; }
set { _Id = value; }
}
public string Name
{
get { return _Name; }
set { _Name = value; }
}
public Employee() { }
public Employee(int Id, string Name)
{
this.Id = Id; this.Name = Name;
}
}
public WebService2() { }
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
[WebMethod]
public List<Employee> GetEmployeesNames(string Param)
{
string StrConnectionString = ConfigurationManager.ConnectionStrings["ConnectionStringEmployeesNormalized2"].ConnectionString;
SqlConnection SqlConnection1 = new SqlConnection(StrConnectionString);
SqlCommand SqlCommand1 = new SqlCommand("SELECT Id, Name FROM dbo.Employees Where Name Like '" + Param.Trim() + "%'", SqlConnection1);
DataTable DataTable1 = new DataTable();
SqlDataAdapter SqlDataAdapter1 = new SqlDataAdapter(SqlCommand1);
SqlDataAdapter1.Fill(DataTable1);
List<Employee> List1 = new List<Employee>();
foreach (DataRow DataRow1 in DataTable1.Rows)
{
List1.Add(new Employee(Convert.ToInt32(DataRow1["Id"]), Convert.ToString(DataRow1["Name"])));
}
return List1;
}
}
2 Answers, 1 is accepted
0
Nelson
Top achievements
Rank 1
Rank 1
answered on 31 May 2012, 02:57 PM
I too need to be able to bind to an ASP.net datasource for Kendo AutoComplete. I see no examples on how to do this anywhere, and searching hard reveals only an example of binding to a KendoGrid, but it also relies on entity framework so this is not ideal.
Is there any thorough documentation or answer on how to do this?
Is there any thorough documentation or answer on how to do this?
0
Sakthivel
Top achievements
Rank 1
Rank 1
answered on 14 Jun 2012, 12:51 PM
The following is an example how you could bind a Asp Net Webservice to a Kendo AutoComplete plug-in.
ASPX Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../../kendoui.web.2012.1.322.open-source/js/jquery.min.js" type="text/javascript"></script>
<script src="../../JavaScript/JSON2.js" type="text/javascript"></script>
<script src="../../kendoui.web.2012.1.322.open-source/js/kendo.web.min.js" type="text/javascript"></script>
<link href="../../kendoui.web.2012.1.322.open-source/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../kendoui.web.2012.1.322.open-source/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="../../kendoui.web.2012.1.322.open-source/source/js/kendo.binder.js" type="text/javascript"></script>
<script type = "text/javascript">
var Employees;
$(document).ready(function ()
{
Employees = JSON.parse($("#HdfEmployees").val());
var autoComplete = $("#TxtName").kendoAutoComplete(
{
minLength: 1,
dataSource:
{
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport:
{
read:
{
url: "Ideal.asmx/GetEmployeesNamesStartingWith",
data: function()
{
return {Param: $("#TxtName").data("kendoAutoComplete").value()};
},
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'json'
},
parameterMap: function(options)
{
return kendo.stringify(options);
}
},
schema:
{
data: function(data)
{
return data.d;
}
}
},
dataTextField: "Text",
dataValueField: "Id",
placeholder: "Select Employee...",
select: function (data)
{
if (data.item == null) return;
var DSEmployees = $("#TxtName").data("kendoAutoComplete").dataSource;
Employees.SelectedText = $((data.item)[0]).text();
Employees.SelectedValue = ($.grep(DSEmployees.view(), function(Item, Index)
{
return (Item.Text == Employees.SelectedText);
}))[0].Id;
$("#HdfEmployees").val(JSON.stringify(Employees));
$('#DivMessage').prepend('Name : ' + Employees.SelectedText + ', Id : ' + Employees.SelectedValue + '<br />');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID = "TxtName" runat = "server" />
<asp:HiddenField ID = "HdfEmployees" runat = "server" />
<asp:Button ID = "BtnSubmit" runat = "server" Text = "Submit"
onclick="BtnSubmit_Click" />
<hr />
<div id = "DivMessage" runat = "server"> </div>
</div>
</form>
</body>
</html>
ASPX Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../../kendoui.web.2012.1.322.open-source/js/jquery.min.js" type="text/javascript"></script>
<script src="../../JavaScript/JSON2.js" type="text/javascript"></script>
<script src="../../kendoui.web.2012.1.322.open-source/js/kendo.web.min.js" type="text/javascript"></script>
<link href="../../kendoui.web.2012.1.322.open-source/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../kendoui.web.2012.1.322.open-source/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="../../kendoui.web.2012.1.322.open-source/source/js/kendo.binder.js" type="text/javascript"></script>
<script type = "text/javascript">
var Employees;
$(document).ready(function ()
{
Employees = JSON.parse($("#HdfEmployees").val());
var autoComplete = $("#TxtName").kendoAutoComplete(
{
minLength: 1,
dataSource:
{
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport:
{
read:
{
url: "Ideal.asmx/GetEmployeesNamesStartingWith",
data: function()
{
return {Param: $("#TxtName").data("kendoAutoComplete").value()};
},
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'json'
},
parameterMap: function(options)
{
return kendo.stringify(options);
}
},
schema:
{
data: function(data)
{
return data.d;
}
}
},
dataTextField: "Text",
dataValueField: "Id",
placeholder: "Select Employee...",
select: function (data)
{
if (data.item == null) return;
var DSEmployees = $("#TxtName").data("kendoAutoComplete").dataSource;
Employees.SelectedText = $((data.item)[0]).text();
Employees.SelectedValue = ($.grep(DSEmployees.view(), function(Item, Index)
{
return (Item.Text == Employees.SelectedText);
}))[0].Id;
$("#HdfEmployees").val(JSON.stringify(Employees));
$('#DivMessage').prepend('Name : ' + Employees.SelectedText + ', Id : ' + Employees.SelectedValue + '<br />');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID = "TxtName" runat = "server" />
<asp:HiddenField ID = "HdfEmployees" runat = "server" />
<asp:Button ID = "BtnSubmit" runat = "server" Text = "Submit"
onclick="BtnSubmit_Click" />
<hr />
<div id = "DivMessage" runat = "server"> </div>
</div>
</form>
</body>
</html>