Ottieni elementi dalla casella di riepilogo nel controller MVC ASP 4

Question

Ho una pagina in cui è possibile creare canali. I canali hanno generi associati a loro.

CreateChannel.cshtml 
<h2>Create Channel</h2> 

<div class="row-fluid"> 
<div> 
    @{ 
     using (Html.BeginForm("CreateNewChannel", "Channel", new { channelId = Model.Id, userId = @Session["userId"] }, FormMethod.Post)) 
     { 
      @Html.HiddenFor(model => model.Id) 
      <h5>Name</h5> 
      @Html.TextBoxFor(model => model.Name, new { @class = "input-block-level pull-left", type = "text", required = "required", placeholder = "Channel Name", style = "width: 400px" }) 
      @Html.ValidationMessageFor(model => model.Name, null, new { @class = "txt-error error-field", style = "padding-top: 4px" }) 
      <div class="clearfix"></div> 
      <div style="width: 400px" class="input-block-level"> 
       <h5 style="">Description</h5> 
       <div class="input-block-level"> 
        @Html.TextAreaFor(model => model.Description, 5, 60, new { @class = "input-block-level", type = "textarea", required = "required", placeholder = "Description" }) 
       </div> 
      </div> 

      @Html.Action("SelectGenre", new { channelId = -1 }) 

      <button class="btn">Create</button> 
     } 
    } 
</div> 

Il SelectGenre.cshtml vista assomiglia a questo:

<div id="genreDiv"> 
@Html.ListBoxFor(model => model.AvailableGenres, new MultiSelectList(Model.AvailableGenres, "Id", "Name"), new { size = "10" }) 

<input id="btnAddAll" type="button" value=" >> " onclick="addallItems();" /> 
<input id="btnAdd" type="button" value=" > " onclick="addItem();" /> 
<input id="btnRemove" type="button" value=" < " onclick="removeItem();" /> 
<input id="btnRemoveAll"type="button" value=" << " onclick="removeallItems();" /> 

@Html.ListBoxFor(model => model.ChosenGenres, new MultiSelectList(Model.ChosenGenres, "Id", "Name"), new { size = "10" }) 
</div> 

<script type="text/javascript"> 
function addItem() { 
    $("#AvailableGenres option:selected").appendTo("#ChosenGenres"); 
    $("#ChosenGenres option").attr("selected", false); 
} 
function addallItems() { 
    $("#AvailableGenres option").appendTo("#ChosenGenres"); 
    $("#ChosenGenres option").attr("selected", false); 
} 
function removeItem() { 
    $("#ChosenGenres option:selected").appendTo("#AvailableGenres"); 
    $("#AvailableGenres option").attr("selected", false); 
} 
function removeallItems() { 
    $("#ChosenGenres option").appendTo("#AvailableGenres"); 
    $("#AvailableGenres option").attr("selected", false); 
} 
</script> 

Il controller si presenta così:

public class ChannelController : Controller 
{ 
    public SelectGenreModel GetGenreModel(int channelId) 
    { 
     List<GuiGenre> chosenGenres; 
     List<GuiGenre> availableGenres; 
     using (RentItServiceClient proxy = new RentItServiceClient()) 
     { 
      chosenGenres =  GuiClassConverter.ConvertGenres(proxy.GetGenresForChannel(channelId)); 
      availableGenres = GuiClassConverter.ConvertGenres(proxy.GetAllGenres()).Except(chosenGenres).ToList(); 
     } 
     SelectGenreModel model = new SelectGenreModel 
     { 
      AvailableGenres = availableGenres, 
      ChosenGenres = chosenGenres, 
      ChannelId = channelId, 
     }; 
     return model; 
    } 

    public PartialViewResult SelectGenre(int channelId) 
    { 
     return PartialView(GetGenreModel(channelId)); 
    } 
} 

public ActionResult CreateNewChannel(GuiChannel channel, int? userId, SelectGenreModel  model) 
    { 
     if (userId.HasValue) 
     { 
      channel.OwnerId = userId.Value; 
      int channelId; 
      using (RentItServiceClient proxy = new RentItServiceClient()) 
      { 
       channelId = proxy.CreateChannel(channel.Name, userId.Value, channel.Description, new string[0]); 
      } 
      return RedirectToAction("SelectChannel", new { channelId = channelId, userId = userId }); 
     } 
     return RedirectToAction("Index", "Home"); 
    } 

Il SelectGenreModel assomiglia a questo:

public class SelectGenreModel 
{ 
public List<GuiGenre> AvailableGenres { get; set; } 
public List<GuiGenre> ChosenGenres { get; set; } 
public int ChannelId { get; set; } 
} 

Quando invio il modulo, entrambi gli elenchi in SelectGenreModel sono nulli.

Come posso passare queste liste alla vista?

Answer 1

Il motivo per cui non si sta deserializzando è perché i dati del modulo postati non corrispondono al formato che MVC si aspetta per la mappatura degli array.

Per avvicinarsi a ciò che si sta tentando di realizzare, si consiglia di creare un altro modello per rappresentare i dati del modulo inviato. In questo caso:

public class SelectedGenrePostModel 
{ 
    public int ChannelId { get; set; } 
    public List<int> ChosenGenres { get; set; } 
} 

E secondo lei, i javascript gancio nel caso presentare per selezionare automaticamente tutte le opzioni in ChosenGenres in modo che siano correttamente inviato di nuovo in base a ciò l'interfaccia utente sta facendo.

<script type="text/javascript"> 
    $(function() { 
     // this event fires when the browser is about to submit a form 
     $('#GenreForm').submit(function() { 
      // modifies the 'selected' options on the list 
      // before finally being submitted by the browser 
      $('#ChosenGenres option').prop('selected', true); 
     }); 
    }); 
</script> 

Poi, se è assolutamente necessario il SelectGenreModel, si ripopolare utilizzando la chiamata di servizio ei dati inviati indietro via SelectedGenrePostModel.

public ActionResult CreateNewChannel(GuiChannel channel, int? userId, SelectGenrePostModel model) 
{ 
    if (userId.HasValue) 
    { 
     // do work here 
     return RedirectToAction("SelectChannel", new { channelId = channelId, userId = userId }); 
    } 
    return RedirectToAction("Index", "Home"); 
} 

Ultima domanda

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Problemi correlati

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.