vb.net JQuery Mobile + ASP.NET - 按钮未触发

JQuery Mobile + ASP.NET - Buttons Not Firing

提问by Steve

I have been searching through this site for an answer but I'm stuck.

我一直在通过这个网站寻找答案，但我被卡住了。

Can someone please help me with the following question. I have a ASP.NET project written in VB and uses the jQuery Mobile 1.2.0 version.

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

I have a default page where there are 2 buttons (login / about), these work and redirect to the login page. However on the login page the login button event does not fire - it simply re-directs back to the default page. The same is true on the about page with a simple redirect button.

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

If I however refresh the login page then the buttons work?

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

Below is the code:

下面是代码：

<%@ 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>

Thanks for your help in advance.

提前感谢您的帮助。

Further to this - I have looked up how to disable jQuery Mobile and have added the code to the site master where the jQuery is referenced - however still no joy!

除此之外 - 我已经查找了如何禁用 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>

Anyone else got any ideas?

其他人有任何想法吗？

采纳答案by Brandon Montgomery

After you refresh the login page, you will see that the form looks like this:

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

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

However, if you notice, when you first navigate to http://seq-dev.rs-mcd.co.uk/, then click "Login", the <form>element on the login page looks like this:

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

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

Notice that the form doesn't have the correct actionor onsubmitvalues which are required for ASP .NET to work properly.

请注意，该表单没有正确的action或onsubmitASP .NET 正常工作所需的值。

I don't have too much experience with jQuery Mobile, but I do see that it's doing its "AJAX navigation" magic, which is screwing with ASP .NET. Generally speaking, ASP .NET doesn't play nicely with jQuery mobile (or the other way around?). Maybe you can disable AJAX navigation somehow - that might do the trick. You're going to continue to run into this problem with server side events in ASP .NET if you can't disable the AJAX navigation.

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

Hopefully this points you in the right direction.

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

EDIT

编辑

After some searching, I found this blog postwhich explains how to disable the jQuery Mobile AJAX Navigation. Here's the relevant snippet:

经过一番搜索，我找到了这篇博文，其中解释了如何禁用 jQuery Mobile AJAX 导航。这是相关的片段：

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

Hope this helps!

希望这可以帮助！

回答by Rajendra Pathi

Open the jQuery-mobile.jsand search for "submit", the submit behavior is differently implemented in mobile version of .js.

打开jQuery-mobile.js并搜索“提交”，提交行为在.js.

So please comment that submit function in mobile js, then your asp.net forms will be submitted according to its behavior.

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

Commenting on that submit behavior in mobile js, you will not loose any features, so just comment it out.

在 mobile 中评论该提交行为js，您不会丢失任何功能，因此只需将其注释掉即可。