JQuery Mobile + ASP.NET - Les boutons ne se déclenchent pas

Question

J'ai recherché sur ce site une réponse mais je suis bloqué.

Quelqu'un peut-il s'il vous plaît aidez-moi avec la question suivante. J'ai un projet ASP.NET écrit en VB et utilise la version jQuery Mobile 1.2.0.

J'ai une page par défaut où il y a 2 boutons (login/about), ceux-ci fonctionnent et redirigent vers la page de connexion. Cependant, sur la page de connexion, l'événement du bouton de connexion ne se déclenche pas - il redirige simplement vers la page par défaut. La même chose est vraie sur la page about avec un simple bouton de redirection. Si j'actualise cependant la page de connexion, les boutons fonctionnent-ils?

est Ci-dessous le 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> 

Merci pour votre aide à l'avance. En plus de cela - J'ai cherché comment désactiver jQuery Mobile et ai ajouté le code au maître du site où le jQuery est référencé - mais toujours pas de joie!

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

Quelqu'un d'autre a-t-il des idées?

Answer 1

Une fois que vous actualisez la page de connexion, vous verrez que la forme ressemble à ceci:

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

Cependant, si vous remarquez, quand vous naviguer vers http://seq-dev.rs-mcd.co.uk/, puis cliquez sur « Connexion », l'élément <form> sur la page de connexion ressemble à ceci:

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

Notez que le formulaire ne pas les action ou onsubmit valeurs correctes qui sont nécessaires pour ASP .NET pour fonctionner correctement.

Je n'ai pas trop d'expérience avec jQuery Mobile, mais je vois qu'il fait sa magie de la "navigation AJAX", qui se débrouille avec ASP .NET. De manière générale, ASP .NET ne fonctionne pas bien avec jQuery mobile (ou inversement?). Peut-être que vous pouvez désactiver la navigation AJAX en quelque sorte - cela pourrait faire l'affaire. Vous allez continuer à rencontrer ce problème avec les événements côté serveur dans ASP .NET si vous ne pouvez pas désactiver la navigation AJAX.

Espérons que cela vous indique la bonne direction.

EDIT

Après quelques recherches, je trouve this blog post qui explique comment désactiver la navigation AJAX jQuery Mobile. Voici l'extrait pertinent:

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

Espérons que cela aide!

Answer 2

Ouvrez le jQuery-mobile.js et de rechercher "soumettre", le comportement de soumission est différemment mis en œuvre dans la version mobile de .js.

Alors s'il vous plaît commenter cette fonction de soumission dans le mobile js, alors vos formulaires asp.net seront soumis en fonction de son comportement.Commentant sur ce comportement de soumission dans le mobile js, vous ne perdrez aucune fonctionnalité, il suffit de commenter.