我如何将自定义按钮添加到打开新页面的 razor pages .net core 3.1 项目中的 kendo 网格

Question

我有一个仅供查看的 ajax 绑定 kendo 网格，从名为 Notes 的较大数据库模型中读取多个字段。

我需要一个 link 或每行上的一个按钮来打开编辑页面，以便可以编辑所有字段，只记下网格中的字段，并向其传递一个 ID 和可能的另一个参数以及。编辑页面包括许多多对多下拉菜单和树视图等。

作为一个 ajax 绑定网格，我相信您只能在绑定列中使用 ClientTemplate，而不是 Template，如果这样做的话。

使用带有 .NETCore3.1 的剃刀页面项目，因此没有控制器，我所在的页面是 Index.cshtml，由 Index.cshtml.cs[=12 支持=]

非常感谢任何帮助，我对此有点陌生。谢谢

这是网格：

@(Html.Kendo().Grid<Note>().Name("grid")
                    .Groupable()
                    .Sortable()
                    .Scrollable()
                    .ToolBar(x =>
                    {                       
                        x.Excel();
                    })
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.NoteDate).Title("Note Date").Format("{0:dd/MM/yyyy}");
                            columns.Bound(p => p.Title).Title("Title");
                            columns.Bound(p => p.NoteText).Title("Note Detail");
                            columns.Bound(p => p.Amount).Title("Amount");
                            columns.Bound(p => p.DateCreated).Title("Created");
                            //something like this, but this just takes me to the page im already on
                            columns.Bound(p => p.ID).ClientTemplate(
                                "<a href='" +
                                    Url.Action("Edit", "/Notes/Edit") +
                                    "'/#= ID #'" +
                                ">Edit</a>"
                            );

                            columns.Command(column =>
                            {

                                //Or something like this
                                //column.Custom("Edit").Click("Open Notes/Edit")
                                            //.HtmlAttributes(new { @Id = "#= ID" });}).Width(166);   
                            });
                        })

                    .DataSource(ds => ds.Ajax()
                        .Read(r => r.Url("/Notes/Index?handler=Read").Data("forgeryToken"))
                        .Model(m => m.Id(id => id.ID))
                        .PageSize(10)
                    )
                    .Pageable()
        )

Answer 1

有几种方法可以做到这一点。这种方式可能会给你最大的灵活性，也是我最喜欢的方式：

columns.Template("<a class='btn' href='javascript:myJavascriptAjaxFunction(#=ID#)'>Edit</a>");

如果您想使用列命令路由，首先您必须使您的网格可编辑，然后您必须使用编辑命令，然后您需要创建一个事件将调用 Javascript 函数，您可以在其中编写代码。 Javascript 函数会传入一个参数，例如 "e"，然后您可以使用该参数来访问行的模型信息等信息。

有 3 种编辑类型：批处理、内联或 popup.Which 编辑类型将决定事件。下面是 Kendo 的一些很好的例子的演示文档：https://demos.telerik.com/aspnet-mvc/grid/editing-popup

下面是弹出窗口编辑的示例：

@(Html.Kendo().Grid<Note>().Name("grid")
                .Groupable()
                .Sortable()
                .Scrollable()
                .Editable(editable => editable.Mode(GridEditMode.PopUp))
                .Events(e=>e.Edit("myJavascriptAjaxFunction"))
                .ToolBar(x =>
                {
                    x.Excel();
                })
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.NoteDate).Title("Note Date").Format("{0:dd/MM/yyyy}");
                        columns.Bound(p => p.Title).Title("Title");
                        columns.Bound(p => p.NoteText).Title("Note Detail");
                        columns.Bound(p => p.Amount).Title("Amount");
                        columns.Bound(p => p.DateCreated).Title("Created");
                        //something like this, but this just takes me to the page im already on
                        columns.Bound(p => p.ID).ClientTemplate(
                            "<a href='" +
                                Url.Action("Edit", "/Notes/Edit") +
                                "'/#= ID #'" +
                            ">Edit</a>"
                        );


                        columns.Command(column => column.Edit());
                    })

                .DataSource(ds => ds.Ajax()
                    .Read(r => r.Url("/Notes/Index?handler=Read").Data("forgeryToken"))
                    .Model(m => m.Id(id => id.ID))
                    .PageSize(10)
                )
                .Pageable()
    )

更新： 同样，您可以通过多种方式解决此问题，但一种方法是使用 Javascript 函数进行 ajax 调用 returns 可以在 [=37= 中显示的部分视图] 模态。

Bootstrap 模态文档：https://getbootstrap.com/docs/4.0/components/modal/

确保您的项目中包含 bootstrap 并将其添加到您的剃刀视图中：

<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

在你的 Javascript:

myJavascriptFunction(id){
    $.ajax({
        type: "GET", //make sure matches your controller http request
        url: "/Notes/Edit/"+id
        success: function (content) {
            $('.modal-body').html(content);
    $('#myModal').modal('toggle'); //to show the modal
        },
        error: function (req, status, error) {
            alert(error);
        }
    });

我如何将自定义按钮添加到打开新页面的 razor pages .net core 3.1 项目中的 kendo 网格

How can i add a custom button to a kendo grid in a razor pages .net core 3.1 project that opens a new page

c#

kendo-ui

kendo-grid

.net-core

razor-pages