自定义剑道网格工具栏按钮

Question

我有一个 Kendo Grid，我在其中的工具栏中添加了一个自定义按钮。我已将点击功能映射到该按钮。

<div class="row">
  <div class="clearfix">
    @(Html.Kendo().Grid<ModelLayer.Models.TableNotificationModel>()
    .Name("successfullData")
    .ToolBar(e =>
    {
    e.Custom().Text("Save").HtmlAttributes(new { id = "customSaveButton", @class = "floatRight" });
    })
    .Pageable(pageable => pageable.Input(true).Numeric(false))
    .Scrollable()
    .Sortable()
    .Filterable()
    .ColumnMenu()
    .Groupable()
    .Columns(columns =>
    {
    columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
    columns.Bound(c => c.SETTLEMENT_CODE).Title("settlement code").Width("100px");
    columns.Bound(c => c.TECHNOLOGY_CODE).Title("tech code").Width("100px");
    columns.Bound(c => c.UPLOAD_SPEED_CLASS_CODE).Title("upload").Width("100px");
    columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_CODE).Title("download").Width("100px");
    columns.Bound(c => c.DATA_CATEGORY_QOS_CODE).Title("data category").Width("100px");
    columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
    columns.Bound(c => c.messageOut).Title("message").Width("100px");
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Read(read => read.Action("Upload_Read", "Upload").Data("sendAdditional"))
    )
    )

  </div>
</div>
<script>
  function sendAdditional() {
    var data = JSON.parse('@Html.Raw(Json.Serialize(Model?.TableNotificationModel))');

    return {
      model: data
    }
  }

  $("#successfullData").on("click", "#customSaveButton", function () {
    var model = JSON.parse('@Html.Raw(Json.Serialize(Model?.TableNotificationModel))');


    $.ajax({
      method: "POST",
      url: '@Url.Action("SaveFile", "Upload")',
      data: {
        model: model,
        saveType: saveType
      }
    })
  });
</script>

我添加了一个函数，该函数通过 ajax 调用将模型发送到我正在返回视图的控制器。 问题是，自定义保存按钮在 URL 中添加了一个#，我认为这是因为我无法在控制器中返回我的操作视图。

public ActionResult SaveFile(List<TableNotificationModel> model)
{
  //code shortened for brevity
  ViewBag.Message = String.Format(cmdMessage);
  return View(tModel);
}

我有点卡住了，我不知道如何继续。有什么建议吗？

Answer 1

检查您的 javascript 函数是否通过 ID 识别您的按钮事件：“customSaveButton”。

例如：

 $('#customSaveButton').on('click', function () {

    $.ajax({
        url: '/YourContreoller/SaveFile',
        type: 'POST',   
        dataType: 'json',
        data: $('#dataThatYouWantToSend').serialize(),
        success: function (sucess) {
            console.log("Success");
            document.location.href = '/'
        },
        error: function (xhr, textStatus, errorThrown) {
             console.log(textStatus);
        }

    });
});