Ajax call from Asp.net Razor page

Question

I have a Register.cshtml page where I also like to add a close button outside the Form.

<button type="button" id="MyCloseBtn" class="btn-close" method="post" aria-label="Close" style="margin-left: auto; margin-right: 0;"></button> Do not see any issue.

The idea is when the close button is clicked; it should switch to the index page. For some reason, the click event is always activated without connecting. Why? I just want to switch when the close button is clicked.

https://1drv.ms/f/s!AtjIdnVOoJXtpNthBNsruHOX_s8Riw?e=SCbjis

<script type="text/javascript" language="javascript">

        const mycomp = document.getElementById('MyCloseBtn');
        mycomp.addEventListener('click', (e) => loginButtonClickedHandler(e));


        function loginButtonClickedHandler(e) {
        @{
            // like to RedirectToPage("./Index");
        }
            

        }
    </script>

Answer 1

I thing you are asking how to write a JavaScript redirect. https://developer.mozilla.org/en-US/docs/Web/API/Window/location

window.location = "/Index";

Answer 2

in xxx.cshtml

I want to close the form. The best way is to bring a close button inside the Form and visually place close button at the desired location with margins. Use button attribute asp-page-handler="BackToIndex".

and in xxx.cshtml.cs

public IActionResult OnPostBackToIndex()
        {
            return RedirectToPage("/Index");
        }

It works fine. Please note you have to add OnPost part of the function.