使用搜索结果填充剑道网格MVC应用程序

Question

我一直在开发一个实现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);
        }
    }
})

Answer 1

您的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);
}