私はMVCとJQueryにかなり慣れていません。MVC4を使用しています。フィールドを編集できるインデックスビューがあります。新しい行を追加するために使用するために、リストの下部に空白行を追加できるようにしたいと思います。これまでの私の仕事は、MVC 2のこの例に基づいています:http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
これが私のインデックスビューです:
@using (Html.BeginForm()) {
<h3 style="margin-top: 1px;">
<input type="hidden" name="selectedConditionID" value="@ViewBag.SelectedConditionID" />
<input type="hidden" name="isCore" />
<input type="submit" value="Save" />
@Html.ActionLink("Add Condition Detail", "BlankEditorRow", null, new { id="addItem"})
</h3>
<div class="table" id="editorRows">
@for (var i = 0; i < Model.Count; ++i) {
ViewBag.i = i;
Html.RenderPartial("_ConditionDetailEditorRow", Model[i]);
}
</div>
<div>
@Html.ActionLink("Back to Condition Library", null, "Home")
</div>
}
部分的なビューは次のとおりです。
<div class="editorRow">
@if (@ViewBag.i == 0) {
<div class="header-row">
<div class="header-cell">@Html.DisplayNameFor(model => model.StackRank)</div>
<div class="header-cell">@Html.DisplayNameFor(model => model.ID)</div> ...
<div class="header-cell">Options</div>
</div>
}
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
int i = @ViewBag.i;
<div class="body-cell">
@Html.TextBoxFor(m => m.StackRank)
@Html.ValidationMessageFor(m => m.StackRank)
</div>
<div class="body-cell">
@Html.DisplayFor(m => m.ID)
</div> ...
<div class="body-cell">
@Html.ActionLink("Edit", "Edit", new { id=Model.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=Model.ID })
</div>
}
これが私のインデックスビューのJQueryで、インデックスリストの最後に空白行が追加される原因になっています。
$(function () {
$("#addItem").click(function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) { $("#editorRows").append(html); }
});
return false;
});
});
コントローラの方法は次のとおりです。
public PartialViewResult BlankEditorRow()
{
ViewBag.i = 0;
return PartialView("_ConditionDetailEditorRow", new Condition_Details());
}
問題は次のとおりです。[インデックス]ページの[条件の詳細を追加]アクションリンクをクリックすると、部分ビューのページのみが表示されます(... // localhost:56213 / ConfigurationUI / ConditionDetails / BlankEditorRow / addItem)。
私が欲しいのは、インデックスページの下部に表示される空白の行です。URLは次のようになると思います:... // localhost:56213 / ConfigurationUI / ConditionDetails / Index/addItem。
JQueryスクリプトが起動していないのではないかと思いますが、理由がわかりません。
どうしたの?
ありがとう!
私は解決策を考え出しました:
テーブル全体を部分ビューに配置します。
改訂されたインデックスビュー
<div id="condition_detailsList">
@{ Html.RenderPartial("_ConditionDetailsEdit", Model); }
</div>
部分ビューの改訂
<table id="condition_detailsList">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model[0].StackRank)
</th>...
</tr>
</thead>
<tbody id="editorRows">
@for (var i = 0; i < Model.Count; ++i) {
<tr style="margin:0; padding:0; border:0;">
<td> <div>
@Html.TextBoxFor(m => m[i].StackRank)
@Html.ValidationMessageFor(m => m[i].StackRank)
</div> </td>...
</tr>
@Html.HiddenFor(m => m[i].ID, new { @id = "hID" + i })...
}
</tbody>
Ajaxを使用したインデックスビューから、コントローラーでpostメソッドを呼び出しました
$(function () {
$('#addItem').click(function () {
$.ajax({
cache: false,
type: "POST",
url: "@(Url.Action("GetNewRow", "ConditionDetails"))",
data: { "conditionID": cID },
success: function (condition_detailsListPlusNewRow) {
//initialize fields...
コントローラで、新しい行を部分ビューに戻しました
[HttpPost]
public ActionResult GetNewRow(int conditionID) //, List<Condition_Details> conditionDetails)
{
//you must initial the index view here, then...
//retrieve the list, add a new row and return the partial view
var condition_details = db.Condition_Details.Where(x => x.Condition_ID == conditionID).OrderBy(x => x.StackRank).ThenBy(x => x.ID).ToList();
Condition_Details conditionDetail = new Condition_Details();
List<Condition_Details> condition_detailsPlusNewRow = new List<Condition_Details>();
foreach (var row in condition_details)
{
conditionDetail = row;
condition_detailsPlusNewRow.Add(conditionDetail);
}
Condition_Details newRow = new Condition_Details();
newRow.Condition_ID = conditionDetail.Condition_ID;
newRow.Condition = conditionDetail.Condition;
newRow.StackRank = conditionDetail.StackRank + 1;
condition_detailsPlusNewRow.Add(newRow);
return PartialView("_ConditionDetailsEdit", condition_detailsPlusNewRow);
}