使用搜索结果 MVC 应用填充 Kendo 网格

Question

我一直在开发一个实现 CRUD 操作的应用程序。我是 Kendo 的新手。我创建了一个可观察对象，它允许我将整个对象发送到我的控制器。然后我的控制器获取对象并过滤掉客户端名称，然后将其发送到调用我的数据库并搜索用户名的存储库 class。一旦在列表中检索到结果，它们就会被发送回我的控制器，然后 returns 它作为一个 JSON 对象将填充到我的网格中。根据 Kendo 示例和文档，我创建了以下代码，但 Kendo 网格似乎没有填充。

这是我的 JS/Kendo 脚本：

$(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 class，它将搜索客户名称：

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;

}

我更新的 Kendo 网格：

$("#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);
}

使用搜索结果 MVC 应用填充 Kendo 网格

Populating Kendo Grid With Search Results MVC app

c#

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc