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; 
});