Как направить модальное переключение данных на контроллер?

Question

У меня есть список таблиц для формы опроса, и у каждого из них есть кнопка / asp-действие, чтобы просмотреть ответы по крайней мере 3 конкурентов.но мне нужно выбрать конкурентов в форме опроса, используя модальное.внутри этого модального я должен заполнить тело с флажком конкурентов, которые ответили на эту форму опроса.Как я могу протолкнуть, чтобы направить модальное переключение данных на контроллер?

Вот мой взгляд:

 @for (int i = 0; i < Model.SurveyNames.Count; i++)
      {
        <tr>
            <td>
                @Model.SurveyNames[i].SurveyName
            </td>
            <td>
                @Model.SurveyNames[i].SurveyFor
            </td>
            <td>
                @Model.SurveyNames[i].Description
            </td>
            <td>
                @Model.SurveyNames[i].CreatedBy
            </td>
            <td>
                @Model.SurveyNames[i].Status
            </td>

            <td>
                <!-- Button trigger modal -->
                <a asp-action="ViewCompetitors" asp-route-id="@Model.SurveyNames[i].Id" data-toggle="modal" data-target="#ChooseCompetitors">View Competitors</a>
            </td>
        </tr>
}

И это мой контроллер, он должен возвращать значения модального индекса:

public IActionResult Index(int? id)
        {
            var model = new CompetitorAnswerViewModel();
            var SurveyList = _context.MainSurvey.ToList();

             foreach (var zsurvey in SurveyList)
            {
                model.SurveyNames.Add(new survey { Id = zsurvey.Id, SurveyName = zsurvey.SurveyName, SurveyFor = zsurvey.SurveyFor,Description = zsurvey.Description,CreatedBy = zsurvey.CreatedBy,Status = zsurvey.Status}) ;
            }

            var competitorList = _context.SurveyCompetitor.ToList().Where(x => x.MainSurveyId == id);

             foreach (var competitors in competitorList)
            {
                model.CompetitorNames.Add(new Competitor { CompetitorName = competitors.CompetitorName});
            }
            return View(model);
        }

Я должен заполнить телофлажок конкурентов, которые ответили на эту форму опроса.Но он не пересылает контроллеру всякий раз, когда я нажимаю «Просмотреть конкурентов».

Answer 1

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

Вы можете поставить Competitors просмотр в частичном представлении и отображение его в Index представлении с использованием ajax.

1.Создание частичного представления в папке Shared /Views/Shared/_CompetitorsPartialView.cshtml

@model YourViewModel
<div class="col-md-12">
Your View
</div>

2.Возврат отфильтрованных данных в это представление вида

public IActionResult ViewCompetitors(int id)
    {
        // filter logic
        return PartialView("_CompetitorsPartialView",YourViewModel);
    }

3.Используйте ajax в представлении Index.

Измените <a> на <button>:

<button id = "ViewCompetitors" onclick="viewCompetitor(@item.CustomerId)">View Competitors</button>

Модальные и AJAX:

<div class="modal fade" id="ChooseCompetitors" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Header</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div id="showresults"></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

</div>
</div>
@section Scripts{ 
<script>
    function viewCompetitor(id) {
        $.ajax({
            type: 'Get',
            url: '/Home/ViewCompetitors/' + id,//your url
            success: function (result) {
                $("#ChooseCompetitors").modal();//open modal
                $('#showresults').html(result);//populate view to modal

            }
        })
    }
</script>
}