JQuery doesn't get form input value

Question

I have the following code to call controller action using ajax and render partial view using kendo window but it doesn't get form elements.

in my view i used this button

@(Html.Kendo().Button()
            .Name("textButton")
            .Content("Text button")
            .HtmlAttributes( new {type = "button"} )
            .Events(ev => ev.Click("onClick")))

and kendo window

@(Html.Kendo().Window().Name("ValidateAddress")
                .Title(@Localizer["Validate Address"].Value)
                .Visible(false)
                .Modal(true)
                .Draggable(true)
                .Width(500)
)

and here jQuery looks like

   $(document).ready(function () {
        function onClick(e) {                
            var getAddress = {                             
                AddressLine1: $('#AddressLine1').val(),
                AddressLine2: $('#AddressLine2').val(),
                City: $('#City').val()
            };
            var window = $("#ValidateAddress").data("kendoWindow");
            var PopUpTitle = "Validate Address ";
                window.setOptions({
                    title: PopUpTitle,
                    content: ""
                });

                window.refresh({
                    url: "/Address/Address/VerifyAddress",
                    type: "POST",
                    data: JSON.stringify(getAddress),
                    contentType: "application/json; charset=utf-8"
                });
                window.open();
                window.center();
        }

        $("#textButton").kendoButton({
            click: onClick
        });
    });

Answer 1

It looks like Kendo does not uses the id attribute, but the asp-for. Try this:

$(document).ready(function () {
    function onClick(e) {                
        var getAddress = {                             
            AddressLine1: $('[asp-for=AddressLine1]').val(),
            AddressLine2: $('[asp-for=AddressLine2]').val(),
            City: $('#City').val()
        };
        var window = $("[asp-for=ValidateAddress]").data("kendoWindow");
        var PopUpTitle = "Validate Address ";
        window.setOptions({
            title: PopUpTitle,
            content: ""
        });

        window.refresh({
            url: "/Address/Address/VerifyAddress",
            type: "POST",
            data: JSON.stringify(getAddress),
            contentType: "application/json; charset=utf-8"
        });
        window.open();
        window.center();
    }

    $("[asp-for=textButton]").kendoButton({
    click: onClick
    });
});

Or, maybe, you could try to "compatibilize" the Kendo with this

$(document).ready(function () {
    let adjustArray = $("[asp-for]:not([id])");
    adjustArray.each( index => {
        let el = $(adjustArray[index]);
        el.attr('id', el.attr('asp-for'));
    });
    function onClick(e) {                
        var getAddress = {    
            ... continuation of your code