从控制器MVC ASP 4中的列表框中获取项目(Get items from listbox in controller MVC ASP 4)

网站建设860 更新时间：2025-06-19 04:34:09

我有一个可以创建频道的页面。渠道有与他们相关的流派。

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

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

I have a page where you can create channels. Channels have genres associated with them.

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>

The view SelectGenre.cshtml looks like this:

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

The controller looks like this:

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

The SelectGenreModel looks like this:

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

When i submit the form, both lists in the SelectGenreModel is null.

How can i pass these lists to the view?

最满意答案

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

为了处理你正在努力完成的任务，我建议创建另一个模型来表示表单发布数据。在这种情况下：

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

在你看来，在提交事件中有javascript钩子来自动选择ChosenGenres中的所有选项，以便根据你的用户界面正在做的事情正确地发布它们。

然后，如果您绝对需要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"); }

The reason why it is not deserializing is because the form data posted back does not match the format that MVC is expecting for array mapping.

To approach what you are trying to accomplish, I would recommend creating another model to represent the form posted data. In this case:

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

And in your view, have javascript hook into the submit event to automatically select all of the options in ChosenGenres so they are properly posted back according to what your UI is doing.

Then, if you absolutely need the SelectGenreModel, you repopulate using your service call and the data posted back 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"); }从控制器MVC ASP 4中的列表框中获取项目(Get items from listbox in controller MVC ASP 4)