我如何在剃须刀页面.net core 3.1项目中为打开新页面的剑道网格添加自定义按钮

Question

我有一个仅供参考的ajax绑定剑道网格，它从称为Notes的较大数据库模型中读取许多字段。

我在每行上都需要一个链接或按钮，这将打开编辑页面，以便可以编辑所有字段，仅注意网格中的字段，并向其传递ID和可能的其他参数。编辑页面包括许多下拉菜单和树视图等。

作为一个ajax绑定网格，我相信您只能在绑定列中使用ClientTemplate，而不能在模板中使用Template。

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

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

这是网格：

@(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>");

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

共有3种编辑类型：批处理，内联或弹出式窗口。哪种类型的编辑将决定事件。这是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调用，该调用返回可以在引导模式下显示的局部视图。

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

请确保您的项目中包含引导程序，并将其添加到剃刀视图中：

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