使用搜索结果填充剑道网格MVC应用程序
本文关键字:网格 MVC 应用程序 搜索结果 填充 | 更新日期: 2023-09-27 18:27:34
我一直在开发一个实现CRUD操作的应用程序。我是剑道的新手。我已经创建了一个可观察的对象,这将允许我将整个对象发送到我的控制器。然后,我的控制器获取对象并过滤掉客户端名称,然后将其发送到一个repo类,该类调用我的数据库并搜索用户名。一旦在列表中检索到结果,它们就会被发送回我的控制器,然后控制器将其作为JSON对象返回,并填充到我的网格中。根据Kendo示例和文档,我创建了以下代码,但Kendo网格似乎没有填充。
这是我的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);
}
这是我的Repo类,它将搜索客户端名称:
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 =@clientName", 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;
}
更新时间:美国东部时间2015年12月21日下午1:50
我采用这种方法来简化事情。这应该有效,但我在Fiddler中出现了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);
}
}
})
您的repo.SearchClient(search)
返回List<ClientInfo>
,而result
变量为空JsonResult
。这样做:
[HttpPost]
public ActionResult SearchClient(ClientInfo client)
{
Repo repo = new Repo();
var search = client.clientName; // Just want to get the client name
return Json(new
{
list = repo.SearchClient(search),
//count = result.Count
}, JsonRequestBehavior.AllowGet);
}