动态删除行后从视图中发布的值不正确

Question

我可以选择在表单中动态添加和删除行。在提交表单之前，如果我删除最后一行它工作正常但如果我删除任何其他不在序列中的行然后添加一行然后提交表单它在我的模型中发布错误的值（即它改变了新的数据行到上一行的数据）

我正在使用隐藏字段，但这没有帮助。主视图呈现包含行数据的部分视图。我尝试过使用 EditorFor，但这也无济于事。

主视图：

@using (Html.BeginForm("Submit", "TimeEntry", FormMethod.Post, new { 
@class= "form-container" }))
{
 <div id="times">
    @{Html.RenderPartial("TimeTable", Model);}    
 </div>
<input name="Submit" class="form-control btn btn-primary" type="submit" 
id="submit" value="Submit" />
}

查看模型：

 public class TimeFilter
{
  public List<TimeItemWeekly> TimeItemWeekly { get; set; }
}

 public class TimeItemWeekly
  {
     public string SelectedJob { get; set; }
     public List<SelectListItem> Job { get; set; }
     public string SelectedServiceItem { get; set; }
     public List<SelectListItem> ServiceItem { get; set; }
   }

局部视图：

@model NWwebappCS.Models.TimeFilter

@if (Model.TimeItemWeekly != null)
{
for (int i = 0; i < Model.TimeItemWeekly.Count(); i++)
{        
    <div class="row-container @(Model.TimeItemWeekly[i].HasError ? 
        <div class="row">
            <input type="hidden" name="TimeItemWeekly.Index" value="@i" />
            <div class="customer-details">
                @Html.DropDownListFor(x => x.TimeItemWeekly[i].SelectedJob, 
                Model.TimeItemWeekly[i].Job, new { @class = "jobs select 
                form-control" })
            </div>
            <div class="service-details">
                @if (Model.TimeItemWeekly[i].ServiceItem != null)
                {
                    @Html.DropDownListFor(x => 
                  x.TimeItemWeekly[i].SelectedServiceItem, 
                  Model.TimeItemWeekly[i].ServiceItem, new { @class = 
                  "service-items select" })
                }
                else
                {
                    <select name="TimeItemWeekly[@i].SelectedServiceItem" 
                    class="service-items select">
                        <option></option>
                    </select>
                }
            </div>
    </div>
</div>
}
}

控制器：

[System.Web.Http.HttpPost]
 public ActionResult Submit(Models.TimeFilter Model, string submit)
    {
       switch (submit)
            {
                case "Submit":
                    string errorMessage = ValidateTime(Model);
                    FillLists(Model);
                    if (errorMessage == "")
                    {
                        DataTable timeRows = GetWeekData(Model);
                        DeleteTime(Model, timeRows);
                        SaveTime(Model, timeRows);
                        if (Model.TimeItemWeekly != null)
                        {
                            Model.TimeItemWeekly = 
                        Model.TimeItemWeekly.OrderBy(x => x.Job.Where(y 
              => 
              y.Selected).First().Text).ThenBy(x => x.ServiceItem.Where(y 
              => y.Selected).First().Text).ToList();
                        }
                        GetUserInfo(Model);
                        HasPrivilege(Model);
                        TempData["SuccessMessage"] = "Changes Saved!";
                        return View("~/Views/TimeEntry/Index.cshtml", 
                        Model);
                    }
                    else
                    {
                        TempData["ErrorMessage"] = errorMessage;
                        return View("~/Views/TimeEntry/Index.cshtml", 
                        Model);
                    }
                default:
                    return View("~/Views/TimeEntry/Index.cshtml", Model);
            }
        }
    }

Answer 1

发生这种情况是因为索引乱序并且 mvc 模型绑定器无法正确绑定列表，因为包含索引位置的 name 值不再连续。

解决此问题的一种方法是创建一个 ajax 调用，returns 您的部分视图视图具有更新的数据集，该数据集不包含您删除的行，并替换旧的部分HTML 使用具有正确索引的新索引。

看起来像这样：

删除按钮的 JS 事件：

$(document).on("click", ".red-box", function () {
    var id = 1; // this would be the id of the thing you are removing, if needed
    $.get('/path/to/remove', { id: id }, function(data){
       $("#times").html(data);
    }
});

动作

public ActionResult Remove(int id) {
   // Get data based on id and make any dB updates you need to make

   var model = GetData(); // Get new NWwebappCS.Models.TimeFilter without removed row
   return PartialView("TimeTable", model);
}

类似的东西....

动态删除行后从视图中发布的值不正确

Incorrect values being posted from View after dynamically removing rows

forms

asp.net

asp.net-mvc

http-post