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调用，该调用将使用不包含删除的行的更新数据集返回部分视图视图，并用具有正确索引的新HTML替换旧的部分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);
}

类似的东西。...

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

1 个答案: