컨트롤러 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> 

컨트롤러는 다음과 같다 :

SelectGenreModel이 보이는

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

:

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

그리고보기에

, 그들은이 제대로 UI가 무엇을하고 있는지에 따라 다시 게시하도록 제출 이벤트에 자바 스크립트 후크가 자동으로 ChosenGenres에서 모든 옵션을 선택해야합니다. 당신이 절대적으로 SelectGenreModel 필요한 경우

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

그런 다음, 당신은 당신의 서비스 호출 및 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.