使用 JavaScript 从 DevExpress 列表框中获取项目

Question

我正在创建两个 DevExpress ListBox 来设置产品和客户之间的关系。 见Moving Items between List Boxes

所以： 我的控制器 C#

public ActionResult ReglaCreate()
    {
        if (Authentication.User.Identity.IsAuthenticated)
        {
            Service service= new Service();
            var articulos = service.GetArt();
            var locales = service.GetLoc();
            Session["Articulos"] = articulos;
            Session["Locales"] = locales;
            return View();
        }
        else
            return RedirectToAction("Login", "Account");
    }

DevExpress 列表网格

        <div class="wrapper wrapper-content animated fadeInRight" id="ReglaCreateController" ng-controller="ReglaController">
<div class="row">
    <div class="ibox-content">
        <form class="form-horizontal">
            <div class="form-group" style="width:50%">
                <label class="col-lg-2 control-label" style="float:left">Nombre</label>
                <textarea style="font-size:15px;text-align:left;width:350px;height:40px;margin-left:15px;" class="control-label" id="lblNombreRegla">{{lblNombreRegla}}</textarea>
            </div>
        </form>
        <br />
        <div class="form-group">
            <div class="col-md-4" style="width:17.5%">
                <span style="float:right"><label class="col-lg-2 control-label" style="width:180px">Locales disponibles</label></span>
            </div>
            <div class="col-md-4" style="padding-left: 495px">
                <span style="float:left"><label class="col-lg-2 control-label" style="width:180px">Locales elegídos</label></span>
            </div>
        </div>
        <table style="height">
            <tr>
                <td>
                    @Html.DevExpress().ListBox(settings =>
   {
       settings.Name = "lbAvailableLocales";
       settings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;

       var locales = (List<LocalViewModel>)Session["Locales"];

       foreach (var local in locales)
       {
           settings.Properties.Items.Add(local.Nombre, local.ID);
       }
       settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e) { UpdateButtonStateLocales(); }";
       settings.Properties.EnableClientSideAPI = true;
       settings.Width = System.Web.UI.WebControls.Unit.Pixel(350);
       settings.Height = System.Web.UI.WebControls.Unit.Pixel(200);
   }).GetHtml()
                </td>
                <td style="padding: 60px">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-md-4">
                                @Html.DevExpress().Button(settings =>
                       {
                           settings.Name = "btnMoveSelectedItemsToRightLocales";
                           settings.Text = "Agregar >";
                           settings.ClientSideEvents.Click = "function(s, e) { AddSelectedItemsLocales();  }";
                       }).GetHtml()
                            </div>
                            <div class="col-md-4">
                                @Html.DevExpress().Button(settings =>
                       {
                           settings.Name = "btnMoveAllItemsToRightLocales";
                           settings.Text = "Agregar todos >>";
                           settings.ClientSideEvents.Click = "function(s, e) { AddAllItemsLocales(); }";
                       }).GetHtml()
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-4">
                                @Html.DevExpress().Button(settings =>
                       {
                           settings.Name = "btnMoveSelectedItemsToLeftLocales";
                           settings.Text = "< Eliminar";
                           settings.ClientSideEvents.Click = "function(s, e) { RemoveSelectedItemsLocales(); }";
                       }).GetHtml()
                            </div>
                            <div class="col-md-4">
                                @Html.DevExpress().Button(settings =>
                       {
                           settings.Name = "btnMoveAllItemsToLeftLocales";
                           settings.Text = "<< Eliminar todos";
                           settings.ClientSideEvents.Click = "function(s, e) { RemoveAllItemsLocales(); }";
                       }).GetHtml()
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    @Html.DevExpress().ListBox(settings =>
           {                   
               settings.Name = "lblChoosenLocales";
               settings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;
               settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s,e) { UpdateButtonStateLocales(); }";
               settings.Properties.EnableClientSideAPI = true;
               settings.Width = System.Web.UI.WebControls.Unit.Pixel(350);
               settings.Height = System.Web.UI.WebControls.Unit.Pixel(200);
           }).GetHtml()
                </td>
            </tr>
        </table>

        <br />
        <div class="form-group">
            <div class="col-md-4" style="width:17.5%">
                <span style="float:right"><label class="col-lg-2 control-label" style="width:180px">Artículos disponibles</label></span>
            </div>
            <div class="col-md-4" style="padding-left: 495px">
                <span style="float:left"><label class="col-lg-2 control-label" style="width:180px">Artículos elegídos</label></span>
            </div>
        </div>
        <table>
            <tr>
                <td>
                    @Html.DevExpress().ListBox(settings =>
   {
       settings.Name = "lbAvailable";
       settings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;

       var articulos = (List<ArticuloViewModel>)Session["Articulos"];

       foreach (var articulo in articulos)
       {
           settings.Properties.Items.Add(articulo.Nombre, articulo.ID);
       }
       settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e) { UpdateButtonState(); }";
       settings.Properties.EnableClientSideAPI = true;
       settings.Width = System.Web.UI.WebControls.Unit.Pixel(350);
       settings.Height = System.Web.UI.WebControls.Unit.Pixel(200);
   }).GetHtml()
                </td>
                <td style="padding: 60px">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-md-4">
                                @Html.DevExpress().Button(settings =>
                       {
                           settings.Name = "btnMoveSelectedItemsToRight";
                           settings.Text = "Agregar >";
                           settings.ClientSideEvents.Click = "function(s, e) { AddSelectedItems();  }";
                       }).GetHtml()
                            </div>
                            <div class="col-md-4">
                                @Html.DevExpress().Button(settings =>
                       {
                           settings.Name = "btnMoveAllItemsToRight";
                           settings.Text = "Agregar todos >>";
                           settings.ClientSideEvents.Click = "function(s, e) { AddAllItems(); }";
                       }).GetHtml()
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-4">
                                @Html.DevExpress().Button(settings =>
                       {
                           settings.Name = "btnMoveSelectedItemsToLeft";
                           settings.Text = "< Eliminar";
                           settings.ClientSideEvents.Click = "function(s, e) { RemoveSelectedItems(); }";
                       }).GetHtml()
                            </div>
                            <div class="col-md-4">
                                @Html.DevExpress().Button(settings =>
                       {
                           settings.Name = "btnMoveAllItemsToLeft";
                           settings.Text = "<< Eliminar todos";
                           settings.ClientSideEvents.Click = "function(s, e) { RemoveAllItems(); }";
                       }).GetHtml()
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    @Html.DevExpress().ListBox(settings =>
           {
               settings.Name = "lblChoosen";
               settings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;
               settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s,e) { UpdateButtonState(); }";
               settings.Properties.EnableClientSideAPI = true;
               settings.Width = System.Web.UI.WebControls.Unit.Pixel(350);
               settings.Height = System.Web.UI.WebControls.Unit.Pixel(200);
           }).GetHtml()
                </td>
            </tr>
        </table>
    </div>
    @*<br />*@
    <div style="float:right">
        <input class="btn btn-sm btn-primary" type="submit" name="btnGuardar" id="btnGuardar" value="Crear" ng-click="Guardar()" />
    </div>
