ASP.NET webform error with JQuery Mobile

Question

Here is my effort for using JQuery mobile with asp.net webform. Below is the code I have used in the Default.aspx page. It's a very simple code

Below is the complete code of the aspx page.

  <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title> Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js">
    </script>
</head>
<body>
    <form id="form1" runat="server">
  <!-- Start of first page -->
<div data-role="page" id="foo">
    <div data-role="header">
        <h1>Mobile Login</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <table width="100%">
           <tr width="100%">
             <td width="30%" align="right" valign="middle">
               <asp:Literal ID="lblUserName" runat="server" Text="User Name"></asp:Literal>
             </td>
             <td width="50%">
               &nbsp;&nbsp;
                <input type="text" maxlength="20" id="UserName" style="width:50%;"  runat="server" />
             </td>
           </tr>
            <tr width="100%">
             <td width="50%"  align="right">
             <asp:Literal ID="Literal1" runat="server" Text="Password"></asp:Literal>
             </td>
             <td width="50%">
              &nbsp;&nbsp; <input type="text" maxlength="20" id="Password" style="width:50%;" runat="server" />
             </td>
           </tr>
            <tr width="100%">
             <td width="50%" align="right">

             </td>
             <td width="50%">
                <table width="100%">
                    <tr>
                      <td width="30%">
                        <asp:Button ID="btnLogin" runat="server" Text="Login"
                         OnClick="btnLogin_Click" />
                      </td>
                      <td width="30%">
                       <asp:Button ID="btnCancel" runat="server" Text="Cancel"  CssClass="ui-btn-active"
                         OnClick="btnCancel_Click" />
                      </td>
                      <td width="40%">

                      </td>
                    </tr>
                </table>
             </td>
           </tr>
        </table>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>
          @ All right reserved.
        </h4>
    </div><!-- /footer -->
</div><!-- /page -->

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

Now on the server side

  protected void btnLogin_Click(object sender, EventArgs e)
{
    Response.Redirect("Home.aspx",true);

}
protected void btnCancel_Click(object sender, EventArgs e)
{
    UserName.Value = "";
    Password.Value = ""; 
}

but when I am clicking the login/cancel button nothing happen other than the Url is changed from

http://localhost:2278/Mobile/Default.aspx

to

http://localhost:2278/Mobile/Default.aspx#/Mobile/Default.aspx

What is wrong in my code? Can't I access Server side functions from ASP.NET server controls in JQuery Mobile? I am aware that it can be done better in MVC but that's not a option for me in this case.

Please help

Ruslan · Accepted Answer · 2011-07-11 10:22:32Z

6

This is because .net adds type="submit" to Button control by default. You need to set that to false and I would also set CausesValidation to false too, like this:

<asp:Button ID="btnLogin" runat="server" Text="Login"
OnClick="btnLogin_Click" CausesValidation="False" UseSubmitBehavior="False" />

in all fairness however, I wouldn't have used a server-side event just to navigate away on button click. You can achieve that with much easier way:

<a href="Home.aspx" data-role="button">Login</a>

..that's, of course, assuming you don't have to do any other server-side operations before navigating away.

answered Jul 11, 2011 at 10:22

Ruslan

10.2k15 gold badges59 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris Over a year ago

Thanks! it works. The reason I am using link <a> because I have to do some server side validation/authentication for the logged in user which needs to be checked from the database.

Chris Over a year ago

I am also not sure that using ASP.NET controls will be helpful for me or not.. I seriously doubt these controls on mobile devices. but I can not go beyond my client requirement. they don't want to use MVC.

Ruslan Over a year ago

that's OK, they all become html controls in the end of the day. Just make sure you view generated source to see what .net adds to its controls behind the scenes.

Collectives™ on Stack Overflow

ASP.NET webform error with JQuery Mobile

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related