さて、リストボックスでビューモデルを使用しようとしています。リストボックスにアイテムを追加してフォームを投稿すると、それらのアイテムはビューモデルを介してアクションに引き継がれます。
ViewModel:
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" })
すべてのSKUでいっぱいのテーブルがあり、1つを選択すると、jqueryを使用してリストボックスに追加されます。(以下にすべてのコードを投稿します)
私の受信アクション(skusはnullです):
[HttpPost]
public ActionResult AddProductOffering(ProductOfferingModel model)
{
return View(model);
}
アイテムはリストボックスに問題なく追加されていますが、投稿後もモデルはnullのままです。
明らかに、私はモデルではなくリストボックスを更新しているだけです。この方法で2つを結び付ける方法がわかりません。
どんな助けでも大歓迎です、ありがとう!
(更新)完全な.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>
}