eray aydoğdu

jQuery and ASP.NET MVC fanatic.

Asp.Net MVC ve Jquery Mobile ile Mobil Uygulama

Akıllı telefonlar ve tabletler gibi mobil platformların kabiliyetlerinin güçlenmesiyle uygulama geliştiriciler için her geçen gün daha önemli hale gelmeye başladı.  JQuery Mobile mobil platformlarda kolayca uygulama geliştirmemizi sağlayan bir framework. Asp.Net MVC 2 (HTML 5) ve Jquery Mobile kullanarak çok basit bir mobil uygulama yapalım.

Visual Stduio 2010 yeni bir proje oluşturduğumuz default olarak XHTML 1.0 dökümanı olarak oluşturur. Bunun yerine default template olarak HTML5 dökümanı oluşturmasını sağlayabilirsiniz. Google da biraz aramayla halledebilirsiniz. Ben şimdi manuel olarak HTML5 e çevireceğim.

Not: Uygulamayı MVC 2 de yapacağız ancak MVC 3 te de çalışacaktır. Ayrıca şuan JQuery Mobile Alpha 2 release ini kullanıyoruz. İleride bu framework oturduğunda bazı şeyler değişebilir.

Yeni bir Visual Studio 2010 projesi oluşturalım (ASP.NET MVC 2 Empty Web Application)

Views\Shared klasörüne ViewMasterPageMVCMobile.master adında bir Master Page ekleyelim.

Controllers klasörüne de HomeController ımızı açalım. Açılan Controller ‘ın içinde gelen Index Action’ına View ekleyelim. Ancak master page ini ViewMasterPageMVCMobile.master seçmeyi unutmayalım.

ViewMasterPageMVCMobile.master sayfanızı aşağıdaki kodlarla değiştirin.

<!DOCTYPE html>
<html lang="en-us" >
<head runat="server">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
 <div data-role="page">
   <div data-role="header">
    <h1><asp:ContentPlaceHolder ID="PageTitleContent" runat="server" /></h1>
   </div>
   <div data-role="content">
     <asp:ContentPlaceHolder ID="MainContent" runat="server" />
   </div>
   <div data-role="footer">
     Footer
   </div>
 </div>
</body>
</html>

Jquery, Jquery Mobile ve CSS kütüphanelerini Jquery CDN sinden çağırarak kullandım ancak isterseniz indirip projenizin içinden de çağırabilirsiniz.

Döküman dan Jquery Mobile framework ünün sayfa yapısı hakkında daha geniş bilgiye ulaşabilirsiniz.

Şimdi Index view imizi oluşturalım aşağıdaki gibi kolay bir kod bloğu ekleyelim.


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ViewMasterPageMVCMobile.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
MVC Mobile
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="PageTitleContent" runat="server">
Page Title Goes Here
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
This is the main content
</asp:Content>

Şimdi projeyi çalıştırabiliriz. Yalnız proje IE7 de çalışmıyor. IE8 yada IE9 da denemedim. Chrome, Firefox ve Safari de gayet güzel ekran boyutunu küçülterek deneyebilir yada mobil platformdan bağlanırsanız, Jquery Mobile ın her telefon için farklı çalışarak sorunsuz entegre olabildiğini göreceksiniz.