Блог

Я создаю частичное представление, в котором супервизор щелкнет, и появится модальное окно со всеми людьми, которым они могут назначить задачу. У каждого человека есть флажок напротив его информации. Я присвоил флажкам значение, основанное на идентификационном номере сотрудника. Мне нужно получить значения выбранных флажков и передать их в контроллер в виде списка.

Мой мыслительный процесс заключается в том, чтобы сравнить список сотрудников, которых пользователь может назначить, который я уже создал, с выбранным списком. Наконец, если этот пользователь выбран, он будет сопоставлен с другим списком, чтобы убедиться, что они еще не назначены проекту, а затем запускается метод назначения отдельного пользователя. В настоящее время, не получая выбранных значений, он добавляет в задачу всех участников.

Это моя модель

 public IEnumerablelt;EmployeeCurrentUserCanAssigngt; EmployeesCurrentUserCanAssign { get; set; }  }  public class EmployeeCurrentUserCanAssign  {  public string FirstName { get; set; }  public string LastName { get; set; }  public string EmployeeId { get; set; }  }    

Таково мое Мнение

 lt;div class="modal" id="groupAssignSettingModal" tabindex="-1" role="dialog" data-backdrop="false"gt;  lt;div class="modal-dialog" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h3 class="modal-title"gt;Who would you like to add?lt;/h3gt;  lt;/divgt;  lt;div class="modal-body"gt;  lt;table class="table table-striped"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Selectlt;/thgt;  lt;thgt;First Namelt;/thgt;  lt;thgt;Last Namelt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  @foreach (EmployeeCurrentUserCanAssign employee in Model.EmployeesCurrentUserCanAssign)  {  lt;trgt;  lt;tdgt;@Html.CheckBox("selectedItem", true, new {@value = @employee.EmployeeId})lt;/tdgt;  lt;tdgt;@employee.FirstNamelt;/tdgt;  lt;tdgt;@employee.LastNamelt;/tdgt;  lt;/trgt;  }  lt;/tbodygt;  lt;/tablegt;  lt;/divgt;  lt;div class="modal-footer"gt;  lt;button type="button" class="btn btn-primary" id="btnConfirmGroupAssign"gt;  Assign Checked  lt;/buttongt;  lt;button type="button" class="btn btn-secondary" data-dismiss="modal"gt;  Cancel  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

This is my Controller get and post for this modal

 [HttpGet]  public PartialViewResult AddGroup(int projectNumber)  {  ProjectDetailsDTO project;  ManageTeamModel viewModel;   project = _projectService.GetProjectDetails(projectNumber);  viewModel = MapProjectToManageTeamViewModel(project);  return PartialView("_GroupAssignModal", viewModel);  }   [HttpPost]  public ActionResult GroupAssign(int projectNumber)  {  ProjectDetailsDTO project;  ManageTeamModel viewModel;   project = _projectService.GetProjectDetails(projectNumber);  viewModel = MapProjectToManageTeamViewModel(project);   var empList = viewModel.EmployeesCurrentUserCanAssign.Select(x =gt; x.EmployeeId).ToList();  var assignedList = _projectService.GetTeamMembersDetails(projectNumber).Select(x =gt; x.EmployeeID).ToList();   foreach (var employeeId in empList)  {  try  {  if (!assignedList.Contains(employeeId))  {  _projectService.AssignTeamMember(projectNumber, employeeId, false);  }  }  catch (Exception ex)  {  continue;  }    }   return PartialView("ManageTeam", viewModel);  }  

This is my Scripts for the modal

 _ctx.on('click', '#GroupAssignModalJS', function (e) {  e.preventDefault();   teamService.addGroup(_projectNumber, function (response) {  var bsModal = $(response);  _ctx.append(bsModal);  bsModal.on('hidden.bs.modal', function () {  bsModal.remove();  });   bsModal.modal('show');  });  }); _ctx.on('click', '#btnConfirmGroupAssign', function () {  teamService.groupAssign(_projectNumber, function (response) {  _ctx.find('#groupAssignSettingModal').modal('hide');   _ctx.update(response);  location.reload();  });    });  addGroup: function () {  $.get('./Team/AddGroup', { projectNumber: arguments[0]}, arguments[1]);  }, groupAssign: function () {  $.post('./Team/GroupAssign', { projectNumber: arguments[0] }, arguments[1]);  },  

