Obtient des éléments d'un ListBox DevExpress en utilisant JavaScript

Question

Im créer deux DevExpress ListBox pour définir une relation entre les produits et les clients. Voir Moving Items between List Boxes

Alors: Mon contrôleur 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 ListGrid

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

Mes contrôleurs 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'); 
     }); 
    }; 
}; 

Ce dont j'ai besoin est d'obtenir tous les éléments sélectionnés de la liste, d'enregistrer dans ma base de données, puis le travailler. Que puis-je faire? Est-ce que c'est posible? J'ai essayé beaucoup de solutions mais rien ne fonctionne.

Answer 1

Utilisez la méthode côté client ASPxClientListBox.GetSelectedValues à cet effet:

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

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