c# - 从 Controller MVC ASP 4 中的列表框中获取项目

Question

我有一个页面，您可以在其中创建 channel 。 channel 具有与之关联的流派。

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 View 如下所示:

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

Controller 看起来像这样:

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 中的两个列表都是空的。

如何将这些列表传递给 View ？

Answer 1

之所以没有反序列化，是因为返回的表单数据与 MVC 期望的数组映射格式不匹配。

为了接近您想要完成的目标，我建议您创建另一个模型来表示表单发布的数据。在这种情况下:

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

在您看来，让 javascript Hook 到提交事件中以自动选择 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");
}