2016-12-07 5 views
0

検索ボタンをクリックしたときに剣道グリッドにデータを表示したいが、ブラウザーでjson結果のみを返す。私はコンソールに何のエラーもありません。私が望むのは、剣道のグリッドで検索結果を返すことだけです。ページの読み込み時にデータを読み込もうとしましたが正常に動作しますが、ボタンをクリックしても機能しません。剣道Mvcを使用してボタンクリックでデータをバインドする方法

ボタンをクリックしたときにデータをグリッドに表示するにはどうすればよいですか?

マイビュー

<div> 
    </fieldset> 
    @using (Html.BeginForm("SearchNotification", "Notification", FormMethod.Post, new { role = "form" })) 
       { 

        <div class="box-footer"> 
         <button type="submit" id="btnSearch" class="btn btn-primary">Search</button> 
        </div> 

        <form role="form"> 
         <div class="box-body"> 
          <div id="divMain" class="col-md-13"> 
           <div class="form-group"> 
            @(Html.Kendo().Grid<TTAF.Portal.Parts.Web.Models.NotificationModel.notification>() 
            .Name("Grid") 
            .Columns(columns => 
            { 
             columns.Bound(x => x.distributorID).Title("Distributor Code").Width(50); 
             columns.Bound(x => x.notificationDate).Title("Date").Width(50); 
             columns.Bound(x => x.notificationType).Title("Type").Width(50); 
             columns.Bound(x => x.distributorName).Title("Name").Width(50); 
            }) 
            .AutoBind(false) 
            .Pageable(pageable => pageable 
            .Refresh(true) 
            .PageSizes(true) 
            .ButtonCount(5)) 
            .Scrollable() 
            .Filterable() 
            .Sortable() 
            .Resizable(resize => resize.Columns(true)) 
            .DataSource(dataSource => dataSource 
            .Ajax() 
            .PageSize(10) 
            .ServerOperation(false)//No post back 
            .Read(read => read.Action("SearchNotification", "Notification")))) 

           </div> 
           <br /> 
          </div> 
         </div> 
        </form> 
       } 
      </div> 
     </div> 
    </fieldset> 
</div> 

<!--Grid Stylesheet Start--> 
<link href="~/Content/Kendo/Kendo-fieldsetStyle.css" rel="stylesheet" /> 
<link href="~/Content/Kendo/kendo.common.min.css" rel="stylesheet" /> 
<link href="~/Content/Kendo/kendo.default.min.css" rel="stylesheet" /> 
<link href="~/Content/Kendo/kendo.rtl.min.css" rel="stylesheet" /> 
<!--Grid Stylesheet End--> 


@section Styles 
{ 
    @Styles.Render("~/bundles/kendo") 
    @Scripts.Render("~/bundles/jqueryval") 
} 

<!--Script Section Start--> 
@section Scripts { 
    <script src="~/Content/Kendo/js/kendo.all.min.js"></script> 
    <script src="~/Content/Kendo/js/kendo.aspnetmvc.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
     }); 
    </script> 

<!--Script Section End--> 

}

コントローラ

