將項目移除到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）將項目移除到ASP中的綁定列表模型MVC.NET

我的問題是，我將如何正確地從列表中刪除項目？現在我所做的是添加一個刪除鏈接，點擊時從視圖中刪除該項目。但是，當我提交表單時，我注意到modelState不再有效，並且對於從視圖中移除的項目，它具有空條目。所以我猜這個模型沒有被更新。

Test.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>

Edit.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>

個

RequestController.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); 
    }

來源

2016-05-04 AndeeC

請參閱答案[這裏]（http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796）和[這裏]（http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308＃28081308） - 您需要集合索引器的隱藏輸入。 –

我正在使用本教程中引用的擴展。我可以做@ Html.EditorForMany（x => x.Tests，x => x.Index）它將隱藏的輸入與索引相加。讓我知道如果我誤解你 – AndeeC

如果該擴展方法正常工作，那麼你的問題是什麼？我只能假設它不起作用，在這種情況下，如果您想獲得最佳性能，請使用'BeginCollectionItem（）'HtmlHelper（請參閱第二個鏈接）或客戶端模板選項。 –

我意識到問題是，當我將從列表中視圖中刪除的項目，我並沒有消除對集合索引隱藏的輸入，以及。我更新了代碼以刪除隱藏的輸入，現在它工作正常。

來源

2016-05-04 23:33:26 AndeeC

將項目移除到ASP中的綁定列表模型MVC.NET

回答

相關問題