Display JavaScript alert before Response.Redirect in ASP.Net

Hello,

How do I get a message box and then page redirect codes separately? In the code below I have the JavaScript working fine. Also the message box in the code behind works as well.

The issue is when I separate the message box from the page redirect, it skips the message box and executes the page redirect only.

What I want is to first show the message box separately and after I click ok to redirect. 

What am I doing wrong?

Here is the JavaScript:

<scripttype="text/javascript">
    $(function () {
        Validate();
    });
 
    function Validate() {
        $(document).on('click', '[ID*=BtnLogin]', function () {
            if (document.getElementById("<%=txtUsername.ClientID%>").value === '') {
                alert("Username field is empty, Please fill in a Username.");
                document.getElementById("<%=txtUsername.ClientID%>").focus();
                return false();
            }
        });
    }
</script>

<form id="form1" runat="server">
    <asp:ScriptManagerID="ScriptManager1"runat="server"EnablePageMethods="true"EnableCdn="true"></asp:ScriptManager>
    <asp:PanelID="Panel1"runat="server"DefaultButton="BtnLogin">
        <asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBoxID="txtUsername"runat="server"></asp:TextBox>
                <asp:ButtonID="BtnLogin"runat="server"OnClick="BtnLogin_Click"OnClientClick="Validate();"Text="Button"/>
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTriggerControlID="BtnLogin"/>
            </Triggers>
        </asp:UpdatePanel>
    </asp:Panel>
</form>

And this is the codebehind I am trying to achieve:

protectedvoid BtnLogin_Click(object sender, EventArgs e)
{
    if (txtUsername.Text != "")
    {
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "myalert", "alert('Hello');", true);
        Response.Redirect("Test2.aspx");
    }
}