[英]remove items to a bound list model in ASP MVC.NET
我按照在線教程使用 ajax 將項目動態添加到綁定列表模型,效果很好。 ( http://www.mattlunn.me.uk/blog/2014/08/how-to-dynamically-via-ajax-add-new-items-to-a-bound-list-model-in-asp-mvc -net/comment-page-2/#comment-68909 )
我的問題是,如何正確地從列表中刪除項目? 現在我所做的是添加一個刪除鏈接,單擊該鏈接時會從視圖中刪除該項目。 但是,當我提交表單時,我注意到 modelState 不再有效,並且對於從視圖中刪除的項目,它具有空條目。 所以我猜模型沒有更新。
測試.cshtml
@model TesterManager.Models.Test
<div class="form-group">
@Html.LabelFor(model => model.Software, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="form-group">
<div class="col-md-5">
@Html.DropDownListFor(m => m.Software, TesterManager.Models.Helper.GetTestSoftwares(), "Choose a USB Card", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Software, "", new { @class = "text-danger" })
</div>
<div class="col-md-5">
@Html.EditorFor(model => model.Version, new { htmlAttributes = new { @class = "form-control", @title = "Enter a USB FW Version", @placeholder = "Enter a USB FW Version" } })
@Html.ValidationMessageFor(model => model.Version, "", new { @class = "text-danger" })
</div>
<div class="col-md-2">
<a href="#" id="remove-test" onclick="$(this).parent().parent().parent().parent().remove();">Delete</a>
</div>
</div>
</div>
</div>
AdminTesterConfigurations.cshtml(片段):
@model TesterManager.Models.AdminTesterConfigurations
<div class="form-group">
<div class="col-md-6">
....
</div>
</div>
<hr />
<div class="form-group">
<div class="col-md-12">
<h3>Test Software</h3>
<div id="test-list">
@Html.EditorForMany(x => x.Tests, x => x.Index)
</div>
<input type="button" id="add-test" value="Add" />
</div>
</div>
RequestEditViewModel.cshtml:
@model TesterManager.Models.RequestEditViewModel
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.EditorFor(model => model.ShippingLocation)
@Html.EditorFor(model => model.RequesterTesterConfigurations)
@Html.EditorFor(model => model.AdminTesterConfigurations)
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
編輯.cshtml:
@model TesterManager.Models.RequestEditViewModel
@Styles.Render("~/Content/Edit")
@{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Scripts
{
<script>
jQuery(document).ready(function ($) {
$('#add-test').on('click', function () {
jQuery.get('/TesterManager/Request/AddTest').done(function (html) {
$('#test-list').append(html);
});
});
});
</script>
}
@using (Html.BeginForm())
{
<h2>Edit</h2>
@Html.AntiForgeryToken()
@Html.EditorFor(x => x);
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
請求控制器.cs
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(RequestEditViewModel request)
{
if (ModelState.IsValid)
{
Request domainRequest = new Request(request);
requests.Add(domainRequest);
return RedirectToAction("Index");
}
return View(request);
}
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult AddTest()
{
var request = new RequestEditViewModel();
request.AdminTesterConfigurations.Tests.Add(new Test());
return View(request);
}
我意識到問題在於,當我從視圖中的列表中刪除項目時,我並沒有刪除集合索引器的隱藏輸入。 我更新了代碼以刪除隱藏的輸入,現在工作正常。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.