После довольно большого количества исследований, тестирования и экспериментов я смог добавить форму и перенести данные в коллекцию форм с помощью jQuery. Не уверен, что это лучший способ выполнить то, что я искал, однако для моего случая этого достаточно.

Моя модель осталась прежней.

Мой пост контроллеров значительно изменился, чтобы выполнить то, что мне было нужно. Основной частью было добавление коллекции форм в качестве параметра.

 [HttpPost]  public ActionResult GroupAssign(int projectNumber, FormCollection formCollection)  {  ProjectDetailsDTO project;  ManageTeamModel viewModel;     project = _projectService.GetProjectDetails(projectNumber);  viewModel = MapProjectToManageTeamViewModel(project);    Listlt;stringgt; employeeCollection = new Listlt;stringgt;();  for(int i= 0; ilt; formCollection.AllKeys.Count();   i)  {  {  employeeCollection.Add(formCollection.Get(i));  }  }   try  {  employeeCollection.RemoveAt(0);  }  catch (Exception ex)  {   return ExceptionStatusCode(ex);  }  Listlt;stringgt; selectedEmpList = new Listlt;stringgt;();    foreach(var emp in employeeCollection)  {  if (emp.StartsWith("9"))  {  selectedEmpList.Add(emp);  }  }   var empList = viewModel.EmployeesCurrentUserCanAssign.Select(x =gt; x.EmployeeId).ToList();  var assignedList = _projectService.GetTeamMembersDetails(projectNumber).Select(x =gt; x.EmployeeID).ToList();   foreach (var employeeId in empList)  {  try  {  if (!assignedList.Contains(employeeId) amp;amp; selectedEmpList.Contains(employeeId))  {  _projectService.AssignTeamMember(projectNumber, employeeId, false);  }  }  catch (Exception ex)  {  continue;  }    }   return PartialView("ManageTeam", viewModel);  }  

Мое мнение изменилось очень незначительно. Я добавил тег формы, открывающийся и закрывающийся внутри модального, и изменил кнопку на «Отправить».

 lt;div class="modal" id="groupAssignSettingModal" tabindex="-1" role="dialog" data-backdrop="false"gt;  lt;div class="modal-dialog" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h3 class="modal-title"gt;Who would you like to add?lt;/h3gt;  lt;/divgt;  lt;form id="frmConfirmGroupAssign"gt;  lt;div class="modal-body"gt;  lt;table class="table table-striped"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Selectlt;/thgt;  lt;thgt;First Namelt;/thgt;  lt;thgt;Last Namelt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;trgt;  lt;/trgt;  @foreach (EmployeeCurrentUserCanAssign employee in Model.EmployeesCurrentUserCanAssign)  {  lt;trgt;  lt;tdgt;lt;input type="checkbox" name="selectedemp" checked="checked" value="@employee.EmployeeId" /gt;lt;/tdgt;  lt;tdgt;@employee.FirstNamelt;/tdgt;  lt;tdgt;@employee.LastNamelt;/tdgt;  lt;/trgt;  }  lt;/tbodygt;  lt;/tablegt;  lt;/divgt;  lt;div class="modal-footer"gt;  lt;button type="submit" class="btn btn-primary"gt;  Assign Checked  lt;/buttongt;  lt;button type="button" class="btn btn-secondary" data-dismiss="modal"gt;  Cancel  lt;/buttongt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

Мои сценарии для модальной отправки также немного изменились.

 _ctx.on('submit', '#frmConfirmGroupAssign', function (e) {  var data = $(this).serializeArray();  teamService.groupAssign(_projectNumber, data, function (response) {  _ctx.find('#groupAssignSettingModal').modal('hide');   _ctx.update(response);    });  e.preventDefault();  location.reload();  });  },   groupAssign: function () {  $.post('./Team/GroupAssign', { projectNumber: arguments[0], employeeId: arguments[1]}, arguments[2]);  },  

Большой вывод, который я узнал, заключался в том, как я могу использовать коллекции форм для передачи данных (в данном случае моих значений флажков) обратно в мой контроллер через jQuery. Я надеюсь, что это поможет кому-то еще, кто может столкнуться с подобной проблемой.