如何使用 Kendo Mvc 在按钮单击时绑定数据答案

【问题标题】：How to bind data on button click using Kendo Mvc如何使用 Kendo Mvc 在按钮单击时绑定数据
【发布时间】：2016-12-07 12:28:19
【问题描述】：

我想在单击搜索按钮时将数据显示到剑道网格中，但它只在浏览器上返回 json 结果。我在控制台上没有任何错误。我想要的只是能够在剑道网格上返回搜索结果。我试图在页面加载时加载数据，它工作正常，但它在按钮单击时不起作用。

单击按钮时如何在网格上显示数据？

我的观点

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

    }
}

【问题讨论】：

标签： c# asp.net-mvc kendo-grid

【解决方案1】：

这很简单。首先你不需要

Html.BeginForm 声明删除这个 - 不需要这个剑道在数据源中使用它的读取方法来处理帖子
你也不需要这个表单 role="form" 也删除它

现在您只需要将 onclick 事件附加到您的按钮并使用 Javascript 启动剑道网格的读取和刷新。请参阅下面的代码片段

步骤：1 将 onclick 事件附加到您的 cshtml 文件中的按钮

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

Step: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>

【讨论】：