Jquery Mobile development asp.net mvc 3 page layout





My first step to start developing mvc3 mobile website.

I have created a website useing mvc3 . I started writing mobile version of my website. Obviously google was the place to start and alos one of my friend mentioned JQuery mobile to me. After spending some time on how and where to start I found JQuery mobile best place to start with.

I created a html page as my first page added CDN references in to the head section of the page. Created a Listview and literly in 5 minutes my page was up and running and I browsed it in my samsung google nexus mobile. Offcourse I had my mobile hosted already and I created a new folder in it name “mobile” and put my new html page in that folder.

Then I started converting my mvc3 website into mobile web and created my Razor layout page as follow.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>@ViewBag.Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 
 
<div data-role="page">
 
    <div data-role="header" data-position="fixed">
        <h1>@ViewBag.Title</h1>
    </div><!-- /header -->
 
    <div data-role="content">    
           @RenderBody()
    </div><!-- /content -->
 
<div data-role="footer" data-position="fixed">
        <h4>© isolutionteam, @System.DateTime.Now.Year </h4>
    </div>
 
</div><!-- /page -->
 
</body>
</html>
My Index home page was as follow
@{
    ViewBag.Title = "Welcome to MyAd.pk ";
    Layout = "~/Areas/Mobile/Views/Shared/_Layout.cshtml";
}
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="b" >
<li data-role="list-divider">heding</li>
<li>@Html.ActionLink()</li>
<li>@Html.ActionLink()</li>
<li>@Html.ActionLink()</li>
<li>@Html.ActionLink()</li>
 
</ul>



Tags: , ,

Comments are closed.