json - json数据显示不正确

Question

我使用了 flexigrid 并且应该在其中显示的数据显示在白页中，图像在这里：

这是我的看法：

@using (Html.BeginForm("JsonEmployee", "Employees", FormMethod.Post))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <h5>
            ENTER A NAME TO FILTER THE LIST:</h5>
        <div style="float: left">
            <input name="nameSelected" type="text" /> &nbsp  </div>
        <div style="float: left">
            <input class="btn btn-inverse" type="submit" value="FILTER" /></div>
    </fieldset>
}
<table class="flex" style="display: none">
</table>

<script type="text/javascript" language="javascript">
$('.flex').flexigrid({
    url: '/Employees/JsonEmployee',
    dataType: 'json',
    method: 'GET',
    colModel: [
{ display: 'NUMBER', name: 'number', width: 200, sortable: true, align: 'center' },
{ display: 'NAME', name: 'name', width: 300, sortable: true, align: 'center' },
{ display: 'ROLE', name: 'role', width: 200, sortable: true, align: 'center'}],
    searchitems: [
    { display: 'NUMBER', name: 'number' },
    { display: 'NAME', name: 'name', isdefault: true }
    ],
    sortname: "number",
    sortorder: "name",
    usepager: true,
    title: 'Employees',
    useRp: true,
    rp: 15,
    showTableToggleBtn: true,
    width: 950
});
</script>

这是我的控制器：

    [Authorize(Users = "Admin")]
    [HttpPost]
    public ActionResult JsonEmployee(String nameSelected)
    {
        CacheClear();
        var employees = db.Employees.Where(r => r.Name.Contains(nameSelected)).OrderBy(r => r.Name);
        var res = new
        {
            page = 1,
            total = employees.Count(),
            rows = employees.Select(x => new { x.Number, x.Name, x.Role })
                .ToList()
                .Select(x => new
                {
                    id = x.Number,
                    cell = new string[]
                    {
                    x.Number,
                    x.Name,
                    x.Role
                    }
                }).ToArray(),
        };
        return Json(res, JsonRequestBehavior.AllowGet);
    }

我有一个接受来自用户的字符串输入的表单。如果用户单击提交按钮，我页面中的 flexigrid 应该由过滤列表填充。但是，页面重定向到带有 json 数据的白页只是就像上面的图片...

Answer 1

您已经创建了一个指向该/Employees/JsonEmployee操作的 HTML 表单。因此，当您提交此表单时，浏览器通常会向此控制器操作发送 POST 请求并重定向到它并显示其执行结果。这就是 HTML 的工作原理。如果您想留在同一页面上，您可以 AJAXify 这个表单并取消默认操作。像这样：

$('form').submit(function () {
    // Send an AJAX request to the controller action that this HTML <form>
    // is pointing to in order to fetch the results in a JSON form
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            // When the AJAX request succeeds we get the result returned
            // by the controller action which represents the JSON data source
            // for the flexgrid. So all that's left is rebind the grid with
            // this new data source:
            $('.flex').flexAddData(result);
        }
    });

    // Prevent the browser from redirecting to the /Employees/JsonEmployee action
    return false;
});