title: How to mix jQuery Mobile and ASP.NET
body: <p>I'm making a mobile website, using jQuery Mobile and ASP.NET 4.0 Webforms. I have made an initial login page (Default.aspx) in which the button calls an ajax JavaScript function, which calls a page method in the backend like so:</p>
  
  <p><strong>Default.aspx</strong></p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UCP.Default" %&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;UA Cover Plus&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Login --&gt;
      &lt;div data-role="page" id="login"&gt;
          &lt;div data-role="header" data-position="fixed"&gt;
             &lt;h1&gt;Login&lt;/h1&gt;
              &lt;a href="#Family" data-icon="gear" class="ui-btn-right" data-iconpos="notext" data-theme="b" &gt;Options&lt;/a&gt;
          &lt;/div&gt;
         &lt;div data-role="content" data-theme="a"&gt;   
              &lt;input type="text" id="txtUserName" placeholder="Username" /&gt;
              &lt;input type="password" name="passwordinput" id="txtPassword"  placeholder="Password" value=""  /&gt;
              &lt;a href="javascript:Authenticate();" data-role="button" data-icon="check" data-iconpos="right"&gt;Log Me In!&lt;/a&gt;
         &lt;/div&gt;&lt;!-- /content --&gt;
      &lt;/div&gt;&lt;!-- /page --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Ajax JQuery Function :</strong></p>
  
  <pre><code>function Authenticate() {
      $.ajax({
          type: "POST",
          url: "Default.aspx/Authenticate",
          data: "{'name': '" + $('#txtUserName').val() + "','pass': '" + $('#txtPassword').val() + "'}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (msg) {
              if (msg.d != '-1') {
                  userId = msg.d;
                  GetCustomisedConsole();
              } else {
                  alert("Authentication Failed");
              }
          },
          error: function () {
              alert("Error :(");
          }
      });
  };
  </code></pre>
  
  <p><strong>Page method in Default.aspx.cs</strong></p>
  
  <pre><code>    [WebMethod]
      public static int Authenticate(string name, string pass)
      {
          using (DbContext db = new DbContext())
          {
              var user = db.Users.Where(x =&gt; x.UserName == name &amp;&amp; x.Password == pass).SingleOrDefault();
              if (user != null)
              {
                  return user.Id;
              }
              else
              {
                  return -1;
              }
          }
      }
  </code></pre>
  
  <p>My question is, is this the way its meant to be done? I ask this because I see in the jQuery examples the use of forms and submits, which I have no idea how to implement in asp.net.</p>