ajax投稿を介して部分ビューが更新されたときに、ページのビューモデルを更新しようとしています。部分ビューは正しく更新されますが、次の更新呼び出しで、モデルは元の状態に戻ったように見えます。
部分ビューはテーブルで、行を追加または削除しています。コードは、これを行う方法に関するアイデアの下に含まれています。
ページコードは
<div class="filters">
<fieldset class="source">
<legend>Search Attributes</legend>
<div id="attributes-filter">
@Html.Partial("_EditSearchQuery")
</div>
</fieldset>
</div>
<div>
<a id="addRowLink" class="add-row-link" href="#">Add new clause</a>
</div>
</div>
</div>
-- 部分的なビューは
<table id="searchClauses" class="clauses">
<tbody>
<tr class="header">
<td class="add-remove"></td>
<td class="logical">And/Or</td>
<td class="field">Field</td>
<td class="operator">Operator</td>
<td class="value">Value</td>
</tr>
@foreach (SearchClause item in Model.searchClauses)
{
<tr class="clause clause-row" id=@item.RowID>
<td class="add-remove">
<a href="#" title="Remove this filter line" id=@item.ID >Delete</a>
</td>
<td>
@Html.DropDownListFor(modelitem => item.logicalTypeValue, new SelectList(item.logicalTypeList, "Value", "Text", "Selected"), new { style = "width: 60px" })
</td>
<td>
@Html.DropDownListFor(modelitem => item.fieldListValue, new SelectList(item.fieldList, "Value", "Text", "Selected"))
</td>
<td>
@Html.DropDownListFor(modelitem => item.operatorListValue, new SelectList(item.operatorList, "Value", "Text", "Selected"), new { style = "width: 60px" })
</td>
<td>
@Html.TextBoxFor(modelitem => item.valuesList[0], new { style = "width: 130px" })
</td>
</tr>
}
</tbody>
- 脚本
<script type="text/javascript">
$(function () {
// Save quiz view - new or existing.
$("#attributes-filter").on("click", "a", function () { // A jQuery delegated event - #EditQuiz is always present, a.SaveQuiz only exists when the _ElearningQuiz partial view is loaded.
deleteRow($(this).attr("id"));
});
function deleteRow (id) {
var rowData = {
'id': id,
'model' : @Html.Raw(Json.Encode(Model))
};
$.ajax({
url: "/Participant/DeleteClause",
type: "POST",
data: JSON.stringify(rowData),
contentType: "application/json; charset=utf-8",
success: function (result) {
$("#attributes-filter").html(result);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Status: " + textStatus + " Error: " + errorThrown);
}
});
};
$("#addRowLink").click(function () {
var model = @Html.Raw(Json.Encode(Model))
$.ajax({
url: "/Participant/AddClause",
type: "POST",
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
success: function (result) {
$("#attributes-filter").html(result);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Status: " + textStatus + " Error: " + errorThrown);
}
});
});
});
</script>
-- コントローラー
[HttpPost]
public ActionResult AddClause(DynamicSearchModel model)
{
int campaignId = SessionManager.CampaignId;
int clientId = SessionManager.ClientId;
var newClause = _participantServiceClient.NewSearchClause(campaignId, clientId, 2);
newClause.ID = model.searchClauses.Count + 1;
model.searchClauses.Add(newClause);
return PartialView("_EditSearchQuery", model);
}
[HttpPost]
public ActionResult DeleteClause(string id, DynamicSearchModel model)
{
int _id = int.Parse(id);
model.searchClauses.RemoveAt(_id - 1);
return PartialView("_EditSearchQuery", model);
}