Просмотр компонента, не рендеринга должным образом через AJAX

Question

Я создал сайт, где пользователи могут изменять различные типы данных с помощью нескольких компонентов представления. Когда я вызываю эти компоненты вида при начальной загрузке страницы, все работает нормально. Однако, когда я пытаюсь обновить компонент представления посредством вызова ajax, любые списки в этих компонентах представления повторяются один и тот же элемент несколько раз, и мои функции jquery перестают работать.

Вот мой основной вид:

@model ContractModel
@using Portal.ViewComponents

@{
    ViewData["Title"] = "Contract View";
}

...

<div id="ResultModel_Scope_Facplan">
   @await Component.InvokeAsync("ContractPart", new { contractPartName = "Model_Scope_Facplan", projectName = Model.ProjectName })
</div>

Мой Аякс:

@section Scripts {

    <script>
        $.ajaxSetup({ cache: false });


                $(".PartialButton").click(function (event) {
            event.preventDefault();
            var ElementID = event.target.id.split("-");
            var contractPart = ElementID[0];
            var contractAction = ElementID[1];
            var actionValue = ElementID[2];
            console.log($("#Form" + contractPart + actionValue).serialize() + "&ProjectName=@(Model.ProjectName)&contractAction=" + contractAction);
            console.log(ElementID);
            $.ajax({
                url: "@(Url.Action(""))/" + contractPart,
                type: "POST",
                data: $("#Form" + contractPart + actionValue).serialize()+"&ProjectName=@(Model.ProjectName)&contractAction=" + contractAction,
                success: function (data) {
                    //Fill div with results
                    alert(data);
                    //debugger;
                    $("#Result" + contractPart).html(data);
                },
                error: failedSearch(contractPart)
            });
        });


        function failedSearch(ElementID) {
           // alert(ElementID + " failed!");
          //  $("#Result"+ElementID).html = "There was a problem in the search. Please try again later.";
        }
    </script>
}

Мой фактический вызов компонента представления довольно прост (просто отправляет правильные данные в правильное представление).

public IViewComponentResult Invoke(string contractPartName, string projectName)
{
    return View(contractPartName, FindContractPart(contractPartName, projectName));

}

И просмотр компонента шаблона:

@model IEnumerable<Model_Scope_Facplan>

@if (@Model != null)
{
    <div class="row">
        Care Provider &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Payer

    </div>

                @for (int i = 0; i < Model.Count(); i++)
                {
                    <form id="FormModel_Scope_Facplan@(i)" action="">
                        <div class="form-horizontal">
                                <div class="col-md-3">
                                    <input asp-for=@Model.ElementAt(i).CareProviderID class="form-control" />
                                </div>
                                <div class="col-md-3">
                                    <input asp-for=@Model.ElementAt(i).PayerID  class="form-control" />
                                </div>
                            <span class="glyphicon glyphicon-minus DeleteItem PartialButton" style="color:blue;" id="Model_Scope_Facplan-Delete-@(i)"></span>
                        </div>
                   </form>
                   <br/>
                }
    <form id="FormModel_Scope_Facplan@(Model.Count())" action="">
        <div class="form-horizontal">
            <div class="col-md-3">
                <input name=CareProviderID class="form-control" />
            </div>
            <div class="col-md-3">
                <input name=PayerID class="form-control" />
            </div>
            <span class="glyphicon glyphicon-plus AddItem PartialButton" style="color:blue;" id="Model_Scope_Facplan-Create-@(Model.Count())"></span>

        </div>
    </form>
}

Viewcomponent возвращает правильный шаблон представления, и при отладке я вижу, что ViewComponentResult.ViewData.Model включает соответствующие записи в списке. Однако страница, обновляемая после вызова ajax, включает в себя только один элемент снова и снова. Что я делаю неправильно?

Answer 1

Похоже, мой цикл for в представлении разрывался - я предполагаю, что функция ElementAt(i) по какой-то причине не работала после вызова ajax. В итоге я переключился на цикл foreach, и теперь все работает.