AJAX Update Field in ASP.NET CORE 2

Question

I have a SQL Database with a single table of data. One of the fields is "classification". I have built an ASP.NET Core 2 application using Entity Framework (all the latest and greatest)... I want to produce a page with a list of these items (3-6 thousand items)... This list will be used by end-users to classify these items.

This list is extensive and the classification is a selectlist of three discrete items. I have displayed a list of these "select" items and I would like the user to simply have to make a new selection and have the update complete asynchronously...

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

My question is related to AJAX updating... I have had "some" success, but I cannot get consistency... I would like to have the users simply make the selection from the list, and have the update done asynchronously in the background. I need some assistance with how to accomplish this task. Is this possible? Should I be doing this in a different way?

Any help would be very much appreciated!

This is at the bottom of my view:

@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

Your code will be rendering hidden input element for Applicationid inside the loop with the same id property value. That means you will have more than one element with id attribute value set to " applicationid ". This is invalid HTML. Element Id's should be unique in the page.

So since you have multiple items with the same Id value, you will always get the values for the first item in the loop when you use $('#applicationid').val() and $('#classification').val() to read the value of the selected dropdown and it's associated hidden input, which is clearly wrong!

You do not really need the Id to read the value. You can read the correspnding hidden input value using relative jQuery selectors. Simply remove the id="applicationid" part. Remove the hard coded id for the Select element as well inside the loop.

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

Now in your change event, you can use closest method to get a reference to the container form tag and then use find method to get the value of this hidden input. Here i am using the name selector.

$(".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
});