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循环在视图中打破了 - 我猜想由于某种原因，在ajax调用后，ElementAt（i）函数无效。我最终切换到foreach循环，现在一切正常。

通过AJAX查看组件无法正确呈现

1 个答案: