【问题标题】：JQuery Mobile + ASP.NET - Buttons Not FiringJQuery Mobile + ASP.NET - 按钮不触发
【发布时间】：2012-11-18 17:13:49
【问题描述】：

我一直在这个网站上寻找答案，但我被困住了。

有人可以帮我解决以下问题吗？我有一个用 VB 编写的 ASP.NET 项目，使用的是 jQuery Mobile 1.2.0 版本。

我有一个默认页面，其中有 2 个按钮（登录 / 关于），这些按钮可以工作并重定向到登录页面。但是在登录页面上，登录按钮事件不会触发 - 它只是重新定向回默认页面。带有简单重定向按钮的 about 页面也是如此。

如果我刷新登录页面，那么按钮是否有效？

下面是代码：

<%@ Page Title="Login" Language="vb" EnableEventValidation="false" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="login.aspx.vb" Inherits="Sequencing.login" %>
<asp:Content ID="Content1" ContentPlaceHolderID="page_title" runat="server">
Login
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="pageheader" runat="server">
<h1>Login</h1>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="body" runat="server">

<asp:LinkButton ID="LinkButton1" data-role="button" data-rel="dialog" 
    data-transition="pop" runat="server" 
    Visible="False">LinkButton</asp:LinkButton>

<div align=center class="ui-bar ui-bar-c">

<asp:Image ID="Image1" runat="server" ImageUrl="~/images/McD_logoimage.png" /><br />

<h3>Planning the Future</h3>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>

<asp:Login ID="Login1" DestinationPageUrl="~/user/Main.aspx" runat="server" Width="100%">
<LayoutTemplate>
<asp:TextBox ID="UserName" runat="server" value placeholder="Username"></asp:TextBox>
<asp:RequiredFieldValidator ID="cvUserName" runat="server" ControlToValidate="UserName" ToolTip="User Name is required." ValidationGroup="Login1" Display="Dynamic">    </asp:RequiredFieldValidator>
<asp:TextBox ID="Password" runat="server" type="password" runat="server" value placeholder="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="cvPassword" runat="server" ControlToValidate="Password"     ToolTip="Password is required." ValidationGroup="Login1" Display="Dynamic">            </asp:RequiredFieldValidator>
<asp:CheckBox ID="RememberMe" runat="server" Text="Remember me!" />
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
<asp:Button ID="LoginButton" runat="server" data-role="button" data-theme="b"     CommandName="Login" Text="Log In" ValidationGroup="Login1" onclick="LoginButton_Click" />
    </LayoutTemplate>
</asp:Login>
    </ContentTemplate> 
</asp:UpdatePanel>
</div>
</asp:Content>

提前感谢您的帮助。

除此之外 - 我已经查看了如何禁用 jQuery Mobile 并将代码添加到引用 jQuery 的站点主控器中 - 但是仍然没有乐趣！

<script>
    $(document).bind("mobileinit", function () {
        //apply overrides here
        $.mobile.ajaxEnabled = false;
    });
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">    </script>
<script type="text/javascript"     src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

其他人有什么想法吗？

【问题讨论】：

我们无法为您提供该代码。也许只有当你拥有它的时候。 jQuery mobile 有时会在动态创建的 div 中移动页面，这通常在表单之外，这就是没有触发的原因。
对不起，我不知道你的意思是什么？我已经发布了这个网站 - 它也不能在现场工作。
你能给我们测试的网址吗？看看出了什么问题。
ewww... 更新面板。可能是问题的一部分
seq-dev.rs-mcd.co.uk - 在默认页面上单击“登录”按钮，然后您将看到单击登录控件上的登录按钮时会发生什么 - 事件不会触发并返回默认值页。如果您在单击登录按钮之前刷新页面，它可以正常工作吗？！

标签： jquery asp.net vb.net jquery-mobile

【解决方案1】：

打开jQuery-mobile.js并搜索“提交”，提交行为在.js的移动版中实现不同。

所以请评论一下手机js中的提交功能，然后您的asp.net表单将根据其行为提交。

在手机js 中评论该提交行为，您不会丢失任何功能，因此只需将其评论。

【讨论】：

【解决方案2】：

刷新登录页面后，您会看到表单如下所示：

<form method="post" action="Login.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1" class="ui-mobile-viewport ui-overlay-c">

但是，如果您注意到，当您第一次导航到 http://seq-dev.rs-mcd.co.uk/，然后单击“登录”时，登录页面上的 <form> 元素如下所示：

<form method="post" action="" id="form1" class="ui-mobile-viewport ui-overlay-c">

请注意，表单没有正确的 action 或 onsubmit 值，这是 ASP .NET 正常工作所必需的。

我没有太多使用 jQuery Mobile 的经验，但我确实看到它正在发挥其“AJAX 导航”的魔力，这与 ASP .NET 相去甚远。一般来说，ASP .NET 不能很好地与 jQuery mobile 配合使用（或者相反？）。也许您可以以某种方式禁用 AJAX 导航 - 这可能会奏效。如果您无法禁用 AJAX 导航，您将继续在 ASP .NET 中遇到服务器端事件的问题。

希望这会为您指明正确的方向。

编辑

经过一番搜索，我找到了this blog post，它解释了如何禁用 jQuery Mobile AJAX 导航。这是相关的sn-p：

<script type="text/javascript">
  $(function() {
    // disable ajax nav
    $.mobile.ajaxLinksEnabled = false;
  });
</script>

希望这会有所帮助！

【讨论】：

我已经禁用了脚本管理器和更新面板，它仍然是一样的。它仍然表现相同。
你误会了。 ASP .NET 不会导致问题。删除更新面板和脚本管理器将无济于事。您需要禁用 jQuery Mobile 的 AJAX 导航行为。
啊，我明白了 - 你知道怎么做吗？
史蒂夫，请查看我刚刚在我最新编辑的答案中添加的代码。希望这对您有所帮助！
谢谢 - 我在其他地方找到了这个，但似乎没有什么不同......但是它现在正在工作，但不知道为什么？！

【解决方案3】：

您需要将提交行为设置为 false，然后添加如下所示的 OnClick 事件。

.aspx 页面 - asp:Button runat="server" ID="btnSubmit" Text="Submit" CssClass="Button" UseSubmitBehavior="false" OnClick="btnSubmit_Click">

.aspx.vb 页面 -

区域“按钮点击提交”

Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)

    Response.Redirect("CanegateMidShiftTempB6TY.aspx")

End Sub

结束区域

【讨论】：