带有弹出窗口形式的Kendo UI网格

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

然后单击send按钮后调用您的ajax：

$("#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();
}