不同浏览器中的LinkBut​​ton PageMethod行为不一致

时间:2013-12-12 21:37:21

标签: c# javascript ajax cross-browser webmethod

我在一个执行回发的页面上有一个LinkBut​​ton,但也有onClientClick个事件。我们的想法是在客户端数据的背景中设置一些会话变量(不要问)。

我已经在网络方法中设置了一个断点来逐步完成我们的代码,我们遇到的是,根据浏览器的不同,PageMethods可能会返回成功消息,失败消息或< em>根本没有消息。此外,无论PageMethods结果如何,都可以调用或不调用Web方法。

这是一个方便的结果小图表:

Browser          PageMethods    WebMethod
--------------   -------------  --------------------
IE 8, 9, 10      Success        Called successfully
Safari 5.1.7     Failure        *Never called*
Firefox 25.0.1   *Neither*      Called successfully
Chrome v31       Failure        Called successfully

这四种不同的浏览器,以及四种不同的结果。

我尝试在服务器端和客户端代码中生成具有相同效果的链接按钮,甚至没有在WebMethod中设置会话变量,结果相同。

可以使用以下简单代码复制代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript">

    function doStuff() {
        var a = 'a';
        var b = 'b';

        PageMethods.doStuffWebMethod(a, b, doStuffSuccess, doStuffFail);
    }

    function doStuffSuccess() {
        alert(Success!');
    }
    function doStuffFail() {
        alert(Failure!');
    }

</script>

<html>
    <body style="background-color:#f3f4f6;" >

        <form runat="server" name="mainForm" id="mainForm" action="Test.aspx">

            <asp:ScriptManager ID="ScriptManager1"  EnablePageMethods="true" runat="server"></asp:ScriptManager>

            <asp:LinkButton runat="server" CausesValidation="false" OnClientClick="doStuff();">Do stuff!</asp:LinkButton>

        </form>
    </body>
</html>

protected void Page_Load(object sender, EventArgs e)
{
    LinkButton lbAdd = new LinkButton();
    lbAdd.Text = "Web method test";
    lbAdd.CausesValidation = false;
    lbAdd.OnClientClick = "doStuff();";
    mainForm.Controls.Add(lbAdd);
}

[WebMethod]
public static void doStuffWebMethod(string a, string b)
{
    try
    {
        //System.Web.HttpContext.Current.Session["a"] = a;
        //System.Web.HttpContext.Current.Session["b"] = b;
        string x = a + b;
    }
    catch (Exception ex)
    {
        //
    }
}

问题:

为什么我的网络方法在Safari中失败,并在三个其他浏览器中给我三个不同的返回消息之一?

如何更改此代码以使其在上述浏览器中正常工作?

1 个答案:

答案 0 :(得分:5)

调用您的Web方法失败的原因是因为 你没有取消LinkButton的回发。 您必须从OnClientClick事件返回false才能取消 回发。下面的代码应该修复它:

function doStuff() {
  var a = 'a';
  var b = 'b';

  PageMethods.doStuffWebMethod(a, b, doStuffSuccess, doStuffFail);
  return false; // Cancel postback.
}

function doStuffSuccess() {
  alert('Success!');
}

function doStuffFail() {
  alert('Failure!');
}

<asp:LinkButton ID="mybutton"  runat="server" CausesValidation="false" OnClientClick="return doStuff();">Do stuff!</asp:LinkButton>

有关取消浏览器默认行为的更复杂解决方案(回发),请查看以下stackoverflow question and answer

您获得不同浏览器的不同结果的原因可能是由于浏览器供应商的不同实现。但我不确定这一点。

您还可以通过创建网络协议跟踪来验证此行为 (在Google Chrome浏览器中按F12并切换到网络标签页。)

如果您没有从doStuff()方法返回false,则为协议:

  1. 调用页面方法doStuffWebMethod。然后你会得到JavaScript消息框。 ( HTTP POST
  2. 请求您的WebForm.aspx。 ( HTTP POST
  3. 然后请求WebResource.axd和ScriptResource.axd。 ( HTTP GET
  4. 数字2和3.表示在页面方法请求之后执行回发。

    如果您从doStuff()方法返回false,则为协议:

    1. 仅调用页面方法doStuffWebMethod。 ( HTTP POST
    2. 第二条跟踪清楚地表明没有回发执行。

      如果您希望LinkBut​​ton发生回发,那么您可以在页面方法返回后使用__doPostBack()方法在JavaScript成功处理程序中手动触发回发:

      function doStuffSuccess() {
        alert('Success!');
      
        __doPostBack('<%= mybutton.UniqueID %>', '');  // trigger the postback.
      }