How to mix jQuery Mobile and ASP.NET

Asked 7/4, 2012 at 18:27 Answered 19/10, 2023 at 19:12

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.

Forenoon answered 7/4, 2012 at 18:27 Comment(1)

Looks fine to me. – Sandbox 19/12, 2016 at 0:13

I'm doing in the same way and works perfect.

Please take a look to this example

Invoking Server Methods Using Jquery

Beekeeping answered 23/5, 2012 at 17:57 Comment(0)

Sure. I dare say this is classic. You can even find it in asp.net core projects with mixed-in JavaScript code (jQuery or otherwise). Also, popular component frameworks for asp.net use this approach to update the UI without a page refresh. For example, in a project of mine, a chart gets updated with data fetched from the server:

function updateChartData(chartId, action, request) {
    // POST call to action to get data and update the chart
    $.ajax({
        "url": "/Charts/" + action,
        "method": "POST",
        "contentType": "application/json",
        "dataType": "json",
        "data": JSON.stringify(request),
        "success": function (chartData) {
            // bind data to the chart
            let chartObj = document.getElementById(chartId).ej2_instances[0];
            chartObj.series[0].dataSource = chartData;
            chartObj.refresh();
        }
    });
}

But, even though it works it is not the best solution in terms of design. Maybe your question stems from your suspicion about this and indeed, sooner than you think, business logic (logic that belongs to the server-side) crawls into the client-side code and you end up with an inconsistent system. My opinion is that it may be okay for small projects but it will cause you more trouble than it's worth otherwise.

Lauranlaurance answered 19/10, 2023 at 19:12 Comment(0)

Recommended topics

Hot tags