C# 视图组件未通过AJAX正确渲染

我已经建立了一个网站，用户可以通过多个视图组件更改各种类型的数据。当我在初始页面加载时调用这些视图组件时，一切正常。但是，当我尝试通过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>

和视图组件模板：

@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>
}

@model IEnumerable
@如果（@Model！=null）
{
护理提供者付款人
@对于（int i=0；i
}
}

---

viewcomponent正在返回正确的视图模板，在调试过程中，我可以看到ViewComponentResult.ViewData.Model在列表中包含了相应的条目。但是，在ajax调用之后更新的页面只反复包含一个元素。我做错了什么？

视图中的for循环似乎中断了-我猜ElementAt（I）函数在ajax调用后由于某种原因无法工作。最后我切换到foreach循环，现在一切都正常了。

此外，使用

foreach

的优点是，在任何时候需要

I

th元素时，都不必再次迭代

IEnumerable

。在本例中，您做了两次。

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>
}