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