Loading ...

jQuery Mobile & ASP.NET Getting Started | CodeAsp.Net

jQuery Mobile & ASP.NET Getting Started

 /5
0 (0votes)

Like I said in my last blog post, jQuery Introduction & Tips, I've been following the development of jQuery mobile for some time now.  And now that it's finally been released, I've decided to make some blog posts to help you get started.  In today's post, I'm going to show you how to quickly set up your Visual Studio Environment to start using jQuery Mobile.

First, you'll want to create a Visual Studio Solution ... I simply created an ASP.NET Web Application project and added a few directories.  You can see these directories in the screenshot below:

Ok, so I added an "Assets" directory ... inwhich I created a few sub-directories to store the assets of the project.  Now, you don't 'have' to set it up this way, however I've found this setup to be optimal in organizing things.  You'll also see that I created a CSS file, "custom-styles.css" ... to store any additional CSS styles that I may (or may not) add.  I've also referenced this CSS file in the "default.aspx" page.

In your default.aspx page, you're going to want to strip out everything that exists in there and replace it with the following "jQuery Mobile Template" code:

And here is a breakdown of this template code:

To get the most out of of the jQuery Mobile framework, you're going to want to use an HTML5 declaration. Note, that older browsers that don't support HTML5 will ignore the DOCTYPE and any other custom attributes you add.

 

<!DOCTYPE html> 

In the HEAD section, you will be adding the references to 'jquery,' 'jquery mobile,' and the 'mobile CSS theme.'  I also recommend adding a reference to your own custom CSS stylesheet as shown below:

 

<head>
<title>Page Title</title>
<link href="/assets/scripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" rel="stylesheet" type="text/css" />
<script src="/assets/scripts/jquery/jquery-1.4.4/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/assets/scripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.js" type="text/javascript"></script>
<link href="/assets/css/custom-styles.css" rel="stylesheet" type="text/css" />
</head>


And for the BODY section, you'll be adding the standard jQuery Mobile page template:

 

<body> 

<!-- start page -->
<div data-role="page">

<!-- start header -->
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- end header -->

<!-- start content -->
<div data-role="content">
<p>Page content.</p>
</div>
<!-- end content -->

<!-- start footer -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- end footer -->

</div>
<!-- end page -->

</body>


And when you put it all together, here is what the standard jQuery Mobile page template looks like:

 

<!DOCTYPE html> 
<html>
<head>
<title>Page Title</title>
<link href="/assets/scripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" rel="stylesheet" type="text/css" />
<script src="/assets/scripts/jquery/jquery-1.4.4/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/assets/scripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.js" type="text/javascript"></script>
<link href="/assets/css/custom-styles.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- start page -->
<div data-role="page">

<!-- start header -->
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- end header -->

<!-- start content -->
<div data-role="content">
<p>Page content.</p>
</div>
<!-- end content -->

<!-- start footer -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- end footer -->

</div>
<!-- end page -->

</body>
</html>

Now, take the standard jQuery Mobile page template, and add it to your default.aspx page in your ASP.NET Web Application Project.  Save it, build your project, and view the default.aspx page in your browser.  You should see something like this:

From here, you'll be able to start adding controls, HTML, content, etc. to your jquery mobile application ... which I'll cover in my next post.

Thanks!

Comments (no comments yet)

  • :*
  • :*
  • :
 *

Top Posts