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

Question

我有一个带有单个数据表的 SQL 数据库。其中一个领域是“分类”。我已经使用 Entity Framework（所有最新和最好的）构建了一个 ASP.NET Core 2 应用程序......我想生成一个包含这些项目（3-6 千个项目）列表的页面......这个列表将被使用由最终用户对这些项目进行分类。

这个列表很广泛，分类是三个离散项目的选择列表。我已经显示了这些“选择”项目的列表，我希望用户只需进行新选择并异步完成更新...

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

}

Answer 1

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

因此，由于您有多个具有相同 Id 值的项目，当您使用 $('#applicationid').val() 和 $('#classification').val() 读取选定的下拉菜单及其关联的隐藏输入，这显然是错误的！

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

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

现在在您的change 事件中，您可以使用closest 方法获取对容器form 标记的引用，然后使用find 方法获取此隐藏输入的值。这里我使用名称选择器。

$(".classification").on('change', function(){

    var classificationId = $(this).val();
    var applicationId = $(this).closest("form").find("[name='item.Applicationid']").val();

     alert(classificationId);
     alert(applicationId);
     //Use these 2 values for the ajax call
});