Как добавить пользовательскую кнопку в сетку кендо на страницах бритвы. net core 3.1 проект, который открывает новую страницу

Question

У меня есть сетка кендо с привязкой ajax, предназначенная только для просмотра и считывающая несколько полей из более крупной модели БД, которая называется Notes.

Мне нужна ссылка или кнопка в каждой строке, которая откроет страницу редактирования, чтобы можно было редактировать все поля, отметьте только поля в сетке и передайте ей идентификатор и, возможно, другой параметр. Страница редактирования включает в себя множество раскрывающихся списков и древовидных структур и т. Д. c.

Будучи привязанной сеткой ajax, я полагаю, что вы можете использовать ClientTemplate, а не Template в связанном столбце, если это способ сделать это.

Использование проекта бритвенных страниц с .NETCore3.1, поэтому нет контроллера, и страница, на которой я сейчас нахожусь, - это Index.cs html, поддерживаемая Index. cs html .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>");

Если вы хотите использовать командный маршрут столбца, сначала вы должны будете сделать свою сетку редактируемой, затем вы получите использовать команду редактирования, а затем вы захотите создать событие, которое вызовет функцию 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()
    )

Обновление: Снова несколькими способами вы можете go об этом, но один из способов - использовать вашу функцию Javascript для выполнения вызова ajax, который возвращает частичное представление, которое вы могли бы отобразить в модальном bootstrap.

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