jquery - Kendo grid ajax返回数据但未渲染，无错误

Question

使用开源剑道网络的 MVC 3 Web 应用程序。

Controller 将数据传递到 View ，剑道渲染完美。

我希望能够搜索名字和姓氏，因此我有文本框和搜索按钮。搜索按钮会触发对具有 json 结果的方法的 ajax 调用。使用网络开发人员我可以看到请求成功并返回，并且包含数据，但它不显示。我使用的是表，而不是 div，所以我不必将数据绑定(bind)到列。我见过一些解决方案，但他们都假设我有 mvc 插件，但我没有。

Controller :

    [HttpGet]
    public ActionResult Index()
    {
        var model = new List<PersonViewModel>();

        model = repo.GetPeople();


        return View(model);
    }



    public JsonResult _SearchResult(string fname, string lname)
    {
        var personResult = repo.GetSearchResult(fname, lname);

        return Json(personResult, JsonRequestBehavior.AllowGet);
    }

}

使用jquery查看:

        <div id="search-index">
                <div class="editor-field">   
                    <label>First Name:</label>
                    @Html.TextBox("FirstName")

                    <label style = "margin-left: 15px;">Last Name:</label>
                    @Html.TextBox("LastName", "", new { style = "margin-right: 15px;" })
                </div>            
                <div id="search-controls-index">
                      <input type="button" id="searchbtn" class="skbutton" value="Search" />
                      <input type="button" id="addPersonbtn" class="skbutton" value="Add New Person" onclick="location.href='@Url.Action("AddPerson", "Person")'"/>
                </div>
        </div>

        <div id="result-list-index">            
             <table id="index-grid">
                   <thead>
                            <tr>
                                <th>
                                    First Name
                                </th>
                                <th>
                                    Last Name
                                </th>
                                <th>
                                    Gender
                                </th>
                                <th>
                                    Date of Birth
                                </th>
                                <th>
                                    Is a Student?
                                </th>
                                <th>
                                    Actions
                                </th>
                            </tr>
                    </thead>
                @if (Model.Count() < 1)
                {
                                            <tr>
                                            <td colspan=7>
                                                There are currently no trespassers in the trespass database - this is a partial view.
                                            </td>
                                            </tr>
                }
                else
                {
                    foreach (var item in Model)
                    {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.FirstName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.LastName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Gender)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.DOB)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.IsStudent)
                        </td>
                        <td>
                            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })
                        </td>
                    </tr>
                    }
                }

        </table>        



</div>

<script type="text/javascript">

    $(document).ready(function () {


            $('#index-grid').kendoGrid({
                height: 370,
                sortable: true,
                scrollable: true,
                pageable: true,
                dataSource: { pageSize: 8 }
            });


           $("#searchbtn").on('click', function () {
                var fsname = $("#FirstName").val();
                var ltname = $("#LastName").val();

                    $.ajax({
                        type: 'GET',
                        url: '@Url.Content("~/Home/_SearchResult")',
                        data: { fname: fsname, lname: ltname },
                        success: function (data) {
                            $('#index-grid').html(data);
                        },
                        error: function () {
                            $("#index-grid").html("An error occured while trying to retieve your data.");
                        }
                    });
        });
    });                    
 </script>

不知道我哪里出错了。我认为这与从请求返回数据的方式有关，就像存在某种兼容性问题，因此无法呈现。让我知道您对去哪里寻找的想法。

Answer 1

尽管我使用了网格的 MVC 包装器，但由于遇到了类似的问题，我最终来到了这里。没有错误，JSON 返回，网格没有返回任何内容。最后，事实证明，我忘记了 Controller 方法中的一件简单的事情，即返回网格数据。

我的方法看起来像这样:

public JsonResult _SearchResult([DataSourceRequest]DataSourceRequest request)
{
    var personResult = repo.persons();

    return Json(personResult.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

缺少“ToDataSourceResult”调用。添加它解决了这个问题。这将返回的 JSON 格式更改为:

{"Data":[],"Total":0,"AggregateResults":null,"Errors":null}

现在解决你的问题:

您正在尝试在 DOM 中插入 JSON，并且没有使用 kendo 网格(或数据源)来更新自身。看看这里的演示: http://demos.kendoui.com/web/grid/remote-data.html