Hi everybody,

I am trying to implement a flexgrid in my view. I found a really beginner sample (with the sample code) which is working Ok for me.
This is the link

http://mvc4beginner.com/Sample-Code/Insert-Update-Delete/Asp-.Net-MVC-Ajax-Insert-Update-Delete-Using-Flexigrid.html

I want to implement it in my application for the Clients view.

So, in the Client.cshtml I added the following code (practically the same as in that sample):

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

<h2>Clients</h2>

<br />

@*<div id="progress" class ="ui-progressbar">
    Loading...
</div>*@

@*@using (Ajax.BeginForm("Client", "Client",
    new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "flexClients"
      
    }))
    
{
    <fieldset>
        <legend>Search</legend>
        <label for="clientNo">Client No: </label>
        <input type="number" name="searchClientNo" class="numericOnly" /><br />
        <label for="clientName">Client Name: </label>
        <input type =  "text" size =25 data-autocomplete="@Url.Action("QuickSearch", "Client")"  name ="searchClientName" />
        <div>
            <input type="submit" value="Find / Refresh" />
        </div>
    </fieldset>
    
}*@

<br />
<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;">
<table id="flexClients" style="display:none">
</table>
</div>
<script type="text/javascript">
    $("#flexClients").flexigrid({
        url: '/Client/Client/',
        dataType: 'json',
        colModel: [
        { display: 'Client Id', name: 'ClientId', width: 100, sortable: true, align: 'center' },
        { display: 'Client #', name: 'ClientNo', width: 100, sortable: true, align: 'center' },
        { display: 'Name', name: 'ClientName', width: 350, sortable: true, align: 'center' },
        { display: 'Contact 1', name: 'Contact1', width: 350, sortable: true, align: 'center' },
        ],
        buttons: [
        { name: 'Add', bclass: 'add', onpress: test },
        { name: 'Edit', bclass: 'edit', onpress: test },
        { name: 'Delete', bclass: 'delete', onpress: test },
        { separator: true }
        ],
        searchitems: [
        { display: 'Client Name', name: 'ClientName' },
        ],
        sortname: "ClientName",
        sortorder: "asc",
        usepager: true,
        title: 'Name',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 900,
        onSubmit: addFormData,
        height: 200
    });

    //This function adds parameters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit			
    function addFormData() {

        //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
        var dt = $('#sform').serializeArray();

        $("#flexClients").flexOptions({ params: dt });

        return true;
    }

    $('#sform').submit(function () {

        $('#flexClients').flexOptions({ newp: 1 }).flexReload();
        alert("Hello World");
        return false;
    });

    function test(com, grid) {
        if (com === 'Delete') {
            if (confirm("Are you sure you want to delete " + $('#ClientName').val($('.trSelected td:eq(2)').text()) + "?"))
                return false;

            $('#fntype').val('Delete');
            $('#ClientId').val($('.trSelected td:eq(0)').text());
            $('#ClientNo').val('');
            $('#ClientName').val('');
            $('#Contact1').val('');

            $('.trSelected', grid).each(function () {
                var id = $(this).attr('id');
                id = id.substring(id.lastIndexOf('row') + 3);

                addFormData(); $('#flexClients').flexOptions({ url: '/Client/Index/' }).flexReload();
            });

            clearAll();

        } else if (com === 'Add') {

            $("#sform").dialog({
                autoOpen: false,
                show: "blind",
            });
            $("#sform").dialog("open");

            $('#fntype').val('Add');
            $('#ClientNo').val('');
            $('#ClientName').val('');
            $('#Contact1').val('');

        } else if (com === 'Edit') {

            $('.trSelected', grid).each(function () {

                $("#sform").dialog({
                    autoOpen: false,
                    show: "blind",
                    width: 400,
                    height: 300
                });
                $("#sform").dialog("open");

                $('#fntype').val('Edit');
                $('#ClientNo').val($('.trSelected td:eq(1)').text());
                $('#ClientName').val($('.trSelected td:eq(2)').text());
                $('#Contact1').val($('.trSelected td:eq(3)').text());

            });

        }
    }

    function clearAll() {
        $('#fntype').val('');
        $('#ClientNo').val('');
        $('#ClientName').val('');
        $('#Contact1').val('');

    }

