0

我想搜索 Telerik MVC 2.0 GridView 我有一个“索引”视图，首先在该视图上呈现一个网格，然后单击“显示历史”Ajax.ActionLink打开一个 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;
                }
4

2 回答 2

0

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

于 2012-07-28T19:43:00.317 回答
0

您同时收到 2 个请求：

  • 通过 Ajax.BeginForm；

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

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

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

function onBegin(e){
  ...
}

在此函数中，您可以执行以下操作：

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

如果您的 DatePicker 控件位于 <% 内部，则使用 (Ajax.BeginForm("SearchByDates","UploadFiles".. 构造这些都是所需的更改。否则，您需要以这种方式定义 onBegin 函数：

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 值也被提交。

于 2012-08-07T12:36:02.230 回答