@model VendorModel

<div class="card-body">    
    @await Html.PartialAsync("Table", new DataTablesModel
        {
            Name = "vendornotes-grid",
            UrlRead = new DataUrl("VendorNotesSelect", "Vendor", new RouteValueDictionary { [nameof(Model.VendorNoteSearchModel.VendorId)] = Model.VendorNoteSearchModel.VendorId }),
            UrlDelete = new DataUrl("VendorNoteDelete", "Vendor", null),
            Length = Model.VendorNoteSearchModel.PageSize,
            LengthMenu = Model.VendorNoteSearchModel.AvailablePageSizes,
            ColumnCollection = new List<ColumnProperty>
            {
                new ColumnProperty(nameof(VendorNoteModel.CreatedOn))
                {
                    Title = T("Admin.Vendors.VendorNotes.Fields.CreatedOn").Text,
                    Width = "200",
                    Render = new RenderDate()
                },
                new ColumnProperty(nameof(VendorNoteModel.Note))
                {
                    Title = T("Admin.Vendors.VendorNotes.Fields.Note").Text,
                    Encode = false
                },
                new ColumnProperty(nameof(VendorNoteModel.Id))
                {
                    Title = T("Admin.Common.Delete").Text,
                    Width = "100",
                    Render = new RenderButtonRemove(T("Admin.Common.Delete").Text),
                    ClassName =  NopColumnClassDefaults.Button
                }
            }
        })

    <div class="card card-default">
        <div class="card-header">
            @T("Admin.Vendors.VendorNotes.AddTitle")
        </div>
        <div class="card-body">
            <div class="form-group row">
                <div class="col-md-3">
                    <nop-label asp-for="AddVendorNoteMessage" />
                </div>
                <div class="col-md-9">
                    <nop-editor asp-for="AddVendorNoteMessage" />
                    <span asp-validation-for="AddVendorNoteMessage"></span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-9 offset-md-3">
                    <button type="button" id="addVendorNote" class="btn btn-primary">@T("Admin.Vendors.VendorNotes.AddButton")</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#addVendorNote').click(function() {
            var vendorNoteMessage = $("#@Html.IdFor(model => model.AddVendorNoteMessage)").val();
            $('#addVendorNote').attr('disabled', true);

            var postData = {
                message: vendorNoteMessage,
                vendorId: '@(Model.Id)'
            };
            addAntiForgeryToken(postData);

            $.ajax({
                cache: false,
                type: "POST",
                url: "@( Url.Action("VendorNoteAdd", "Vendor"))",
                data: postData,
                success: function (data, textStatus, jqXHR) {
                    if (data.Result) {
                        //reload grid
                        $("#vendornotes-grid").DataTable().ajax.reload();
                    } else {
                        //display errors if returned
                        display_nop_error(data);
                    }
                },
                complete: function (jqXHR, textStatus) {
                    $('#addVendorNote').attr('disabled', false);
                }
            });
        });
    });
</script>