0
我一直在研究实现CRUD操作的应用程序。我对剑道相当陌生。我创建了一个可观察对象，这将允许我将一个对象发送给我的控制器。然后，我的控制器获取对象并筛选出客户端名称，然后将其发送到调用我的数据库并搜索用户名的repo类。一旦在列表中检索到结果，它们将被发送回我的控制器，然后将其作为将填充到我的网格的JSON对象返回。从Kendo的例子和文档我已经创建了下面的代码，但Kendo网格似乎并没有填充。使用搜索结果填充Kendo网格MVC应用程序
这是我的JS /剑道脚本：
$(document).ready(function() {
var viewModel = kendo.observable({
client: {
clientName: "",
clientNumber: "",
clientType: "",
},
dropdownlist: ["HCC", "Tax", "Audit", "Advisory"],
create: function (e) {
var userRequest = $("#clientname").val();
if (userRequest) {
client.read();
client.sync();
}
if (!userRequest) {
e.preventDefault();
alert("Please Enter Client Name");
}
}
});
kendo.bind($("#engagementForm"), viewModel);
var client = new kendo.data.DataSource({
transport: {
read: {
url: "Client/SearchClient",
contentType: "application/json; charset=utf-8",
dataType: "json",
method: "POST",
},
destroy: {
url: "Client/DeleteClient",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
complete: function (e) {
alert("Client Removed");
}
},
update: {
url: "Client/EditCustomer",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
complete: function (e) {
alert("Client Updated");
}
},
create: {
url: "Client/CreateInformation",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
complete: function (e) {
alert("Client Created");
}
},
parameterMap: function (data, operation) {
switch (operation) {
case "read":
return JSON.stringify(viewModel);
break;
case "create":
return JSON.stringify(data);
break;
case "update":
return JSON.stringify(data);
break;
case "destroy":
return JSON.stringify(data);
break;
}
}
},
schema: {
data: "list",
model: {
id: "clientNumber",
fields: {
clientNumber: { type: "int" },
clientName: { type: "string" },
clientType: { type: "string" },
},
}
}
});
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "Client/SearchClient",
contentType: "application/json; charset=utf-8",
}
},
toolbar: ["create"],
columns: [{
field: "clientNumber",
title: "Client Number",
},
{
field: "clientName",
title: "Client Name",
},
{
field: "clientType",
title: "Client Type",
editor: function (e) {
$('<input data-role="dropdownlist" id = "dlist" data-bind="source: dropdownlist , value: clientType">')
.appendTo(e)
.kendoDropDownList({
optionLabel: "Engagement Types",
dataSource: viewModel.dropdownlist,
});
}
},
{
command: ["edit", "destroy"]
}],
editable: "popup",
edit: function (e) {
if (e.model.isNew() == false) {
$('input[name=clientNumber]').parent().html(e.model.clientNumber);
}
}
})
});
这是我的控制器将接收来自用户想要的搜索：
[HttpPost]
public ActionResult SearchClient(ClientInfo client)
{
Repo repo = new Repo();
var search = client.clientName; // Just want to get the client name
repo.SearchClient(search); // Sending Just the Client Name
JsonResult result = new JsonResult();
return Json(new
{
list = result,
//count = result.Count
}, JsonRequestBehavior.AllowGet);
}
这是我的回购类，将用于搜索客户名称：
public List<ClientInfo> SearchClient(string clientName)
{
List<ClientInfo> client = new List<ClientInfo>();
using (SqlConnection conn = new SqlConnection(connectionString))
{
conn.Open();
try
{
SqlCommand command = new SqlCommand("SELECT * FROM Table_1 WHERE ClientName [email protected]", conn);
command.Parameters.AddWithValue("@clientName", clientName);
SqlDataReader reader = command.ExecuteReader();
while (reader.Read())
{
ClientInfo data = new ClientInfo();
data.clientName = reader["ClientName"].ToString();
data.clientNumber = reader["ClientNumber"].ToString();
data.clientType = reader["ClientType"].ToString();
client.Add(data);
}
}
catch
{
throw;
}
}
return client;
}
修订15年12月21日下午1:50 EST
我采取了这种方法来简化事情。这应该工作，但我得到了提琴手404错误。
我对我的问题更新控制器：
public ActionResult SearchResult()
{
Repo repo = new Repo();
ClientInfo data = new ClientInfo();
List<ClientInfo> searchResult = new List<ClientInfo>();
searchResult = repo.SearchClient(data);
JsonResult result = new JsonResult();
result.Data = searchResult;
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return result;
}
[HttpPost]
public ActionResult SearchClient(ClientInfo client)
{
Repo repo = new Repo();
repo.SearchClient(client);
return null;
}
我的更新剑道网：
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "Client/SearchResult",
contentType: "application/json; charset=utf-8",
type: "json",
}
},
toolbar: ["create"],
columns: [{
field: "clientNumber",
title: "Client Number",
},
{
field: "clientName",
title: "Client Name",
},
{
field: "clientType",
title: "Client Type",
editor: function (e) {
$('<input data-role="dropdownlist" id = "dlist" data-bind="source: dropdownlist , value: clientType">')
.appendTo(e)
.kendoDropDownList({
optionLabel: "Engagement Types",
dataSource: viewModel.dropdownlist,
});
}
},
{
command: ["edit", "destroy"]
}],
editable: "popup",
edit: function (e) {
if (e.model.isNew() == false) {
$('input[name=clientNumber]').parent().html(e.model.clientNumber);
}
}
})
为什么不使用剃须刀来创建您的网格？而且，通过查看Kendo的例子，你是如何得到这段代码的？你的代码与Kendo的例子没有任何关系。 – ataravati
是的，我知道这一点，但我正在为此工作的公司想要消除剃刀和Ajax呼叫。这是一个无赖的弓，他们强加给这个新人！ – EasyE