ASP.NET CORE 2中的AJAX更新字段

我有一个SQL数据库，只有一个数据表。其中一个领域是分类。我已经建立了一个ASP.NET核心2应用程序使用实体框架所有最新和最伟大的。。。我想制作一个页面，列出这些项目3-6千个项目。。。最终用户将使用此列表对这些项目进行分类

该列表内容广泛，分类为三个离散项的selectlist。我已经显示了这些选择项的列表，我希望用户只需进行新的选择，并异步完成更新

    <div class="row">
<div class="col-xs-6 master">
    <div class="list-group-item list-group-item-action align-items-start list-group-applications-header">Applications</div>
    <div class="list-group list-group-applications">
        <div>
        </div>
        @foreach (var item in Model)
        {
            <form asp-controller="Applications" asp-action="UpdateClassification" id="@item.Applicationid" method="post">
                <div class="list-group-item list-group-item-action align-items-start">

                    @Html.AntiForgeryToken()
                    <input type="hidden" asp-for="@item.Applicationid" id="applicationid" />
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="pull-left">@item.Name</h5>
                        <h5 class="pull-right">@item.Version</h5>
                    </div>
                    <select asp-for=@item.Classification asp-items="@ViewBag.ClassificationOptions" id="classification" class="form-control classification"></select>

                    @*<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                        <small>Donec id elit non mi porta.</small>*@
                </div>
            </form>
        }
    </div>
    <div class="list-group-item list-group-item-action align-items-start list-group-applications-footer">Footer</div>
</div>

<div class="col-xs-6 detail">

</div>

我的问题与AJAX更新有关。。。我已经取得了一些成功，但我无法获得一致性。。。我希望用户只需从列表中进行选择，并在后台异步完成更新。我需要一些帮助来完成这项任务。这可能吗？我应该用另一种方式来做吗

任何帮助都将不胜感激

以下是我的观点：

@section Scripts {
<script type="text/javascript">
    function updateClassification() {

        self = this;

        console.log(this);

        var data = { id: $('#applicationid').val(), classification: $('#classification').val() };
        var token = $('input[name=__RequestVerificationToken]').attr('value');
        var dataWithToken = $.extend(data, { token });

        $.ajax({
            url: "/Applications/UpdateClassification",
            type: "POST",
            data: dataWithToken,
            success: function (result) {
                console.log(result);
            },
            error: function (result) {
                console.log(result);
            }
        });
    }

    $(".classification").on('change', updateClassification);
</script>

---

}

您的代码将使用相同的id属性值在循环中呈现Applicationid的隐藏输入元素。这意味着您将有多个id属性值设置为applicationid的元素。这是无效的HTML。元素Id在页面中应该是唯一的

因此，由于您有多个具有相同Id值的项，当您使用$'applicationid'.val和$'classification'.val读取所选下拉列表的值及其关联的隐藏输入时，您将始终获得循环中第一个项的值，这显然是错误的

您实际上不需要Id来读取值。可以使用相对jQuery选择器读取相应的隐藏输入值。只需删除id=applicationid部分。删除循环中Select元素的硬编码id

<input type="hidden" asp-for="@item.Applicationid"  />

---

代码将在循环中使用相同的id属性值呈现Applicationid的隐藏输入元素。这意味着您将有多个id属性值设置为applicationid的元素。这是无效的HTML。元素Id在页面中应该是唯一的

因此，由于您有多个具有相同Id值的项，当您使用$'applicationid'.val和$'classification'.val读取所选下拉列表的值及其关联的隐藏输入时，您将始终获得循环中第一个项的值，这显然是错误的

您实际上不需要Id来读取值。可以使用相对jQuery选择器读取相应的隐藏输入值。只需删除id=applicationid部分。删除循环中Select元素的硬编码id

<input type="hidden" asp-for="@item.Applicationid"  />