好的,所以我正在尝试使用带有列表框的视图模型,这样当我将项目添加到列表框然后发布表单时,这些项目将通过视图模型传递到操作中。
视图模型:
public virtual ICollection<Sku> Skus { get; set; } //This is this items sku's
public virtual ICollection<Sku> AllSkus { get; set; } //This is all sku's
我的列表框如下所示:
@Html.ListBoxFor(m=>m.Skus, new MultiSelectList(Model.Skus, "Id", "Name"), new { id = "skuList", style="width: 200px; height: 100px" })
我有一个充满所有 skus 的表,当我选择一个时,它会使用 jquery 添加到列表框中。(我将在下面发布所有代码)
我的接收操作(skus 为空):
[HttpPost]
public ActionResult AddProductOffering(ProductOfferingModel model)
{
return View(model);
}
项目添加到列表框就好了,但是发布后模型仍然为空。
显然我只是在更新列表框而不是模型,我不知道如何以这种方式将两者联系在一起。
任何帮助将不胜感激,谢谢!
(更新)完整的 .cshtml 文件:
@using Web.ControlPanel.Helpers
@model Web.ControlPanel.ViewModels.Offering.ProductOfferingModel
@using (Html.BeginForm())
{
<h2>Product Offering</h2>
<br />
@Html.LabelFor(m => m.Name)
@Html.EditorFor(m => m.Name)
<br />
<br />
<label>Offerings Skus</label><br/>
@Html.ListBoxFor(m=>m.Skus, new MultiSelectList(Model.Skus, "Id", "Name"), new { id = "skuList", style="width: 200px; height: 100px" })
<br/><br/>
<button class="button" type="submit" value="Save">Save</button>
<br/><br/><br/>
<h3>All Skus</h3>
<p>
Search: @Html.TextBox("skuFilter")
<input type="submit" value="Search Skus" name="search" />
</p>
<table class="onepx" style="width: 80%">
<tr>
<td colspan="4" style="text-align: right;">
@Html.Pager("List", Model.SkuPager, 3, (string)ViewBag.SkuFilter)
</td>
</tr>
<thead>
<tr style="font-weight: bold;">
<td>Product</td>
<td>Sku</td>
<td>List Price</td>
<td>MSRP</td>
<td>Action</td>
</tr>
</thead>
<tbody>
@if (Model.Skus != null)
{
foreach (var sku in Model.AllSkus)
{
<tr>
<td>
@Html.DisplayFor(m => sku.Product.Name)
</td>
<td>
<label id="skuName@(sku.Id)">@sku.Name</label>
</td>
<td>$@Html.DisplayFor(m => sku.ListPrice)
</td>
<td>$@Html.DisplayFor(m => sku.Msrp)
</td>
<td>
<a href="#" class="AddSku" id="addSku@(sku.Id)">Add To Offering</a>
</td>
</tr>
}
}
</tbody>
<tfoot>
<tr>
<td colspan="4" style="text-align: right;">
@Html.Pager("List", Model.SkuPager, 3, (string)ViewBag.SkuFilter)
</td>
</tr>
</tfoot>
</table>
}
@section Scripts {
<script>
$(document).ready(function() {
//Array of skus
var skus = new Array();
$('.AddSku').click(function(e) {
e.preventDefault();
var id = e.target.id.replace("addSku", "");
var exists = false;
for (var i = 0; i < skus.length; i++) {
if (skus[i] == id) {
exists = true;
}
}
if (!exists) {
var name = $("#skuName" + id).text();
$('#skuList').append('<option value=' + id + '>' + name + '</option>');
skus.push(id);
}
});
});
</script>
}