jqGrid search by textbox at click in a button

Question

I want to search by clicking a button "Buscar", pass text "teeeeeext" and "ALTA" to search in function "Buscar Index" and then reload the jqGrid to show the result of search with the parameters.

My page:

My code to load the jqGrid:

$("#jqGrid").jqGrid({
            url: '@Url.Action("BuscarIndex")',
                    styleUI: 'Bootstrap',
                    responsive:true,
                    datatype: "json",
                    colModel: [
                        { label: 'Id', name: 'Id', width: 30, key: true, hidden: true, sortable: false },
                        { label: 'Clave', name: 'Clave', width: 30, sortable: false,align: 'right' },
                        { label: 'Nombre', name: 'NombreCompleto', width: 150, sortable: false },
                        { label: 'Perfil', name: 'Perfil.Nombre', width: 150, sortable: false },
                        { label: 'Estatus', name: 'Estatus', width: 45, sortable: false,align: 'center', formatter: formatEstatus },
                        { label: 'Modificar', name: '', width: 45, sortable: false, align: 'center', formatter: formatModif },
                    ],
                    width: 800,
                    height: 250,
                    viewrecords: true,
                    rowNum: 20,
                    pager: "#jqGridPager"
        });

public JsonResult BuscarIndex(string sidx, string sord, int page, int rows,bool _search,string searchField,string searchOper,string searchString)
        {                       
            //SEARCH 
            return Json(resultadoGridBT,JsonRequestBehavior.AllowGet);
        }

<div class="form-group">        
        @Html.LabelFor(model => model.Buscar, htmlAttributes: new { @class = "control-label col-md-1" })
        <div class="col-md-3">
            @Html.EditorFor(model => model.Buscar, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Buscar, "", new { @class = "text-danger" })
        </div>

        @Html.LabelFor(model => model.Estatus, htmlAttributes: new { @class = "control-label col-md-1" })
        <div class="col-md-2">
            @Html.DropDownList("Estatus", null, "(TODOS)", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Estatus, "", new { @class = "text-danger" })
        </div>
        <button id="buscar" type="button" class="btn btn-default">Buscar</button>
    </div>        
        <div class="col-md-12">
            <table id="jqGrid"></table>
            <div id="jqGridPager"></div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
            </div>
        </div>
    </div>

Answer 1

Answer:

$('#btnBuscar').click(function () {              
            fnBuscar();
        });

 function fnBuscar(){
            var rules = [];
            var $grid = $("#jqGrid");
            var postData = $grid.jqGrid('getGridParam', 'postData');
            rules.push({ field: 'buscar', op: "eq", data: $("#Buscar").val() });
            rules.push({ field: 'estatus', op: "eq", data: $("#Estatus").val() });

            postData.filters = JSON.stringify({
                groupOp: "AND",
                rules: rules
            });
            $grid.jqGrid("setGridParam", { search: true });
            $grid.trigger("reloadGrid", [{ page: 1, current: true }]);
        }

public JsonResult BuscarIndex(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString, string filters)
        {                       
             //Fill resultadoGridBT                        
            return Json(resultadoGridBT,JsonRequestBehavior.AllowGet);
        }