Кендо UI Grid с формой во всплывающем окне

Question

Я хочу реализовать индивидуальную форму для ajax вызова. Я хочу получить команду, которая открывает новое всплывающее окно с одним полем, пользователь заполняет это поле, затем нажимает «Отправить», а затем я ajax вызываю контроллер. Мой код:

                   $(document).ready(function () {
                        var grid = $("#memberList-grid").kendoGrid({
                                dataSource: {
                                    type: "json",
                                    transport: {
                                        read: {
                                            url: "@Html.Raw(Url.Action("MemberSearchList", "RandomPoolSelection"))",
                                            type: "POST",
                                            dataType: "json",
                                            data: function () {
                                                var data = {
                                                    SearchMember: $('#@Html.IdFor(model => model.SearchMember)').val(),
                                                    SelectionId: $('#SelectionId').val()
                                                };
                                                addAntiForgeryToken(data);
                                                return data;
                                            }
                                        }
                                    },
                                    schema: {
                                        data: "Data",
                                        total: "Total",
                                        errors: "Errors"
                                    },
                                    error: function (e) {
                                        display_kendoui_grid_error(e);
                                        // Cancel the changes
                                        this.cancelChanges();
                                    },
                                    pageSize: @(Model.PageSize),
                                    serverPaging: true,
                                    serverFiltering: true,
                                    serverSorting: true
                                },
                                pageable: {
                                    refresh: true,
                                    pageSizes: [@(Model.AvailablePageSizes)],
                                    @await Html.PartialAsync("_GridPagerMessages")
                                },
                                scrollable: false,
                                columns: [
                                    {
                                        field: "PrimaryID",
                                        title: "@T("PoolMemberList.Fields.PrimaryID")",
                                        width: 150
                                    },
                                    {
                                        field: "FirstName",
                                        title: "@T("PoolMemberList.Fields.FirstName")",
                                        width: 150
                                    },
                                    {
                                        command:
                                        {
                                            text: "Exclude",
                                            click: showExclude
                                        },
                                        title: " ",
                                        width: 100
                                    }
                                ]
                            });

                        wndExclude = $("#exclude")
                            .kendoWindow({
                                title: "Excuse Reason",
                                modal: true,
                                visible: false,
                                resizable: false,
                                width: 300
                            }).data("kendoWindow");

                        excludeTemplate = kendo.template($("#excludeTemplate").html());

                    });

                    function showExclude(e) {
                        e.preventDefault();

                        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                        wndExclude.content(excludeTemplate(dataItem));
                        wndExclude.center().open();
                    }

и шаблон:

                <script type="text/x-kendo-template" id="excludeTemplate">
                    <div id="exclude-container">
                        <input type="text" class="k-input k-textbox" id="note">
                        <br />

                    </div>
                </script>

как реализовать отправку этих данных (с ID) на контроллер?

Answer 1

Простой способ сделать то, что вы хотите, это использовать partial view. это ваш command grid

{
  command:
  {
       text: "Exclude",
       click: showExclude
  },
  title: " ",
  width: 100
}

и вот ваша функция:

function showExclude(e) {   
  $(document.body).append('<div id="excludeWindow" class="k-rtl"></div>');
  var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
  $('#excludeWindow').kendoWindow({
        width: "80%",
        title: 'excludeForm',
        modal: true,
        resizable: false,
        content: "/YourController/GetPartial?id=" + dataItem.Id,
        actions: [
            "Close"
        ],
        refresh: function () {
            $("#excludeWindow").data('kendoWindow').center();
        },
        close: function() {
            setTimeout(function () {
                $('#excludeWindow').kendoWindow('destroy');
            }, 200);
        }
    }).data('kendoWindow');
}

После нажатия на кнопку, вы загружаете свое окно (всплывающее окно) и вызываете действие, которое загружает partial view для заполнения content из window. Вы можете передать все, что хотите, своему partial view (например, здесь я просто отправляю Id)

public ActionResult GetPartial(Guid id)
{
    var viewModel= new ViewModelExclude
    {
        Id = id,
    };
    return PartialView("_exclude", viewModel);
}

, а partial view выглядит примерно так:

@model ViewModelExclude
@using (Html.BeginForm("", "Your action", FormMethod.Post, new { id = "SendForm"}))
{
   <input class="k-rtl" name="@nameof(Model.Id)" value="@Model.Id">
   <button type="submit" class="btn btn-primary">Send</button>
}

а затем позвоните на Ваш ajax после нажатия на кнопку send:

$("#SendForm").submit(function (e) {
     e.preventDefault();
     var form = $(this);
     var formData = new FormData(this);
     $.ajax({
        type: "POST",
        url: '@Url.Action("send", "yourController"),
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {

        },
        error: function (data) {

        }
     });
 });

Ваше send действие будет примерно таким:

[HttpPost]
public ActionResult Send(ViewModelExclude view)     
{
   ....
   return Json();
}