</div>

我的控制器 JS：

$scope.Guardar = function () {
    if (confirm('¿Está seguro de guardar los datos?')) {
        $("#btnGuardar").prop('disabled', 'disabled');
        $scope.MostrarMensajeOk = false;
        $scope.MostrarMensajeError = false;

        var nombreRegla = $("#lblNombreRegla").val();
        var localesEnGrilla = $("#lblChoosenLocales").val();
        var articulosEnGrilla = $("#lblChoosen").val();

        //some code here

        $http({
            method: 'POST',
            url: baseURL + 'Configuracion/CrearRegla/?Nombre=' + nombreRegla + "&Locales="+ localesEnGrilla + "&Articulos="+ articulosEnGrilla,
        }).success(function (result) {
            if (result != null) {
                $("#btnGuardar").prop('disabled', '');
                $scope.MostrarMensajeOk = false;
                $scope.MostrarMensajeError = false;

                $scope.volver();
            }
        }).error(function (data, status, headers, config) {
            $("#btnGuardar").prop('disabled', '');
            alert(data);
            $scope.MostrarMensajeOk = false;
            $scope.MostrarGrilla = false;
            $('html, body').animate({ scrollTop: 0 }, 'slow');
        });
    };
};

我需要它从两个列表中获取所有选定的项目，保存在我的数据库中，然后使用它。我能做些什么？这可能吗？我尝试了很多解决方案，但没有任何效果。

Answer 1

为此目的使用客户端ASPxClientListBox.GetSelectedValues 方法：

@Html.DevExpress().ListBox(settings => { 
   settings.Name = "lblChoosenLocales";
}).GetHtml()

var selectedValues = lblChoosenLocales.GetSelectedValues();
alert(selectedValues);