json data not showing properly

Question

i used flexigrid and the data that are supposed to be displayed in it are displayed instead in a white page, image here:

here is my view:

@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>

and here is my controller:

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

i have a form which accepts a string input from users.. if the user clicks the submit button, the flexigrid in my page should be populated by a filtered list.. however, the page redirects to a white page with the data of json just like the picture above...

Answer 1

You have created an HTML form pointing to the /Employees/JsonEmployee action. So when you submit this form it is normal that the browser will send a POST request to this controller action and redirect to it and show the results of its execution. That's how HTML works. If you want to stay on the same page you could AJAXify this form and cancel the default action. Like this:

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