BeginCollectionItem从页面中删除项目

本文关键字：删除项目 BeginCollectionItem | 更新日期: 2023-09-27 18:07:23

我正试图从我在这个问题之后创建的列表中删除项目。功能的添加部分工作得很好。

当我在局部页面的onclick事件中指定一个事件时，我得到一个javascript错误。"'函数名'未定义。"看看它，我认为onclick属性是不需要的，如果jquery是工作的。然而，即使在更新到最新版本的JQuery之后，它也不会检测到点击事件，或者至少不会触发它。

Main_View只是相关的部分

    <table id="pastSchoolContainer">
        <tr>
            <td>
                <input type="button" id="addPastSchool" name="addPastSchool" value="Add School" />
            </td>
        </tr>
        @foreach (var school in Model.SchoolsAttended)
        {
            Html.RenderPartial("_SchoolRemovablePartial", school, new ViewDataDictionary(ViewData)
            {
                TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "SchoolsAttended" }
            });
        }
    </table>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(document).ready(function () {
            $("#addPastSchool").click(function () {
                $.ajax({
                    async: false,
                    url: '/Student/AddPastSchool',
                }).success(function (partialView) {
                    $("#pastSchoolContainer").append(partialView);
                    return;
                });
            });
            return;
        });
        $("#addPastSchool").on("click", ".deleteRow", function () {
            $(this).parents("#pastSchool:first").remove();
            return false;
        });
    </script>
}

_SchoolRemovablePartial 

@model ScholarSponsor.Models.SchoolModel
@using ScholarSponsor.Helper
@using (Html.BeginCollectionItem("pastSchool"))
{
    <tr id="pastSchool">
        <td>
            @Html.EditorForModel()
            <br />
            @*<a href="#" id="deleteRow" class="deleteRow" onclick="deleteFunction()">Delete</a>*@
            <input type="button" class="deleteRow" value="Remove School" onclick="remove()" />
        </td>
    </tr>
}

BeginCollectionItem从页面中删除项目

扩展Stephen的回答，remove函数需要在文档准备好时运行的函数中。此外，按钮不应该有onclick属性。

相关代码段如下所示:

Main_View 

    <table id="pastSchoolContainer">
        <tr>
            <td>
                <input type="button" id="addPastSchool" name="addPastSchool" value="Add School" />
            </td>
        </tr>
        @foreach (var school in Model.SchoolsAttended)
        {
            Html.RenderPartial("_SchoolRemovablePartial", school, new ViewDataDictionary(ViewData)
            {
                TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "SchoolsAttended" }
            });
        }
    </table>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(document).ready(function () {
            $("#addPastSchool").click(function () {
                $.ajax({
                    async: false,
                    url: '/Student/AddPastSchool',
                }).success(function (partialView) {
                    $("#pastSchoolContainer").append(partialView);
                    return;
                });
            });
            $("#pastSchoolContainer").on("click", ".deleteRow", function () {
                $(this).closest(".pastSchool").remove();
                return;
            });
        });
    </script>
}

_SchoolRemovablePartial 

@model ScholarSponsor.Models.SchoolModel
@using ScholarSponsor.Helper
@using (Html.BeginCollectionItem("pastSchool"))
{
    <tr class="pastSchool">
        <td>
            @Html.EditorForModel()
            <br />
            <input type="button" class="deleteRow" value="Remove School" />
        </td>
    </tr>
}
相关文章：