Search Telerik MVC 2.0 Grid using a partial view

Question

I want to search Telerik MVC 2.0 GridView I have a "Index" View on which a Grid is rendered at first then clicking on a "Show History" Ajax.ActionLink opens a PartialView "SearchGrid" .

In this View there are 2 Telerik MVC DatePickers and a submit button.. On clicking of Submit button sends DatePicker Values back to UploadFiles Controller's SearchByDates( DateTime? frmDate,DateTime? toDate) Action.

Here in this action I am fetching records for Updates in between UpdateDates i.e. frmDate & toDate Values, from DB using WorkerService class and Services class.

Everything works fine till this point, But My problem is with Ajax , after UploadFilesViewModel's GetUploadDescriptor is bound with UploadFilesGrid , again a call is made to SearchByDates action , url.Action which is on JS code is again called and not parameters are passed. When at first the call to this action is made FormCollection doesn't contain anything but when next time a new call is made FormCollection values contain frmDate,toDate.

Finally an empty Grid is displayed. I don't know what I am doing wrong ..

Source Code :-

     My GridView:-
<div id="result">
   <div>
      <%: Ajax.ActionLink ( "Show History", "SearchGrid", null, new AjaxOptions { HttpMethod = "Get",  InsertionMode = InsertionMode.Replace, UpdateTargetId = "renderForm", OnSuccess = "updateTarget" }, new { @class = "t-button" } )%>
    </div>
  <div id="di">
   <% Html.Telerik().Grid<UploadedFilesDescriptor>()
         .Name("UploadedFilesGrid")
       .DataKeys(datakeys => datakeys.Add(m => m.Id))
      .ClientEvents ( events => events.OnDataBound ( "rebindFileListGrid" ) )

        columns.Bound(c => c.UploadedDate)
                .HtmlAttributes(new { @style = "text-align:center;" })
                .Width(100);                   
           })
            .DataBinding(databinding => databinding
                                 .Ajax()
                                 .Select("GetUploadedFilesList",     "UploadFiles"))
                                  .EnableCustomBinding ( true )                
                      .Render();
                     %>
                   </div>
             </div>


 : My SearchGrid PartialView :-

 <% using (Ajax.BeginForm( "SearchByDates","UploadFiles",new AjaxOptions{UpdateTargetId ="divUploadGrid",LoadingElementId = "LoadingImage"},new {@id= "itemForm"}))
{ %>
      //Two Telerik MVC DatePickers named "frmDate" and " toDate"
  <input type="submit" id="ProfileSearchSubmit" name="ProfileSearchSubmit" onclick="aClick();" value="Search" /> 

  <div id="divUploadFileGrid">
   --I am again Rendering the Serached Grid with same model, columns 
  </div> 


    //my Javascript Jquery Ajax Function 
        function aClick() {
         debugger;
          var to = $('#toDate').val().toString();
         var frm = $('#frmDate').val().toString();
         var params = "frmDate=" + frm + "&toDate=" + to;
        if (params != null) {
           $.ajax({
              url: '<%= Url.Action("SearchByDates","UploadFiles") %>'+"?"+params,
              cache: false,               
             success: function (html) {
             $("#divUploadGrid").show();
               },                
             complete: function () {
              $("#LoadingImage").css("display", "none");
             $("#divUploadGrid").css("display", "block");
              $("#result").hide();
                }
              });
           }
            };

    :- Controller Action :-
      public ActionResult SearchByDates( DateTime? frmDate, DateTime?  toDate,FormCollection colletion)
           {
           try
             {
                DateTime? fromDate = frmDate.Value;
                DateTime? toDates = toDate.Value;
               UploadedFilesViewModel model = new UploadedFilesViewModel ( );
               model.GetUploadFileDescriptor = _workerService.GetUploadGridByDates(fromDate, toDates );
               return PartialView ( "SearchGrid", model );                   
            }
          catch (Exception ex)
           {
             throw ex;
           }
         return null;
         }

     :- GridAction to bind records in GridView
              public ActionResult GetUploadedFilesList ( DateTime? frmDate, DateTime? toDate )
            {        
                try
                {
                if (Request.IsAjaxRequest()&& frmDate==null&&toDate==null)
                    {
                    return View ( new GridModel ( _workerService.GetUploadedFilesList ( ) ) );
                    }
                else
                    {
                    return View ( new GridModel ( _workerService.GetUploadGridByDates ( frmDate, toDate ) ) ); 
                    }
                }
                catch (Exception ex)
                {
                    bool reThrow = ExceptionPolicyWrapper.HandleException(ex, ExceptionPolicies.MVCPolicy);
                    if (reThrow)
                        throw;
                }
                return null;
                }

Answer 1

You shouldn't define onclick event handler on your submit button. Ajax.BeginForm construct issues ajax request on its own passing your DatePickers' values.

Answer 2

You get 2 simultaneous requests:

• by Ajax.BeginForm;

• by defined onclick="aClick();" attribute in your submit button ( 'aClick' function triggers another ajax request inside its body).

I'd suggest you to remove onclick attribute from your submit button. If you need to run javascript routing before ajax form submittion you can define AjaxOptions.OnBegin option:

new AjaxOptions{ ..., OnBegin="onBegin" }

function onBegin(e){
  ...
}

Inside this function you can do:

• change the request' body value;
• cancel submittion by returning false value.

In case your DatePicker controlls are located inside <% using (Ajax.BeginForm( "SearchByDates","UploadFiles".. construct these are all changes required. Otherwise, you need to define onBegin function this way:

function onBegin(e){

var to = $('#toDate').val();
var frm = $('#frmDate').val();

var req = e.get_request();
var req_body = req.get_body();
req_body += "&frmDate=" + frm + "&toDate=" + to;

req.set_body(req_body);

return true;
}

This makes sure your DatePickers values are submitted as well.