Неправильные значения, публикуемые в представлении после динамического удаления строк

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 новым, который имеет правильные индексы.

Это будет выглядеть примерно так:

Событие 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);
}

Что-то в этом роде ...