Mixing
How to mix jQuery Mobile and ASP.NET
7
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:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UCP.Default" %>
<!DOCTYPE html>
<html>
<head>
<title>UA Cover Plus</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<!-- Login -->
<div data-role="page" id="login">
<div data-role="header" data-position="fixed">
<h1>Login</h1>
<a href="#Family" data-icon="gear" class="ui-btn-right" data-iconpos="notext" data-theme="b" >Options</a>
</div>
<div data-role="content" data-theme="a">
<input type="text" id="txtUserName" placeholder="Username" />
<input type="password" name="passwordinput" id="txtPassword" placeholder="Password" value="" />
<a href="javascript:Authenticate();" data-role="button" data-icon="check" data-iconpos="right">Log Me In!</a>
</div><!-- /content -->
</div><!-- /page -->
</body>
Ajax JQuery Function :
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 :(");
}
});
};
Page method in Default.aspx.cs
[WebMethod]
public static int Authenticate(string name, string pass)
{
using (DbContext db = new DbContext())
{
var user = db.Users.Where(x => x.UserName == name && x.Password == pass).SingleOrDefault();
if (user != null)
{
return user.Id;
}
else
{
return -1;
}
}
}
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.
asp.net ajax jquery-mobile webforms
edited Mar 11 '15 at 12:18
ROMANIA_engineer
34.3k19156145
asked Apr 7 '12 at 18:27
sprocket12sprocket12
2,4121147103
add a comment |
7
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:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UCP.Default" %>
<!DOCTYPE html>
<html>
<head>
<title>UA Cover Plus</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<!-- Login -->
<div data-role="page" id="login">
<div data-role="header" data-position="fixed">
<h1>Login</h1>
<a href="#Family" data-icon="gear" class="ui-btn-right" data-iconpos="notext" data-theme="b" >Options</a>
</div>
<div data-role="content" data-theme="a">
<input type="text" id="txtUserName" placeholder="Username" />
<input type="password" name="passwordinput" id="txtPassword" placeholder="Password" value="" />
<a href="javascript:Authenticate();" data-role="button" data-icon="check" data-iconpos="right">Log Me In!</a>
</div><!-- /content -->
</div><!-- /page -->
</body>
Ajax JQuery Function :
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 :(");
}
});
};
Page method in Default.aspx.cs
[WebMethod]
public static int Authenticate(string name, string pass)
{
using (DbContext db = new DbContext())
{
var user = db.Users.Where(x => x.UserName == name && x.Password == pass).SingleOrDefault();
if (user != null)
{
return user.Id;
}
else
{
return -1;
}
}
}
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.
asp.net ajax jquery-mobile webforms
edited Mar 11 '15 at 12:18
ROMANIA_engineer
34.3k19156145
asked Apr 7 '12 at 18:27
sprocket12sprocket12
2,4121147103
Looks fine to me.
– sh1rts
Dec 19 '16 at 0:13
add a comment |
7
7
7
1
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:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UCP.Default" %>
<!DOCTYPE html>
<html>
<head>
<title>UA Cover Plus</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<!-- Login -->
<div data-role="page" id="login">
<div data-role="header" data-position="fixed">
<h1>Login</h1>
<a href="#Family" data-icon="gear" class="ui-btn-right" data-iconpos="notext" data-theme="b" >Options</a>
</div>
<div data-role="content" data-theme="a">
<input type="text" id="txtUserName" placeholder="Username" />
<input type="password" name="passwordinput" id="txtPassword" placeholder="Password" value="" />
<a href="javascript:Authenticate();" data-role="button" data-icon="check" data-iconpos="right">Log Me In!</a>
</div><!-- /content -->
</div><!-- /page -->
</body>
Ajax JQuery Function :
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 :(");
}
});
};
Page method in Default.aspx.cs
[WebMethod]
public static int Authenticate(string name, string pass)
{
using (DbContext db = new DbContext())
{
var user = db.Users.Where(x => x.UserName == name && x.Password == pass).SingleOrDefault();
if (user != null)
{
return user.Id;
}
else
{
return -1;
}
}
}
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.
asp.net ajax jquery-mobile webforms
edited Mar 11 '15 at 12:18
ROMANIA_engineer
34.3k19156145
asked Apr 7 '12 at 18:27
sprocket12sprocket12
2,4121147103
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:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UCP.Default" %>
<!DOCTYPE html>
<html>
<head>
<title>UA Cover Plus</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<!-- Login -->
<div data-role="page" id="login">
<div data-role="header" data-position="fixed">
<h1>Login</h1>
<a href="#Family" data-icon="gear" class="ui-btn-right" data-iconpos="notext" data-theme="b" >Options</a>
</div>
<div data-role="content" data-theme="a">
<input type="text" id="txtUserName" placeholder="Username" />
<input type="password" name="passwordinput" id="txtPassword" placeholder="Password" value="" />
<a href="javascript:Authenticate();" data-role="button" data-icon="check" data-iconpos="right">Log Me In!</a>
</div><!-- /content -->
</div><!-- /page -->
</body>
Ajax JQuery Function :
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 :(");
}
});
};
Page method in Default.aspx.cs
[WebMethod]
public static int Authenticate(string name, string pass)
{
using (DbContext db = new DbContext())
{
var user = db.Users.Where(x => x.UserName == name && x.Password == pass).SingleOrDefault();
if (user != null)
{
return user.Id;
}
else
{
return -1;
}
}
}
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.
asp.net ajax jquery-mobile webforms
asp.net ajax jquery-mobile webforms
edited Mar 11 '15 at 12:18
ROMANIA_engineer
34.3k19156145
asked Apr 7 '12 at 18:27
sprocket12sprocket12
2,4121147103
edited Mar 11 '15 at 12:18
ROMANIA_engineer
34.3k19156145
asked Apr 7 '12 at 18:27
sprocket12sprocket12
2,4121147103
edited Mar 11 '15 at 12:18
ROMANIA_engineer
34.3k19156145
edited Mar 11 '15 at 12:18
ROMANIA_engineer
34.3k19156145
edited Mar 11 '15 at 12:18
ROMANIA_engineer
34.3k19156145
34.3k19156145
asked Apr 7 '12 at 18:27
sprocket12sprocket12
2,4121147103
asked Apr 7 '12 at 18:27
sprocket12sprocket12
2,4121147103
asked Apr 7 '12 at 18:27
sprocket12sprocket12
2,4121147103
2,4121147103
Looks fine to me.
– sh1rts
Dec 19 '16 at 0:13
add a comment |
Looks fine to me.
– sh1rts
Dec 19 '16 at 0:13
Looks fine to me.
– sh1rts
Dec 19 '16 at 0:13
Looks fine to me.
– sh1rts
Dec 19 '16 at 0:13
add a comment |
1 Answer
1
active
oldest
votes
0
I'm doing in the same way and works perfect.
Please take a look to this example
Invoking Server Methods Using Jquery
edited Oct 20 '12 at 1:58
McGarnagle
86.8k23185229
answered May 23 '12 at 17:57
PabloPablo
2617
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f10057145%2fhow-to-mix-jquery-mobile-and-asp-net%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I'm doing in the same way and works perfect.
Please take a look to this example
Invoking Server Methods Using Jquery
edited Oct 20 '12 at 1:58
McGarnagle
86.8k23185229
answered May 23 '12 at 17:57
PabloPablo
2617
add a comment |
0
I'm doing in the same way and works perfect.
Please take a look to this example
Invoking Server Methods Using Jquery
edited Oct 20 '12 at 1:58
McGarnagle
86.8k23185229
answered May 23 '12 at 17:57
PabloPablo
2617
add a comment |
0
0
0
I'm doing in the same way and works perfect.
Please take a look to this example
Invoking Server Methods Using Jquery
edited Oct 20 '12 at 1:58
McGarnagle
86.8k23185229
answered May 23 '12 at 17:57
PabloPablo
2617
I'm doing in the same way and works perfect.
Please take a look to this example
Invoking Server Methods Using Jquery
edited Oct 20 '12 at 1:58
McGarnagle
86.8k23185229
answered May 23 '12 at 17:57
PabloPablo
2617
edited Oct 20 '12 at 1:58
McGarnagle
86.8k23185229
edited Oct 20 '12 at 1:58
McGarnagle
86.8k23185229
edited Oct 20 '12 at 1:58
McGarnagle
86.8k23185229
86.8k23185229
answered May 23 '12 at 17:57
PabloPablo
2617
answered May 23 '12 at 17:57
PabloPablo
2617
answered May 23 '12 at 17:57
PabloPablo
2617
2617
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f10057145%2fhow-to-mix-jquery-mobile-and-asp-net%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Looks fine to me.
– sh1rts
Dec 19 '16 at 0:13