ASP.NET 自定义控件，两个网格.需要一些建议

我使用剑道做了这个样本。我写一些部分.我希望这会有所帮助我在示例中添加和删除了一些指向主管的路径：你需要一个这样的主操作：

        public ActionResult AddPathToSupervisor()
    {
                return View();
    }

我的示例更完整一些，因为在视图中，首先选择一个监督者，然后向他添加一些路径。在视图中，您需要 2 个网格和 2 个按钮才能添加/删除喜欢这个：

<div class="row">
<div class="col large">
    @(Html.Kendo().ComboBox()
    .Name("supervisor")
    .BindTo(SupervisorsSelectList)//var DocumetTypesSelectList = ViewBag.DocumetTypesSelectList as List<SelectListItem> ?? new List<SelectListItem>();
    .Events(e => e.Change("changeSupervisor"))
    )
</div>
</div>
<div class="row">
    <div class="col medium">
        <p>New Paths</p>
    </div>
    <div class="col medium">
        <p></p>
    </div>
    <div class="col medium">
        <p>Supervisor Paths</p>
    </div>
</div>
<div class="row">
    <div class="col medium">
        @(Html.Kendo().Grid<Distribution.Models.Path>()
            .Name("newPathsGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.PathId).Visible(false);
                columns.Bound(p => p.Title).Title(PathResource.Paths);
            })
            .Sortable()
            .Scrollable()
            .Navigatable()
            .Filterable(filterable => filterable.Extra(false))
                //.HtmlAttributes(new { style = "height:480px;" })
            .Resizable(resize => resize.Columns(true))
            .Selectable(s => s.Mode(GridSelectionMode.Multiple))
            .DataSource(dataSource => dataSource
                .Ajax()
                //.PageSize(15)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.PathId);
                    model.Field(p => p.PathId).DefaultValue(new Guid());
                })
                .Read(read => read.Action("FillNewSupervisorPathsGrid", "Paths"))
            )
        )
    </div>

<div class="col medium">
        <input type="button" id="addPathToSupervisor" value=">>Add>>" />
        <input type="button" id="removePathFromSupervisor" value="<<Remove<<" />
    </div>

<div class="col medium k-rtl">
        @(Html.Kendo().Grid<Distribution.Models.Path>()
            .Name("supervisorPathGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.PathId).Visible(false);
                columns.Bound(p => p.Title).Title(PathResource.Paths);
            })
        //.Pageable()
            .Sortable()
            .Scrollable()
            .Navigatable()
            .Filterable(filterable => filterable.Extra(false))
                //.HtmlAttributes(new { style = "height:480px;" })
            .Resizable(resize => resize.Columns(true))
            .Selectable(s => s.Mode(GridSelectionMode.Multiple))
            .DataSource(dataSource => dataSource
                .Ajax()
                //.PageSize(15)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.PathId);
                    model.Field(p => p.PathId).DefaultValue(new Guid());
                })
                .Read(read => read.Action("FillSupervisorPathsGrid", "Paths", new { id = ViewBag.SupervisorId }))
            )
        )
    </div>
</div>

这个JavaScript代码是选择主管的ID：

<script type="text/javascript">
function changeSupervisor(e) {
    var id = this.value();
    var supervisorPathGrid = $("#supervisorPathGrid").data("kendoGrid");
    supervisorPathGrid.dataSource.read({ id: id });
}

以下是添加和删除路径的 JavaScript 代码：

<script type="text/javascript">
var supervisorPathGrid = $("#supervisorPathGrid").data("kendoGrid");
var newPathsGrid = $("#newPathsGrid").data("kendoGrid");
var selectedItem = $("#supervisor").data("kendoComboBox");
$(document).on('click', '#addPathToSupervisor', function (e) {
    e.preventDefault();
    var supervisorId = selectedItem.value();
    if (hasManyRowSelected(newPathsGrid)) {
        var values = [];
        values.push({
            name: "supervisorId",
            value: supervisorId
        });
        newPathsGrid.select().each(function () {
            values.push({
                name: "ids",
                value: newPathsGrid.dataItem(this).PathId
            });
        });
        $.ajax({
            url: '@Url.Action("AddPathToSupervisor")',
            type: 'POST',
            datatype: "json",
            traditional: true,
            data: values,
            success: function () {
                newPathsGrid.select().each(function () {
                    var $this = $(this);
                    var data = newPathsGrid.dataItem($this);
                    supervisorPathGrid.dataSource.insert(0, data);
                });
                newPathsGrid.select().each(function () {
                    var $this = $(this);
                    var data = newPathsGrid.dataItem($this);
                    newPathsGrid.removeRow($this);
                });
            },
            beforeSend: function () {
                $('#addPathToSupervisor').attr("disabled", true);
                $('#addPathToSupervisor').addClass("ajax-load");
            },
            error: function (event, request, settings) {
                ajax_exception(event);
            },
            complete: function () {
                $('#addPathToSupervisor').attr("disabled", false);
                $('#addPathToSupervisor').removeClass("ajax-load");
                grid.dataSource.read();
            },
            timeout: 50000
        });
    }
});
$(document).on('click', '#removePathFromSupervisor', function (e) {
    e.preventDefault();
    var supervisorId = selectedItem.value();
    if (hasManyRowSelected(supervisorPathGrid)) {
        var values = [];
        supervisorPathGrid.select().each(function () {
            values.push({
                name: "ids",
                value: supervisorPathGrid.dataItem(this).PathId
            });
        });
        $.ajax({
            url: '@Url.Action("RemovePathFromSupervisor")',
            type: 'POST',
            datatype: "json",
            traditional: true,
            data: values,
            success: function () {
                supervisorPathGrid.select().each(function () {
                    var $this = $(this);
                    var data = supervisorPathGrid.dataItem($this);
                    newPathsGrid.dataSource.insert(0, data);
                });
                supervisorPathGrid.select().each(function () {
                    var $this = $(this);
                    var data = supervisorPathGrid.dataItem($this);
                    supervisorPathGrid.removeRow($this);
                });
            },
            beforeSend: function () {
                $('#removePathFromSupervisor').attr("disabled", true);
                $('#removePathFromSupervisor').addClass("ajax-load");
            },
            error: function (event, request, settings) {
                ajax_exception(event);
            },
            complete: function () {
                $('#removePathFromSupervisor').attr("disabled", false);
                $('#removePathFromSupervisor').removeClass("ajax-load");
                grid.dataSource.read();
            },
            timeout: 50000
        });
    }
});

现在您需要 2 个 Post 方法来添加和删除这样的路径：

    [HttpPost]
    public ActionResult AddPathToSupervisor(string[] ids, string supervisorId)
    {
        try
        {
            PathsBll.AddPathsToSupervisor(ids, supervisorId);
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return Json(ModelState.ToDataSourceResult());
    }
    [HttpPost]
    public ActionResult RemovePathFromSupervisor(string[] ids)
    {
        try
        {
            PathsBll.RemovePathsFromSupervisor(ids);
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return Json(ModelState.ToDataSourceResult());
    }

在其中，您可以编写 LINQ 以通过 ID 添加或删除路径。如果您熟悉剑道，您就会知道您有 2 种方法来填充每个网格。如果您需要更多信息，请添加评论。好舔