獲取控制器MVC ASP列表框中的項目4

Question

我有一個頁面，您可以在其中創建通道。渠道有與他們相關的流派。

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> 

視圖SelectGenre.cshtml看起來像這樣：

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

控制器看起來像這樣：

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"); 
    } 

的SelectGenreModel看起來像這樣：

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

當我提交表單時，SelectGenreModel中的兩個列表均爲null。

如何將這些列表傳遞給視圖？

Answer 1

爲什麼不反序列化的原因是因爲表單數據調回不匹配MVC期待數組映射格式。

接近你正在試圖完成的任務，我會建議創建另一個模型來表示形式發佈的數據。在這種情況下：

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

而且在你看來，有JavaScript的勾入提交事件在ChosenGenres自動選擇所有的選項，以便他們得到適當的回髮根據你的UI做。

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

然後，如果你絕對需要的SelectGenreModel，你重新填充使用您的服務請求，並通過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"); 
} 

最新問題

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

 相關問題

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