</script>
<div style="display:none">
<form id="sform">
<input type="hidden" id="fntype" name="fntype">
<input type="hidden" id="ClientId" name="ClientId">
<label for="clientNo">Client No: </label>
<input type="number" name="clientNo" class="numericOnly" /><br />
<label for="clientName">Client Name: </label>
<input type =  "text" size =25 name ="clientName" /><br />
<input type="button" value="Submit" onclick="addFormData();$('#flexClients').flexOptions({ url: '/Client/Client/'}).flexReload();clearAll();$('#sform').dialog('close');">
<input type="button" value="Cancel" onclick="$('#sform').dialog('close');" />
</form>
</div>

And in the ClientController again I followed that sample and have this code:

#region Client
        [HttpGet]
        public ActionResult Client(int id = 0)
        {
            return View();
        }

        [HttpPost]
        public ActionResult Client(int? searchClientNo = null, string searchClientName = null)
        {
            // Assume we want to select everything
            var clients = Db.Clients; // Should set type of clients to IQueryable<Clients>

            if ((searchClientNo ?? 0) != 0) //Number was supplied
                clients = clients.Where(c => (c.Number == searchClientNo));

            // If clientNo was supplied, clients is now filtered by that. If not, it still has the full list. The following will further filter it.
            if (!String.IsNullOrWhiteSpace(searchClientName)) // Part of the name was supplied
                clients = clients.Where(c => (c.Name.Contains(searchClientName)));
        
            int page = int.Parse(Request.Form["page"]);
            int rp = int.Parse(Request.Form["rp"]);
            string qtype = Request.Form["qtype"].ToString();
            string query = Request.Form["query"].ToString();
            string sortname = Request.Form["sortname"].ToString();
            string sortorder = Request.Form["sortorder"].ToString();

            switch (Request.Form["fntype"])
            {
                case "Add":
                    if (Request.Form["ClientId"] != "" && Request.Form["ClientId"] != null)
                    {
                        // Logic to add new client
                        
                    }
                    break;
                case "Edit":
                    if (Request.Form["ClientId"] != "" && Request.Form["ClientId"] != null)
                    {
                        // Logic to Edit a Client
                    }
                    break;
                case "Delete":
                    if (Request.Form["ClientId"] != "" && Request.Form["ClientId"] != null)
                    {
                        int clientId = Convert.ToInt32(Request.Form["ClientId"]);
                        var client = Db.Clients.Single(c => c.Id == clientId);

                        Db.DeleteClient(client);
                    }
                    break;
            }            

            if (!string.IsNullOrEmpty(sortname) && !string.IsNullOrEmpty(sortorder))
            {
                clients = clients.OrderBy(sortname, (sortorder == "asc"));
            }

            if (!string.IsNullOrEmpty(qtype) && !string.IsNullOrEmpty(query))
            {
                clients = clients.Like(qtype, query);
            }

            clients = clients.Skip((page - 1) * rp).Take(rp);

            var flexgrid = new
            {
                page = page,
                total = clients.Count(),
                rows = clients
                .Select(x => new
                {
                    id = x.Id,
                    cell = new { x.Number, x.Name, x.Contact1 }
                }
                )

            };


            return Json(flexgrid, JsonRequestBehavior.AllowGet);
        }

        #endregion Client

The only difference between the sample and my application is:
1. He added flexigrid.css and Images under Content/Themes/Dev and I added them under Content/Themes/FlexGrid folders
2. He doesn't use bundles and my _layout.cshtml looks like

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/css")
        @Styles.Render("~/Content/themes/FlexGrid/css")
        @Scripts.Render("~/bundles/modernizr")
        
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                @*<div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>*@
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("New Order", "Index", "ClientOrder",null, new {title= "Create New Order for Selected Client"})</li>
                            <li>@Html.ActionLink("Clients", "Client", "Client",null, new {title= "Clients Maintenance"})</li>
                            <li>@Html.ActionLink("Operators", "Index", "Operator",null, new {title= "Operators Maintenance"})</li>
                            <li>@Html.ActionLink("History", "History", "ClientOrder",null, new {title= "View Clients Orders History"})</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>© @DateTime.Now.Year - Card Numbers</p>
                </div>
            </div>
        </footer>
        
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/flexgrid") 

        <script src ="@Url.Content("~/Scripts/CardNumbers.js")" type = "text/javascript"></script>
        @RenderSection("scripts", required: false)
    </body>
</html>

---------------
Now, as I said, his sample works fine for me, but in my application the HttpGet Client method is invoked from the Controller, but the HttpPost method is never called and so when I run my application I see the empty grid and the progress bar working.

Do you see what I may be doing wrong here?

Thanks a lot in advance.