こんにちは、本日はよろしくお願いします！
(1) ビューにバインドされているビューモデル(MyViewModel.cs)は次のとおりです...
public class MyViewModel
{
public int ParentId { get; set; } //property1
List<Item> ItemList {get; set;} //property2
public MyViewModel() //Constructor
{
ItemList=new List<Item>(); //creating an empty list of items
}
}
(2)以下のように(MyView.cshtml ビューから) ajax ポストバックを介してアクション メソッドを呼び出しています。
function AddItem() {
var form = $('#MyForm');
var serializedform = form.serialize();
$.ajax({
type: 'POST',
url: '@Url.Content("~/MyArea/MyController/AddItem")',
cache: false,
data: serializedform,
success: function (html) {$('#MyForm').html(html);}
});
}
下のボタンをクリックすると、ajax ポストバックが呼び出されます...
<input type="button" value="Add" class="Previousbtn" onclick="AddItem()" />
（3）以下のように（MyController.csコントローラー）にアクションメソッドがあります...
public ActionResult AddItem(MyViewModel ViewModel)
{
ViewModel.ItemList.Add(new Item());
return View("MyView", ViewModel);
}
問題は、アクションから戻った後、ビューモデルにデータがないことです。しかし、3回目のポストバックでデータを取得できました!! 解決策を教えてください..
ビュー内の完全なフォーム コードは以下のとおりです...
@model MyViewModel
<script type="text/javascript" language="javascript">
function AddItem() {
var form = $('#MyForm');
var serializedform = form.serialize();
$.ajax({
type: 'POST',
url: '@Url.Content("~/MyArea/MyController/AddItem")',
cache: false,
data: serializedform,
success: function (html) {
$('#MyForm').html(html);
}
});
}
function RemoveItem() {
var form = $('#MyForm');
var serializedform = form.serialize();
$.ajax({
type: 'POST',
url: '@Url.Content("~/MyArea/MyController/RemoveItem")',
cache: false,
data: serializedform,
success: function (html) {
$('#MyForm').html(html);
}
});
}
function SaveItems() {
var form = $('#MyForm');
var serializedform = forModel.serialize();
$.ajax({
type: 'POST',
url: '@Url.Content("~/MyArea/MyController/SaveItems")',
cache: false,
data: serializedform,
success: function (html) {
$('#MyForm').html(html);
}
});
}
</script>
@using (Html.BeginForm("SaveItems", "MyController", FormMethod.Post, new { id = "MyForm" }))
{
@Html.HiddenFor(m => Model.ParentId)
<div>
<input type="button" value="Save" onclick="SaveItems()" />
</div>
<div>
<table>
<tr>
<td style="width: 48%;">
<div style="height: 500px; width: 100%; overflow: auto">
<table>
<thead>
<tr>
<th style="width: 80%;">
Item
</th>
<th style="width: 10%">
Select
</th>
</tr>
</thead>
@for (int i = 0; i < Model.ItemList.Count; i++)
{
@Html.HiddenFor(m => Model.ItemList[i].ItemId)
@Html.HiddenFor(m => Model.ItemList[i].ItemName)
<tr>
@if (Model.ItemList[i].ItemId > 0)
{
<td style="width: 80%; background-color:gray;">
@Html.DisplayFor(m => Model.ItemList[i].ItemName)
</td>
<td style="width: 10%; background-color:gray;">
<img src="@Url.Content("~/Images/tick.png")" alt="Added"/>
@Html.HiddenFor(m => Model.ItemList[i].IsSelected)
</td>
}
else
{
<td style="width: 80%;">
@Html.DisplayFor(m => Model.ItemList[i].ItemName)
</td>
<td style="width: 10%">
@if ((Model.ItemList[i].IsSelected != null) && (Model.ItemList[i].IsSelected != false))
{
<img src="@Url.Content("~/Images/tick.png")" alt="Added"/>
}
else
{
@Html.CheckBoxFor(m => Model.ItemList[i].IsSelected, new { @style = "cursor:pointer" })
}
</td>
}
</tr>
}
</table>
</div>
</td>
<td style="width: 4%; vertical-align: middle">
<input type="button" value="Add" onclick="AddItem()" />
<input type="button" value="Remove" onclick="RemoveItem()" />
</td>
</tr>
</table>
</div>
}