首页 > 解决方案 > 用于替换 Kendo Grid 中数据的 Javascript 函数

问题描述

我在 .NET Core 2.0 MVC Web 应用程序的起始页上有一个 Kendo Grid。数据源在页面加载时通过 ViewData 填充:

public IActionResult Index()
{
    var allForms = formsDB.FormHeader.Select(x => x);
    ViewData["AllForms"] = allForms;
    <...>

    return View();
}

数据源对象 (FormHeader) 包含一个带有员工代码的列。我的剑道网格中的一列当前正在显示员工代码,但我想通过 .ClientTemplate 显示全名:

@(Html.Kendo().Grid<Forms.Models.FormHeader>()
          .Name("HeadersMasterGrid")
          .BindTo((IQueryable<Forms.Models.FormHeader>)ViewData["AllForms"])
          .Pageable()
          .Columns(columns =>
          {
              columns.Bound(p => p.EmployeeCode).Title("Employee")
                    /*.ClientTemplate("#=getEmployeeName(EmployeeCode)#")*/;
          <..>

我想显示员工的名字和姓氏而不是代码。我在表单控制器中设置了一个 IAction 结果来接收员工代码并返回全名(通过 ~/Form/GetEmployee/):

public ActionResult GetEmployee(string id)
    {
        var employee = theDB.EmployeeMasters.FirstOrDefault(x => x.EmployeeCode.Trim() == id.ToUpper());
        BasicEmployee basicEmployee = new BasicEmployee(employee.FirstName, employee.LastName, id.Trim());
        //return Json(basicEmployee);
        return Json(basicEmployee.FullName);
    }

最后,我在视图中添加了一些 jQuery 脚本,希望能打开 URL,检索全名,并将其返回到 Kendo Grid 列的 .ClientTemplate 中。您可以看到我尝试只返回全名,但也返回整个对象,然后从对象解析/返回全名。下面块中的第二个函数是我在收到有关承诺/回调的一些指令(仍然很模糊)后最近的尝试。

@*function getEmployeeName(empCode) {
    $.getJSON('@Url.Action("GetEmployee", "Form")' + "/" + empCode,
        function(data) {
            //var response = $.parseJSON(data);
            //return response.FullName.toString();
            return $.parseJSON(data);
        }, 'json');
}*@

function getEmployeeName(empCode) {
    var promise = $.getJSON('@Url.Action("GetEmployee", "Form")' + "/" + empCode);
    $.when(promise).done(function(data) {
        return JSON.stringify(data);
    });
}

我在 Kendo docs、Google 和两个面向开发人员的 Slack 工作区上花费了相当多的时间,但我没有找到任何可行的方法。在这个项目之前,我没有使用 Javascript 或 jQuery 的经验,并且仍处于学习阶段。我知道我很可能会错误地解决这个问题(或错过一个简单的解决方案),但我想知道我如何才能做到这一点。

标签: javascriptc#jquerykendo-gridkendo-asp.net-mvc

解决方案


推荐阅读