Abrufen von Elementen aus einer DevExpress-ListBox mit JavaScript

Question

Im Erstellen von zwei DevExpress-ListBox-Elementen zum Festlegen einer Beziehung zwischen Produkten und Clients. Siehe Moving Items between List Boxes

So: mein Controller 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> 

Meine Controller 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'); 
     }); 
    }; 
}; 

Was ich brauche es alle ausgewählten Elemente aus beiden Listen zu bekommen, in meiner Datenbank zu speichern und dann zu arbeiten. Was kann ich tun? Ist das möglich? Ich habe viele Lösungen versucht, aber nichts funktioniert.

Answer 1

die clientseitige ASPxClientListBox.GetSelectedValues Methode für diesen Zweck verwenden:

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

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