[HttpPost] 
    public ActionResult SearchNotification([DataSourceRequest]DataSourceRequest request, NotificationModel model) 
    { 

     try 
     { 
      string jsonReq = ApiBaseUrl + ApiSecuritySubBaseUrl + "/GetDistributorsForAdminUser/" + User.Identity.GetUserId() + "/" + User.Identity.GetUserId(); 
       string jsonResp = JsonWrapper.JsonGET(jsonReq); 

      List<DistributorSimple> ListDistrubutor = Models.DeserialiseFromJson<List<DistributorSimple>>.Deserialise(jsonResp); 
      model._ListDistributor = ListDistrubutor; 

      List<NotificationProcess> ListNotifiaction = Models.DeserialiseFromJson<List<NotificationProcess>>.Deserialise(jsonResp); 
      model._ListNotificationProcess = ListNotifiaction; 

      List<string> ListnotificationType = Models.DeserialiseFromJson<List<string>>.Deserialise(jsonResp); 
      model._ListNotificationType = ListnotificationType; 

      jsonReq = ApiBaseUrl + ApiGeneralSubBaseUrl + "/GetAdminNotificationsByDate"; 

      JsonParamBuilder myBuilder = new JsonParamBuilder(); 
      myBuilder.AddParam<string>("submittingUserID", User.Identity.GetUserId().ToString()); 
      myBuilder.AddParam<string>("userName", User.Identity.GetUserName().ToString()); 
      myBuilder.AddParam<int>("distributorID", int.Parse(model.SelectedDistributor)); 
      myBuilder.AddParam<string>("notificationsFromDate", model.DateFrom.ToString("dd/MM/yyyy")); 
      myBuilder.AddParam<string>("notificationsToDate", model.DateTo.ToString("dd/MM/yyyy")); 
      myBuilder.AddParam<int>("processID", int.Parse(model.SelectedNotificationPrcoess)); 
      myBuilder.AddParam<string>("notificationType", model.SelectedNotificationType); 
      Console.WriteLine("Builder result : " + myBuilder.GetJSonParam()); 

      string resp = JsonWrapper.JsonPOST(ApiBaseUrl + ApiGeneralSubBaseUrl + "/GetAdminNotificationsByDate", myBuilder.GetJSonParam()); 
      List<NotificationDetail> _ListNotifications = Models.DeserialiseFromJson<List<NotificationDetail>>.DeserialiseApiResponse(resp); 

      List<Models.NotificationModel.notification> listData1 = new List<Models.NotificationModel.notification>(); 
      foreach (NotificationDetail item in _ListNotifications) 
      { 
       Models.NotificationModel.notification sngData1 = new Models.NotificationModel.notification(); 
       sngData1.notificationID = item.notificationID; 
       sngData1.notificationMessage = item.notificationMessage; 
       sngData1.notificationType = item.notificationType; 
       sngData1.processName = item.processName; 
       sngData1.notificationDate = item.notificationDate; 

       listData1.Add(sngData1); 
      } 
      NotificationModel.GetAllNotications = listData1; 
      return Json(listData1.ToDataSourceResult(request), JsonRequestBehavior.AllowGet); 
     } 
     catch (Exception ex) 
     { 
      throw ex; 
     } 
    } 

モデル

public class NotificationModel 
{ 

    public static List<notification> GetAllNotications { get; set; } 
    public class notification 
    { 
     public int distributorID { get; set; } 
     public string distributorName { get; set; } 
     public int notificationID { get; set; } 
     public string notificationMessage { get; set; } 
     public string notificationType { get; set; } 
     public int processID { get; set; } 
     public string processName { get; set; } 
     public DateTime notificationDate { get; set; } 

    } 
} 

答えて

1

非常にシンプルです。あなたは

  • を必要といけないすべての まずHtml.BeginForm宣言は、これを削除 - このの必要剣道データソース
  • にそのreadメソッドを使用して、ポストの世話をしないあなたも、このフォームの役割=「フォーム」を削除する必要がいけませんこれも

これで、ボタンにonclickイベントをアタッチし、Javascriptを使用して剣道グリッドの読み取りと最新表示を開始します。 1あなたCSHTMLファイルであなたのボタンにonclickイベントをアタッチ

<button id="btnSearch" onclick="myFunction()" class="btn btn-primary">Search</button>  

ステップ:2 JavaScriptのメソッドのMyFunctionを書く()クリックイベントを処理するためには

ステップ

以下のコードスニペットを参照してくださいグリッドをリフレッシュする

<script> 
function myFunction() 
{ 
    //Remember you used grid name = "Grid" so in the lines below replace -> 
    //"GridName" with whatever grid name you assign 

    //read will request the server and reload only reload datasource 
    $('#GridName').data('kendoGrid').dataSource.read(); 

    //refresh will re-render items in grid from the current datasource 
    $('#GridName').data('kendoGrid').refresh();  
} 
</script> 
関連する問題