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的工作原理。如果你想留在同一页面上，你可以AJAX化这个表单并取消默认操作。像这样：

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