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

Question

我需要一些建议来设计一个自定义控件，该控件使用两个网格以及之间的“添加”和“删除”按钮。

“添加”按钮从左侧获取所选项目并将其添加到右侧，然后从左侧将其删除。

反之亦然。

为了拥有丰富的经验，我了解可能需要使用Javascript。

目前，我正在创建一个控件，该控件继承具有两个网格和两个源的CompositeControl。 我可以使用UpdatePanel，因此不必在“添加/删除”上做完整的帖子。

对解决此问题的最佳方法有何建议？

Answer 1

我用剑道做了这个样品。 我写了一些部分。希望对我的示例中的主管添加和删除一些路径会有所帮助：您需要这样的主要Action：

        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添加或删除路径。 如果您熟悉剑道，那么您知道有两种填充每个网格的方法。 如果您需要更多信息，请添加评论。 好舔