Tuesday, 3 February 2015

C# and JQuery Mobile Login Popup Form

DEFAULT.ASPX

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4.     <title></title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  7.     <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  8.     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  9.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  10.    
  11.     <script>
  12.         function runme() {
  13.             $.ajax({
  14.                 type: "POST",
  15.                 url: "default.aspx/checkLogin",
  16.                 contentType: "application/json; charset=utf-8",
  17.                 data: "{'username':'" + $('#un').val() + "','password':'" + $('#pw').val() + "'}",
  18.                 dataType: "json",
  19.                 success: function (response) {
  20.                     var names = response.d;
  21.                     alert(names);                   
  22.                 },
  23.                 failure: function (response) {
  24.                     alert(response.d);
  25.                 }
  26.             });
  27.         }
  28.         </script>
  29. </head>
  30. <body>
  31.     <form id="form1" runat="server">
  32.         <a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Sign in</a>
  33.         <div data-role="popup" id="popupMenu" data-theme="a">
  34.             <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
  35.                 <div style="padding: 10px 20px;">
  36.                     <h3>Please sign in</h3>
  37.                     <label for="un" class="ui-hidden-accessible">Username:</label>
  38.                     <input name="user" id="un" value="" placeholder="username" data-theme="a" type="text" />
  39.                     <label for="pw" class="ui-hidden-accessible">Password:</label>
  40.                     <input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password" />
  41.                     <button data-theme="b" data-icon="check" onclick="runme()">Sign in</button>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.     </form>
  46. </body>
  47. </html>



 DEFAULT.ASPX.CS

  1. [WebMethod]
  2. public static string checkLogin(string username, string password)
  3. {
  4.     Dictionary<string, string> name = new Dictionary<string, string>();
  5.     name.Add(username, password);
  6.     string myJsonString = (new JavaScriptSerializer()).Serialize(name);
  7.     return myJsonString;
  8. }

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

SQL: Generate a range of numbers

SELECT ones.n + 10*tens.n + 100*hundreds.n + 1000*thousands.n FROM       (VALUES(0),(1),(2),(3),(4),(5),(6),(7),(8),(9)) ones(n),      (VALU...