首页 > 解决方案 > 为什么我的部分视图没有加载正确的内容?

问题描述

我有我的部分视图,其中包含

@model List<Destination>
    @for (var i = 0; i < Model.Count; i++)
    {
       @Html.HiddenFor(model => model[i].Id)
       <div class="form-row">
           <div class="form-group col-md-10">
                <label>@Html.LabelFor(model => model[i].Path) ( @(i + 1) )</label>
                <input type="text" value=@Model[i].Path/>  
                @Html.TextBoxFor(model => model[i].Path, new { @class = "form-control", required = "required" , title = "My custom error message")

            @Html.ValidationMessageFor(model => model[i].Path)
        </div>
        <button class="btn btn-outline-danger" onclick="deleteField(event, 
        '@Model[i].Id');">
                    <i class="fas fa-trash-alt"></i>
                </button>
    }

我添加了包含 value 的输入@Model[i].Path,因为我收到了一个列表,我可以在列表中添加和删除。如果我在删除 3 项目时有一个列表index i=1,它总是会删除最后一个索引,因此它会删除最后一个项目。为了测试接收输入是否正确,我添加了输入,是的,值是正确的,但是在 中textboxfor,该值没有重新加载并且包含旧值。

第二点即使对于自定义的消息错误,对于列表的第一个输入,它不会重新加载为新的自定义消息,对于列表中添加的元素,消息是自定义的。

我该如何解决这两个问题,在发送模型的服务器和填充局部视图的时间之间似乎有些问题。对象都是正确的。

编辑:要更新部分视图,例如删除元素

public ActionResult SupprimerChampDestination(Destinations model, int idToDelete)
        {
            model.Path.RemoveAll(elementToDelete => elementToDelete.Id == idToDelete);
            ViewData.TemplateInfo.HtmlFieldPrefix = Constante.PrefixPartialViewDestination;
            return PartialView(Vues.Paths.Destination, model.Path);
        }

和 JS:

function deleteField(event, clickedId) {
            event.preventDefault();
            var model = $("#Form").serialize();
            debugger;
            $.ajax({
                type: 'POST',
                url: '@Url.Action("SupprimerChampDestination", "PathsController")',
                data: model + "&idToDelete=" + clickedId,
                success: function (response) {
                    debugger;
                    console.log(response);
                    $("#destinationMultiple").html(response);

                },
                error: function(xhr, textStatus, error) {
                    console.log(xhr.statusText);
                    console.log(textStatus);
                    console.log(error);
                }
            });
        }

$("#destinationMultiple") 是包含我加载结果的部分视图的 div。

谢谢

标签: c#asp.netasp.net-mvcrazorpartial-views

解决方案


推荐阅读