剑道网格ajax返回数据，但不呈现，没有错误

Question

MVC 3 web应用程序使用开源剑道web。

控制器将数据传递给视图，kendo呈现完美。

我希望能够搜索名字和姓氏，所以我有文本框和搜索按钮。搜索按钮触发对方法的ajax调用，并产生json结果。使用web开发人员，我可以看到请求成功地去和回来，并包含数据，但它不显示。我正在使用一个表，而不是div，所以我不应该绑定到列的数据。我已经看到了一些解决方案，但他们都假定我有mvc插件，我没有。

控制器:

    [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返回，grid没有返回任何东西。最后，事实证明，我忘记了控制器方法中的一件简单的事情，即为网格返回数据。

我的方法看起来像这样:

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，并且没有使用剑道网格(或数据源)来更新自己。看看这里的演示:http://demos.kendoui.com/web/grid/remote-data.html