从控制器MVC ASP 4的列表框中获取项目

本文关键字：获取 项目 列表 控制器 MVC ASP | 更新日期: 2023-09-27 18:14:29

我有一个可以创建频道的页面。频道有与之相关的类型。

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。

如何将这些列表传递给视图?

从控制器MVC ASP 4的列表框中获取项目

不进行反序列化的原因是返回的表单数据与MVC期望的数组映射的格式不匹配。

接近你想要完成的，我建议创建另一个模型来表示表单发布的数据。在本例中:

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

在你的视图中，有一个javascript钩子到提交事件，自动选择所有的选项在chosengenre，所以他们是正确的返回根据你的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");
}
相关文章：