使用局部视图搜索 Telerik MVC 2.0 Grid

Question

我想搜索 Telerik MVC 2.0 GridView 我有一个“Index”视图，首先在其上呈现 Grid，然后单击“显示历史记录”@987654321 @ 打开一个 PartialView "SearchGrid" .

在此视图中，有 2 个 Telerik MVC DatePickers 和一个提交按钮。单击提交按钮时，将 DatePicker 值发送回 UploadFiles 控制器 SearchByDates( DateTime? frmDate,DateTime? toDate) 行动。

在此操作中，我使用 WorkerService 类和 Services 类从 DB 获取 UpdateDates 即 frmDate & toDate 值之间的更新记录。

到目前为止一切正常，但我的问题在于 Ajax，在 UploadFilesViewModel 的 GetUploadDescriptor 与 UploadFilesGrid 绑定后，再次调用 SearchByDates action ，再次调用 JS 代码上的 url.Action 并且不传递参数.最初调用此操作时，FormCollection 不包含任何内容，但下次进行新调用时，FormCollection 值包含 frmDate,toDate。

最后显示一个空的 Grid。我不知道我做错了什么..

源代码：-

     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

您同时收到 2 个请求：

• 由 Ajax.BeginForm;

• 通过定义 onclick="aClick();"提交按钮中的属性（“aClick”函数在其主体内触发另一个 ajax 请求）。

我建议您从提交按钮中删除 onclick 属性。 如果您需要在 ajax 表单提交之前运行 javascript 路由，您可以定义 AjaxOptions.OnBegin 选项：

新的 AjaxOptions{ ..., OnBegin="onBegin" }

function onBegin(e){
  ...
}

在这个函数里面你可以做：

• 更改请求的正文值；
• 通过返回 false 值取消提交。

如果您的 DatePicker 控件位于内部

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

这可以确保您的 DatePickers 值也被提交。

Answer 2

您不应在提交按钮上定义 onclick 事件处理程序。 Ajax.BeginForm 构造通过您的 DatePickers 的值自行发出 ajax 请求。