ASP.NET核心2中的AJAX更新字段

Question

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

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

    <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值相同的项，所以当您使用和$('#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
});