ASP.Net button第一次点击js中的回调函数不执行,第二次点击才执行

ASP.Net  button第一次点击js中的回调函数不执行,第二次点击才执行

问题描述:

前台:

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheIndexOnce.aspx.cs" Inherits="Monkey.Web.admin.CheIndexOnce" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>管理员登录</title>
    <link href="skin/login/Site.css" rel="stylesheet" />
    <script type="text/javascript" src="../scripts/jquery/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //检测IE
            if ('undefined' == typeof (document.body.style.maxHeight)) {
                window.location.href = 'ie6update.html';
            }
        });

        function jsFunction() {
            PageMethods.Encrypt(document.getElementById("txtUserName").value, jiami);
            PageMethods.Encrypt(document.getElementById("txtPassword").value, jiami2);
            if (document.getElementById("posx").value != "") {
                document.getElementById("txtPassword").value = "";
                return true;
            }
            return false;
        }



        function jiami(val)       //回传方法用val接受后台代码的执行结果
        {
            document.getElementById("posx").value = val;
        }
        function jiami2(val)       //回传方法用val接受后台代码的执行结果
        {
            document.getElementById("posx2").value = val;
        }
    </script>
</head>

<body class="login_body">
    <div class="login">
        <div class="content">
            <div class="logo">
                <div class="logo_content">
                    <img src="skin/login/180.png" />
                    <div class="right_logo">
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="footer_content">
                <hr />

                <form id="form1" runat="server" class="form-login">
                     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> </asp:ScriptManager>
                    <ul>
                        <li>
                        <li>
                            <input id="txtUserName" type="text" class="loginipt user login-input " placeholder="用户名" title="用户名" /></li>
                        <li>
                            <input id="txtPassword" type="password" class="loginipt password login-input" autocomplete="off" placeholder="密码" title="密码" /></li>
                        <li>
                            <label id="msgtip" runat="server" class="logintext"></label>
                        </li>
                            <asp:Button ID="btnSubmit" runat="server" Text="登录"  CssClass="loginbtn login-btn" OnClick="btnSubmit_Click" /> 
                         </ul>
                    <asp:HiddenField ID="posx" runat="server" />
                    <asp:HiddenField ID="posx2" runat="server" />
                </form>

            </div>
        </div>
        <div class="footer">
            <p></p>
        </div>
    </div>
</body>
</html>

后台:

 using System;
using System.Web.UI;
using Monkey.Common;
using System.Security.Cryptography;
using System.Configuration;
using System.Web;
using System.Text;
using System.Web.Services;


namespace Monkey.Web.admin
{
    public partial class CheIndexOnce : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                //txtUserName.Text = Utils.GetCookie(DTKeys.COOKIE_URL_ADMIN_NAME);
                btnSubmit.Attributes.Add("OnClick", "return jsFunction()");  
            }

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            string key = "ae125efkk4454eeff444ferfkny6oxi8";
            string userName = "";
            string userPwd = "";
            try
            {
                userName = Request.Params["posx"];
                userPwd = Request.Params["posx2"];
                userName = Decrypt(userName, key);
                userPwd = Decrypt(userPwd, key);
            }
            catch {
                return;
            }

            if (userName.Equals("") || userPwd.Equals(""))
            {
                msgtip.InnerHtml = "请输入用户名或密码";
                return;
            }

            if (Session[DTKeys.COOKIE_URL_ADMIN_LOGIN_SUN] == null)
            {
                Session[DTKeys.COOKIE_URL_ADMIN_LOGIN_SUN] = 1;
            }
            else
            {
                Session[DTKeys.COOKIE_URL_ADMIN_LOGIN_SUN] = Convert.ToInt32(Session["AdminLoginSun"]) + 1;
            }
            //判断登录错误次数
            if (Session[DTKeys.COOKIE_URL_ADMIN_LOGIN_SUN] != null && Convert.ToInt32(Session[DTKeys.COOKIE_URL_ADMIN_LOGIN_SUN]) > 5)
            {
                msgtip.InnerHtml = "错误超过5次,关闭浏览器重新登录!";
                return;
            }

            BLL.manager bll = new BLL.manager();
            Model.manager model = bll.GetModel(userName, userPwd, true);
            if (model == null)
            {
                msgtip.InnerHtml = "用户名或密码有误,请重试!";
                return;
            }

            Session[DTKeys.SESSION_ADMIN_INFO] = model;
            Session.Timeout = 45;
            //写入登录日志
            Model.siteconfig siteConfig = new BLL.siteconfig().loadConfig();
            if (siteConfig.logstatus > 0)
            {
                new BLL.manager_log().Add(model.id, model.user_name, DTEnums.ActionEnum.Login.ToString(), "用户登录");
            }

            //写入Cookies
            Utils.WriteCookie(DTKeys.COOKIE_URL_ADMIN_NAME, model.user_name, 14400);

            //跳转
            Response.Redirect("index.aspx");
            return;
        }

        /// <summary>
        /// AES加密
        /// </summary>
        /// <param name="encryptStr">明文</param>
        /// <param name="key">密钥</param>
        /// <returns></returns>
        [WebMethod]
        public static string Encrypt(string encryptStr)
        {

                string key = "ae125efkk4454eeff444ferfkny6oxi8";
                byte[] keyArray = UTF8Encoding.UTF8.GetBytes(key);
                byte[] toEncryptArray = UTF8Encoding.UTF8.GetBytes(encryptStr);
                RijndaelManaged rDel = new RijndaelManaged();
                rDel.Key = keyArray;
                rDel.Mode = CipherMode.ECB;
                rDel.Padding = PaddingMode.PKCS7;
                ICryptoTransform cTransform = rDel.CreateEncryptor();
                byte[] resultArray = cTransform.TransformFinalBlock(toEncryptArray, 0, toEncryptArray.Length);
                return Convert.ToBase64String(resultArray, 0, resultArray.Length);
        }

        /// <summary>
        /// AES解密
        /// </summary>
        /// <param name="decryptStr">密文</param>
        /// <param name="key">密钥</param>
        /// <returns></returns>
        public static string Decrypt(string decryptStr, string key)
        {
            byte[] keyArray = UTF8Encoding.UTF8.GetBytes(key);
            byte[] toEncryptArray = Convert.FromBase64String(decryptStr);
            RijndaelManaged rDel = new RijndaelManaged();
            rDel.Key = keyArray;
            rDel.Mode = CipherMode.ECB;
            rDel.Padding = PaddingMode.PKCS7;
            ICryptoTransform cTransform = rDel.CreateDecryptor();
            byte[] resultArray = cTransform.TransformFinalBlock(toEncryptArray, 0, toEncryptArray.Length);
            return UTF8Encoding.UTF8.GetString(resultArray);
        }
    }
}

没用过微软的ScriptManager,自己看下是否有同步的配置,下面2个改同步请求,而不是异步
PageMethods.Encrypt(document.getElementById("txtUserName").value, jiami);
PageMethods.Encrypt(document.getElementById("txtPassword").value, jiami2);

用死循环来挂起后续代码执行等异步操作结果返回行这个得看浏览器内核如何处理了,chrome应该是死循环也会执行异步回调,其他浏览器可能异步操作都挂起了,所以一直假死

异步的话你得改变你的思路,不能在jsFunction调用Encrypt,而是改为txtUserName,txtPassword的blur事件中调用,原理的话caozhy已经说得很明白了

         $(function () {
            //检测IE
            if ('undefined' == typeof (document.body.style.maxHeight)) {
                window.location.href = 'ie6update.html';
            }
            /////////
            document.getElementById("txtUserName").onblur = function () { PageMethods.Encrypt(document.getElementById("txtUserName").value, jiami); }
            document.getElementById("txtPassword").onblur = function () { PageMethods.Encrypt(document.getElementById("txtPassword").value, jiami2); }
        });

        function jsFunction() {//在blur事件中执行Encrypt请求
            ///PageMethods.Encrypt(document.getElementById("txtUserName").value, jiami);
            //PageMethods.Encrypt(document.getElementById("txtPassword").value, jiami2);
            if (document.getElementById("posx").value != "") {
                document.getElementById("txtPassword").value = "";
                return true;
            }

PageMethods.Encrypt是异步执行的
也就是说,回调函数jiami尚未设置文本框
if (document.getElementById("posx").value != "")
等等
这里已经执行,并且return了

而第二次执行,因为上次执行设置了文本框,所以点了链接能判断(严格来说,第二次只是借用第一次的结果,第二次的结果还是没出来)

你可以加上死循环等待文本框设置了,再往下执行。

 var bjiami = false;
var bjiami1 = false;
function jsFunction() {
bjiami = false;
bjiami1 = false;
        PageMethods.Encrypt(document.getElementById("txtUserName").value, jiami);
        PageMethods.Encrypt(document.getElementById("txtPassword").value, jiami2);
                while (!bjiami || !bjiami1); //等待
        if (document.getElementById("posx").value != "") {
            document.getElementById("txtPassword").value = "";
            return true;
        }
        return false;
    }



    function jiami(val)       //回传方法用val接受后台代码的执行结果
    {
        document.getElementById("posx").value = val;
                bjiami = true;
    }
    function jiami2(val)       //回传方法用val接受后台代码的执行结果
    {
        document.getElementById("posx2").value = val;
                bjiami1 = true;
    }